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

    • The official Funny Pictures thread

      By Steven P. · Posted

    • Gears of War: E-Day brings 12-player co-op, smoother traversal mechanics, and more

      By leonsk29 · Posted

      Thanks, Sony and Nintendo, you effectively killed platform-agnostic gaming. Long gone are the days when you could wish to play a specific game on whatever platform you were. Now, you have to buy the hardware just to play that single game. What, you're only interested in THAT game and nothing more? Bad luck, suck it and buy our console.
    • This Corsair Vengeance DDR5-6000 32GB RAM with RGB is a great deal for limited time

      By TheGodOfKratos · Posted

      The AI data centers need it more than us so...let them gobble it all up at that price!
    • "CRAZIER than ever!" Crazy Taxi: World Tour is officially coming soon

      By LoneWolfSL · Posted

      "CRAZIER than ever!" Crazy Taxi: World Tour is officially coming soon by Pulasthi Ariyasinghe Sega announced it is working on bringing back some of its classic franchises in 2023, and while it has taken some time, the company finally gave fans a look at one of these new projects at the Xbox Games Showcase today, which turned out to be a brand-new Crazy Taxi entry. Watch the debut trailer above, which has snippets of gameplay in between the cinematic bits while blasting a track from The Offspring. Dubbed Crazy Taxi World Tour, this installment is aptly being described as being "CRAZIER than ever!" The director behind the original, Kenji Kanno, is helming this new entry as well, which will come with access to five new cities to drive in, competitive multiplayer modes, a vehicle customization system, and more. Axel is returning as a protagonist as well, but this time a mystery driver is offering him the opportunity to take his adventures to the streets in other countries. This will involve Axel chasing down masked villains that have somehow stolen his taxi, which means even more extreme missions and challenges to overcome. "From transporting passengers at top speed to tackling unique side missions and odd jobs across dynamic maps, there are countless ways to drive crazy and rake in big money," says Sega about this new installment after over 20 years. "Perform outrageous drifts, catch insane air, and drive at crazy speeds across five different cities as you work to deliver passengers and complete a variety of missions and challenges." The studio has even confirmed an in-game Arcade Mode that players will be able to access containing the original games for plenty of nostalgic action. Crazy Taxi: World Tour is currently slated to release sometime in 2027 across PC, Xbox Series X|S, PlayStation 5, and Nintendo Switch 2.
    • State of Decay 3 is out in 2027, reveals Plague Nests with new co-op gameplay trailer

      By Figure 8 Dash · Posted

      This and Crazy Taxi are the two games that interested me the most from this showcase.

  • 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
      492
    2. 2
      PsYcHoKiLLa
      248
    3. 3
      Steven P.
      71
    4. 4
      +Edouard
      69
    5. 5
      ATLien_0
      67
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!