Recommended Posts

I'm trying to approximate my FF button to match this mockup: https://bug513162.bugzilla.mozilla.org/attachment.cgi?id=451630

But I've run into a snag.

How do I make the FF button longer and thinner (like in the mockup)?

Padding and fixed height like this.

#appmenu-button {
  max-height: 20px !important;
  min-height: 20px !important;
  padding: 0 14px 0 14px !important;
}

Thanks Soapy.

One more question, is it feasible to make the tabs a bit smaller (again, to match the mockup) or should I wait for the tab-changes to land on Minefield?

This is what I'm working with currently.

#TabsToolbar {
  min-height: 24px !important;
  height: 24px !important;
  max-height: 24px !important;
}

.tabbrowser-tab .tab-text,
.tab-icon-image,
.tabs-newtab-button .toolbarbutton-icon {
  margin-top: -2px !important;
}

Better Firefox menu

post-49492-12799959532262.png

http://userstyles.org/styles/34025

I have a lot of fixes, not sure if I should release them individually or all in one style..

I have a lot of fixes, not sure if I should release them individually or all in one style..

Personally, I prefer individual.

Makes it easier to manage them/pick and choose.

I added your better gradient colors to my FF button, looks pretty darn close to the mockup.

Guru, Soapy.

How to make small icon when put bookmark and history button at bookmark toolbar like when put button at tabs toolbar?

I think this is what you want, let me know.

#PersonalToolbar .toolbarbutton-1 {
  -moz-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  -moz-box-shadow: none !important;
}

I think this is what you want, let me know.

#PersonalToolbar .toolbarbutton-1 {
  -moz-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  -moz-box-shadow: none !important;
}

Yes its work as what i want.

Currently using your 3 custom stylish Firefox 4 better app button style, Firefox 4 combine stop/reload with urlbar and Firefox 4 darker inactive tab.

Thanks a lot dude. :)

I think this is what you want, let me know.

#PersonalToolbar .toolbarbutton-1 {
 -moz-appearance: none !important;
 background: transparent !important;
 border: 0 !important;
 -moz-box-shadow: none !important;
}

Can U put a screenie of what this code really do maybe? ;)

Im pretty happy with what I have now. One or two small things I would like to change if some one can help me. When I have a lot of tabs open, the "New Tab" button is too close to the caption buttons in Maximise screen, seems to be ok in normal screen, also the lower spacing between the "Foxy" button and the url bar is slightly smaller than the space between the caption button and url bar. Can some one help? :D

post-346088-12800484286984.png

post-346088-12800486193624.png

#appmenu-button-container{
position: fixed !important;
}




#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 82px !important;
padding-top:1px !important;
padding-right:107px !important;
}


#appmenu-button{
padding: 3px 14px 3px 14px !important;
margin-top:3px !important;
}

 #appmenu-button {
   -moz-appearance: none !important;
   background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%) !important;
   background-clip: padding-box !important;
   -moz-border-radius: 0 0 4px 4px !important;
   border-top: none !important;
   border: 2px solid !important;
   border-top: none !important;
   -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                    0 0 0 1px rgba(255,255,255,.40) inset !important;
   color: white !important;
   font-weight: bold !important;
   text-shadow: 0 0 1px rgba(0,0,0,.7),
                0 1px 2px rgba(0,0,0,.5) !important;
   padding: 2px 1.5em .15em 1.5em !important;
   margin: 0 !important;
 }

 #appmenu-button:-moz-window-inactive {
   background: transparent !important;
   background-clip: padding-box !important;
   -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                    0 0 0 1px rgba(255,255,255,.35) inset !important;
 }

 #appmenu-button:hover:not(:active):not([open]),
 #appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
   background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%),
                     -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)),
                     -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
   border-color: rgba(83,42,6,.9) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset,
                    0 0 2px 1px rgba(250,234,169,.7) inset,
                    0 -1px 0 rgba(250,234,169,.5) inset !important;
 }

 #appmenu-button:hover:active,
 #appmenu-button[open] {
   background-image: -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
   -moz-border-radius: 0 !important;
   -moz-box-shadow: 0 2px 4px rgba(0,0,0,.4) inset,
                    0 1px 1px rgba(0,0,0,.2) inset !important;
 }

#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Foxy" !important; }

#main-menubar{
margin-left: 78px !important;
}






#feed-button 
{
  display: none !important;
}





toolbar[mode="icons"][currentset*="urlbar-container,reload-button,stop-button"] #urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -3px !important;
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+U3GAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozQkQ3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0ODAwNTk3Rjk2NjExMURGOTRBMUI2RTAyRUYxRjAxNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0ODAwNTk3RTk2NjExMURGOTRBMUI2RTAyRUYxRjAxNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQ0Q3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQkQ3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoZDigQAAAN3SURBVHjajJJ/aBNnGMefy11ySS65kOtilyZNurX+rAYzEJ2DaVn9R+vAsblUN2m1UK2KKM5J/bEaVnGsqfujigqWOqZVmJPqtO3arbINEcfEiVpbtYKm1NCY1OSa5HJ573yutFDY/tgLH7jn5b3v+7zP90s9HonrAMCE8IgV/r1yCLOybGnFQP+DZvi/C4VtyMyvvz26xOUubDCY7ReBy+sz2J0XnQVFQW1/1py5u4Ay9amqChVFBVWIQ/ueDu4JyKapmtJEd9bVzLva0bXFIOQZXM4ZYY/b/TIhivnxV8k3QadTiKLSRM7CO5lIO0vTJ0FH3ZVzpPzSk+ejWnNrigsFPUP3gqL6JUK2dwyFW5jzP7TlXbvcVWtzFYiHDtR3ra8MvFBUNaMoqvR5dc1HY4nxhQaTEZJjMag/ePhJW8O+iBSP+XI03RuY5S1HXWJhDb16AL9BsEU3HAg+1i6j3B7vVxFRXhY60nh2XSAwnM7KYUkm2ZVl71eIYFhd6CkEjuMgGX8Jt/o6Vz0beFj3XW317uyrsXx8zV1QgQDJ+Rmej+440Rp6q3RBC+qKFKM3XSqe7xu98fv1y5Kcu5+ScjIatXZwaHi1p6QEBEEAhmZATMSh//bNMvzJHB4cqDu9c+tuRUzmg6Lgjim68ejxkHfe/AlRrWOGUIzF5XI9xaenUDSubV7ru/Gzxai/iXMT/sPvVOfpU+0sy26nFYK62LCezfScaT1f802zOHUIm9GL6VTajnOVsaaRJBIWM3IUQMbRgRZHosVOsBihesFMwW7lr9g5zmN8wxGlVELGRl647/3W01E19+3ytv6hCUN1+YL1n9FYzHuuvd2Ldd5klrULVO1ihJ1sYhzNEvRompFS/TqzOfpJQ2NobWNTk95mjbAU+LRk4BnHhPCmzXW/SBlJvvDjTx+fOnli9qS4E3EE9+8vXfHeu5/+cf1XF9YW1sx9hg36wcRFNxxpDrlmz2lxFpccrwoda6J5PoIB9hk5rmoiFVqO9+7Z4xt4NFhrsfIMIeQpZnQ4mUw60+lM8Xgill1fWXnuiy/39ngdfEHrwfpDHwTW/TndKM3Q55iWnrPfL98YPBzE+pYmbMOPGZ1Xr3i6u7s/TIipEimbNaMrot3GP9q2dcvfS5csjuFc7uCMR/DsIqR/mujUMiOlyF9a8VqAAQCMEogyPkkkHQAAAABJRU5ErkJggg==") !important;
  opacity: 1 !important;
  padding: 0 6px 0 6px !important;
  -moz-transition: -moz-box-shadow .1s !important;
}

#urlbar-container + #reload-button {
  -moz-image-region: rect(0 11px 12px 0) !important;
}

#urlbar-container + #reload-button + #stop-button {
  -moz-image-region: rect(0 22px 12px 11px) !important;
}

#urlbar-container + #reload-button:not([disabled]):hover{
  background-image: -moz-linear-gradient(#9eccf1, #6fb1e1 49%,
                                   #5b9fd9 50%, #5198d2 60%,
                                   #3e8ac9) !important;
  -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,.40) inset !important;
}

#urlbar-container + #reload-button + #stop-button{
  background-image: -moz-linear-gradient(#e6a18a, #d17764 49%,
                                   #c05d4e 50%, #b95546 60%,
                                   #c15a4a) !important;
  -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,.40) inset !important;
}

#urlbar-container + #reload-button:not([disabled]):hover:active,
#urlbar-container + #reload-button + #stop-button:not([disabled]):hover:active {
  -moz-box-shadow: inset 0 0 3px rgba(0,0,0,.8) !important;
}

#stop-button .toolbarbutton-icon,
#reload-button .toolbarbutton-icon{
  height: auto !important;
  width: auto !important;
}



#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button)  {
  background-position: -5px -2px !important;
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.70),
                                   rgba(151,160,172,.70)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover {
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),
                                   rgba(151,160,172,.8)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}






It probably isn't an issue for most of you, but I have difficulty reading my bookmarks toolbar sometimes because my monitor is a 46" HDTV, so I have to sit back a ways from it. I came up with this after some messing around.

post-1972-12800625772084.png

#PersonalToolbar .bookmark-item:not(menuitem){
  font-size: 3.6mm !important;
  font-family: calibri !important;
  font-weight: bold !important;
  color: white !important;
  text-shadow: 0 0 3px rgba(0,0,0,1), 0 0 3px rgba(0, 0, 0,1) !important;
}

Can U put a screenie of what this code really do maybe? ;)

It just removes the border/background and box-shadow when you put toolbarbuttons in the PersonalToolbar.

Soapy! Help me please

http://userstyles.org/styles/32627

Apply this style and then press alt , and please tell me the code to fix it :(

Here you go.

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
  padding: 7px 110px 0 4px !important;
}

.tabbrowser-tab[fadein] {
 max-width: 210px !important;
}

#appmenu-button-container {
  display: none !important;
}

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button)  {
  background-position: -5px -2px !important;
  background-image: -moz-linear-gradient(top,#D2D2D2,
                                   rgba(151,160,172,.70)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.6) 25%, rgba(0,0,0,0) 75%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover {
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),
                                   rgba(100,100,100,.8)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
  text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
}

#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar) {
  background-color: #D2D2D2!important;
}

#navigator-toolbox[tabsontop="true"] .tabbrowser-tab[selected="true"] {
 background-image: -moz-radial-gradient(center bottom, #D2D2D2, rgba(178,178,178,0) 0%),
 -moz-linear-gradient(left, transparent, transparent 1px,
 rgba(255,255,255,.5) 1px, rgba(255,255,255,.5)),
 -moz-linear-gradient(left, transparent, transparent 1px,#D2D2D2 1px, #E0E0E0) !important;
}

.tabbrowser-tabs {
  -moz-margin-start: 0 !important;
}

Im pretty happy with what I have now. One or two small things I would like to change if some one can help me. When I have a lot of tabs open, the "New Tab" button is too close to the caption buttons in Maximise screen, seems to be ok in normal screen, also the lower spacing between the "Foxy" button and the url bar is slightly smaller than the space between the caption button and url bar. Can some one help? :D

Give this a shot, it should be about the same size as the caption buttons. Nice use of radial gradients (Y)

#main-window:not([sizemode="maximized"]) {
  margin-top: 1px !important;
}

#appmenu-button-container{
  position: fixed !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop="true"] #TabsToolbar{
  padding: 1px 110px 0 82px !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
  padding: 0 110px 0 82px !important;
}

 #appmenu-button {
   -moz-appearance: none !important;
   background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%) !important;
   background-clip: padding-box !important;
   -moz-border-radius: 0 0 4px 4px !important;
   border: 2px solid !important;
   border-top: 0 !important;
   -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                    0 0 0 1px rgba(255,255,255,.40) inset !important;
   color: white !important;
   font-weight: bold !important;
   text-shadow: 0 0 1px rgba(0,0,0,.7),
                0 1px 2px rgba(0,0,0,.5) !important;
   padding: 0 1.5em 1px 1.5em !important;
 }

 #appmenu-button:-moz-window-inactive {
   background: transparent !important;
   background-clip: padding-box !important;
   -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                    0 0 0 1px rgba(255,255,255,.35) inset !important;
 }

 #appmenu-button:hover:not(:active):not([open]),
 #appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
   background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%),
                     -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)),
                     -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
   border-color: rgba(83,42,6,.9) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset,
                    0 0 2px 1px rgba(250,234,169,.7) inset,
                    0 -1px 0 rgba(250,234,169,.5) inset !important;
 }

 #appmenu-button:hover:active,
 #appmenu-button[open] {
   background-image: -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
   -moz-border-radius: 0 !important;
   -moz-box-shadow: 0 2px 4px rgba(0,0,0,.4) inset,
                    0 1px 1px rgba(0,0,0,.2) inset !important;
 }

#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Foxy" !important; }

#main-menubar{
  padding-left: 82px !important;
}

Thanks , updating the style with proper credits :D

No problem :)

Give this a shot, it should be about the same size as the caption buttons. Nice use of radial gradients (Y)

Very nice thank you.

post-346088-12800696515855.png

Another question, I would like the tabs to be smaller, and in 3.6 I could change this an about:config, I dont see it in 4.0b2. Have the changed it?

Give this a shot, it should be about the same size as the caption buttons. Nice use of radial gradients (Y)

Very nice thank you.

Another question, I would like the tabs to be smaller, and in 3.6 I could change this an about:config, I dont see it in 4.0b2. Have the changed it?

Are you talking about Tab width? You can change that its just done using CSS now.

.tabbrowser-tab {
  max-width: 100px !important;
  min-width: 100px !important;
}

Can anybody help me create the code for the colour of the app menu button? I'm a bit too confused with all this '-moz-linear-gradient', '-moz-radial-gradient' and '-moz-box-shadow' :p

I'm trying to change the colour of the button when the browser is in private browsing mode. I stole the colour from SoapyHamHocks red Stop button style:

#main-window[browsingmode=private] #appmenu-button{
    background-image: -moz-linear-gradient(#e6a18a, #d17764 49%, #c05d4e 50%, #b95546 60%, #c15a4a)!important;
}

This works OK, but it really needs a different colour for the hover state and I'm confused :(

The code I have for my current default menu button is:

#appmenu-button
{
    padding: 1px 5px 1px 5px !important;
    height: 20px !important;
    min-width: 45px !important;
    width: 45px !important;
    background-image: -moz-linear-gradient(rgba(255,224,159,0.8), rgba(255,224,109,0.5) 40%, rgba(255,224,109,0.2) 50%, rgba(255,255,255,0.05) 51%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.7) 29%, rgba(248, 233, 164, 0.4) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 5px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;
}

#appmenu-button:hover:active, #appmenu-button[open] 
{
    background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3) inset !important;
}

post-303978-12800888260952.jpg

Anyone feel like making it a whole let sexier?

Can anybody help me create the code for the colour of the app menu button? I'm a bit too confused with all this '-moz-linear-gradient', '-moz-radial-gradient' and '-moz-box-shadow' :p

I'm trying to change the colour of the button when the browser is in private browsing mode. I stole the colour from SoapyHamHocks red Stop button style:

#main-window[browsingmode=private] #appmenu-button{
    background-image: -moz-linear-gradient(#e6a18a, #d17764 49%, #c05d4e 50%, #b95546 60%, #c15a4a)!important;
}

This works OK, but it really needs a different colour for the hover state and I'm confused :(

The code I have for my current default menu button is:

#appmenu-button
{
    padding: 1px 5px 1px 5px !important;
    height: 20px !important;
    min-width: 45px !important;
    width: 45px !important;
    background-image: -moz-linear-gradient(rgba(255,224,159,0.8), rgba(255,224,109,0.5) 40%, rgba(255,224,109,0.2) 50%, rgba(255,255,255,0.05) 51%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.7) 29%, rgba(248, 233, 164, 0.4) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 5px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;
}

#appmenu-button:hover:active, #appmenu-button[open] 
{
    background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3) inset !important;
}

post-303978-12800888260952.jpg

Anyone feel like making it a whole let sexier?

the selector you need to modify the hover appearance is:

#main-window[browsingmode="private"] #appmenu-button:hover{

}

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • To give context to everybody, I bought about 2 sets of RAM, ddr4, 3200, 64 gb, 2 years ago. It costed me 150 usd for each set. If you buy RAM now you only incentivate companies to sell you expensive stuff, as Nvidia did.
    • KillerPDF 1.4.2 by Razvan Serea KillerPDF is a lightweight, portable PDF editor for Windows built for users who want full control without subscriptions, installers, or telemetry. It runs as a single executable, making it ideal for USB use and field work. You can view PDFs with smooth PDFium rendering, navigate quickly with thumbnails, zoom, and shortcuts, and reorganize pages using drag-and-drop. It supports merging multiple PDFs, splitting documents, and extracting selected pages. KillerPDF also allows inline text editing with font matching to preserve the original layout, plus annotations like text boxes, freehand drawing, highlights, and reusable signatures. You can search full text, copy content easily, and print documents with flattened annotations. Designed as a free and open alternative to bloated PDF tools, it works fully offline on Windows 10/11 x64. No runtimes install. Everything needed is inside the EXE (targets .NET Framework 4.8, which ships with every supported Windows release). KillerPDF key features: High-quality PDF rendering via PDFium Edit PDF text inline (double-click to modify text) Page thumbnails and fast navigation with zoom and shortcuts Merge multiple PDFs into one Split PDFs and extract selected pages Drag-and-drop page reordering Font matching to preserve original document appearance Text boxes for notes Freehand drawing tools Highlight overlays with adjustable color, size, opacity Undo actions and clear per-page annotations Create, draw, and save reusable signatures Click-to-place signatures anywhere Full-text search with highlighted results Drag-select or Ctrl+A to copy text Print with annotations flattened Portable single-file app (~10 MB) No installer, no admin rights required No account, no telemetry KillerPDF 1.4.2 changelog: What's new PDF form filling. Interactive PDF forms now render their fields (text inputs, checkboxes, radio buttons) as live controls. Fill them in directly and save — field values are written back into the PDF. PDF outline (bookmark) navigation. A new OUTLINES tab in the sidebar displays the document's bookmark tree. Click any entry to jump to that page. The sidebar auto-fits its width to the longest entry on open and can be dragged wider; switching back to PAGES snaps to the pages-mode width. Fixed Page rotation no longer reverts after saving. Rotations applied via the sidebar context menu now persist correctly through the save pipeline. Copied text words were out of order on PDFs where glyphs are stored in non-reading order (Issue #66). Text extraction now sorts words by position and uses a dynamic line-grouping threshold so both drag-select and Select All produce correctly ordered output. PDFs with malformed or non-standard XRef tables now open in read-only mode instead of showing "Invalid entry in XRef table" and failing entirely. Download: KillerPDF 1.4.2 | 6.1 MB (Open Source) Link: KillerPDF Home Page | Github | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • "...a low price of just $340..." I don't think it means what you think it means.
    • This Corsair Vengeance DDR5-6000 32GB RAM with RGB is a great deal for limited time by Sayan Sen Memory prices have been through the roof for a while, though it seems like things might finally be getting better. If you are in the market for one, then grab this Corsair Vengeance DDR5 32GB (2x16GB) DDR5 6000 CL36 kit with RGB for a low price of just $340 (purchase link under the specs table down below). The kit is compatible with both AMD and Intel systems as it supports both EXPO and XMP overclocking profiles, respectively. 6000 MT/s is often the sweet spot for many systems as it provides ample data transfer speed while still being on Gear 1 mode. This Vengeance variant has RGB so if you love bright setups with such lighting, this is a win-win for you. The technical specifications of the Corsair Vengeance memory kit are given in the table below: Specification Value Memory Type DDR5 Memory Size (Total) 32GB Kit Configuration 2 × 16GB Form Factor UDIMM (Desktop) Pin Count 288-pin Speed (Data Rate) 6000 MT/s Speed Rating PC5-48000 Tested CAS Latency 38-44-44-96 Voltage (Tested) 1.35V Performance Profile AMD EXPO & Intel XMP Heat Spreader Aluminum heatspreader Cooling Type Passive (Heatsink) Lighting Ten Zone RGB Software Support Corsair iCUE Get it at the link below: CORSAIR Vengeance RGB DDR5 32GB (2 x 16GB) 6000 CL38 – Gray (CMH32GX5M1E6000Z38): $339.99 (Sold and Shipped by Woot US, Fulfilled by Amazon US) This Woot deal is US-specific and not available in other regions unless specified. This is a first-party seller link (at the time of article publishing); ensure that you also purchase from a first-party seller link only. If you don't like it or want to look at more options, check out the previous deals that we have covered, OR you can also visit Amazon US deals page. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • The very fact that a TPM (v2.0 specifically which is part of the issue I suspect) is now a baseline for any supported Windows installation will naturally mean other vendors will start to leverage it as they know it'll be there. It's called progress, and it's always been the way. A TPM isn't a windows thing, it's just a module designed to securely store keys. Secure boot isn't a Windows thing (although MS are the TCA as I recall hence the upheaval this year as the 2011 certs expire), it's just a way to verify a bootloader is signed. Windows simply leverages them.
  • Recent Achievements

    • Proficient
      Eric Biran went up a rank
      Proficient
    • Dedicated
      Conjor earned a badge
      Dedicated
    • Week One Done
      Windows Guy earned a badge
      Week One Done
    • Dedicated
      Mark Spruce earned a badge
      Dedicated
    • Collaborator
      conkir earned a badge
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      479
    2. 2
      PsYcHoKiLLa
      244
    3. 3
      Steven P.
      72
    4. 4
      +Edouard
      66
    5. 5
      Skyfrog
      65
  • Tell a friend

    Love Neowin? Tell a friend!