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

Link to comment
Share on other sites
Collaborator

Duke D

Posted
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?

Link to comment
Share on other sites
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..

Link to comment
Share on other sites
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.

Link to comment
Share on other sites
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;
}

Link to comment
Share on other sites
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. :)

Link to comment
Share on other sites
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? ;)

Link to comment
Share on other sites
Veteran

Unrealistic

Posted
Posted

Is there any style to show the bookmarks button next to address bar even if the bookmarks bar is showing?

I second this. I wanted to ask about that a few days ago, but I completely forgot.

Link to comment
Share on other sites
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;
}

Link to comment
Share on other sites
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;
}

Link to comment
Share on other sites
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;
}

Link to comment
Share on other sites
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 :)

Link to comment
Share on other sites
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?

Link to comment
Share on other sites
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;
}

Link to comment
Share on other sites
Contributor

BantryRed

Posted
Posted

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

That easy :cool: Sweet

Link to comment
Share on other sites
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?

Link to comment
Share on other sites
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{

}

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.