Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

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;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

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..

Collaborator

Duke D

Posted
Posted

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.

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

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;
}

Contributor

mame32kawaks

Posted
Posted

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. :)

Collaborator

vajlent

Posted
Posted

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? ;)

Contributor

BantryRed

Posted
Posted

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;
}

Veteran

Darrian

Posted
Posted

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;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

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;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

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 :)

Contributor

BantryRed

Posted
Posted

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?

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

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;
}

Enthusiast

Jimcando

Posted
Posted

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?

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

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.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • WildBit Viewer 6.20 released; no further updates planned

      By +Eternal Tempest · Posted

      I really hope the author's health is ok. Squirreling away a official backup of this software. Looks like the internet archive already cached a copy as well - https://web.archive.org/web/20...ldbit-soft.fi/software.html
    • AMD 9070XT

      By Arceles · Posted

      AMD is supported out of the box in linux because of their open source driver. Nvidia does not. All my systems are amd and all of them work nicely on linux arch without doing anything.
    • Nearly 70% of Steam users now run Windows 11

      By WaltC · Posted

      Never had a problem with TPM and started using that many years ago in Win10. Through several motherboards and OS versions, it just does what it does without complaint. My games library doesn't even know it's there. Secure boot does a lot more than support anti-cheat, as it came along long before anti-cheat software. I've used it religiously since before I started using TPM, and I always liked it for being able to nullify virus contagions that try their best to come in underneath the firmware during boot, so that the OS doesn't see them, etc. That is its purpose, imo. I'll never understand why people who elect to use another OS feel compelled to run down Windows... I guess they need to do that to feel secure about their choices? I run Windows because it supports all the software (including games) natively that I want to buy, and I've never had to run down another OS to make me feel better about it. (Although it's certainly possible to do that, of course...) Win10 is on a ventilator atm, and Win11 is very close to being free, and I finally got to stop running StartAllBack as I moved to the Experimental/Dev channel and my 26300.8553 build supports the moveable taskbar and it's running fine at the top of the screen! Finally, my last major dislike of Win11 is being rectified! So, I'm not at all surprised to see Win11's share of the Steam survey hitting 70%.
    • AMD 9070XT

      By Mindovermaster · Posted

      I can answer about the Linux bit. I only used AMD GPUs. I currently have a 9060XT (8GB) that fits my needs, I'm not a gamer, so I don't need that much GDDR. But lately, NVIDIA has grown a lot in the recent years. Oh, the horrors of NVIDIA drivers not working. But they have been getting better. I know a lot of members onm here that are running cachyOS and other distros, and are fine with a 4090/5090 variants. Really, though, I would stick with AMD variants.
    • Microsoft is making Windows 11's context menus faster, simpler, and configurable

      By spacelordmaster · Posted

      Everything they say you can already do yourself on the registry by changing some things.

  • 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
      252
    3. 3
      Steven P.
      71
    4. 4
      +Edouard
      69
    5. 5
      FloatingFatMan
      68
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!