Create a custom theme
0
Posted by
There’s been some discussion about changing the menu button in Firefox 4.0, so I figured I’d give it a shot. It’s just CSS, so how hard could it be?
First step is opening up your Firefox profile directory. Easiest way to do this is by going to about:support and clicking the big “Open Containing Folder” button.
Save this CSS as userChrome.css in the Chrome directory.
Here’s a plain text version of the code.
After you close and reopen Firefox, this is what you should see!
Source
First step is opening up your Firefox profile directory. Easiest way to do this is by going to about:support and clicking the big “Open Containing Folder” button.
Save this CSS as userChrome.css in the Chrome directory.
Here’s a plain text version of the code.
- <li class="li1">@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);<li class="li2"> <li class="li1">#navigator-toolbox[tabsontop="true"] #TabsToolbar{<li class="li2"> padding-left: 96px !important;<li class="li1"> padding-top:1px !important;<li class="li2"> padding-right:110px !important;<li class="li1">}<li class="li2"> <li class="li1">#appmenu-button-container{<li class="li2"> position: fixed !important;<li class="li1"> border:none !important;<li class="li2"> padding:0 0 3px 1px !important;<li class="li1">}<li class="li2"> <li class="li1"> #appmenu-button{<li class="li2"> margin-top:3px !important;<li class="li1"> padding: 3px 8px 3px 30px !important;<li class="li2"> margin-top:0px !important;<li class="li1"> /*background-color: rgba(124, 124, 124, 0.8) !important;*/<li class="li2"> background-image: url(‘menu.png’) !important;<li class="li1"> background-position:bottom left !important;<li class="li2"> background-repeat:no-repeat !important;<li class="li1"> }<li class="li2"> <li class="li1"> #appmenu-button:hover,<li class="li2"> #appmenu-button:focus,<li class="li1"> #appmenu-button:active{<li class="li2"> /*background-color: rgba(168, 168, 168, 0.96) !important;*/<li class="li1"> background-position:top left !important;<li class="li2"> }<li class="li1"> <li class="li2">#appmenu-button .button-text{<li class="li1"> display:none !important;<li class="li2">}<li class="li1"> <li class="li2">#appmenu-button dropmarker:before{<li class="li1"> content:“Menu” !important;
- }
After you close and reopen Firefox, this is what you should see!
Source
