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.
-
@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
-
-
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
-
padding-left: 96px !important;
-
padding-top:1px !important;
-
padding-right:110px !important;
-
}
-
-
#appmenu-button-container{
-
position: fixed !important;
-
border:none !important;
-
padding:0 0 3px 1px !important;
-
}
-
-
#appmenu-button{
-
margin-top:3px !important;
-
padding: 3px 8px 3px 30px !important;
-
margin-top:0px !important;
-
/*background-color: rgba(124, 124, 124, 0.8) !important;*/
-
background-image: url(‘menu.png’) !important;
-
background-position:bottom left !important;
-
background-repeat:no-repeat !important;
-
}
-
-
#appmenu-button:hover,
-
#appmenu-button:focus,
-
#appmenu-button:active{
-
/*background-color: rgba(168, 168, 168, 0.96) !important;*/
-
background-position:top left !important;
-
}
-
-
#appmenu-button .button-text{
-
display:none !important;
-
}
-
-
#appmenu-button dropmarker:before{
-
content:“Menu” !important;
-
}
Then, save this image as menu.png in the same folder.
After you close and reopen Firefox, this is what you should see!
page loaded with
13 queries in
0.710.71 seconds
IP.Board Skin Resource – CSS Edit Reduction
One of the things I’ve always despised about IP.Board skinning was the gigantic CSS file included in the skin. There was so much obsolete code in there, the thing was nearly 2000 lines long. With the release of IPB 3.0, I was most happy to see that they were bringing in something that I’ve done personally for years. Abstracted style sheets.
The benefit of using multiple style sheets is that it reduces file size because each individual sheet can be cached by the browser, and they’re only included when necessary. After doing a skin or two, I realized a huge con; it was actually increasing my work load with skins. It’s a nice idea, but the practicality of skinning is really hampered by it. Each one of these extra style sheets (like for the help section, blog, gallery, search page, et cetera) have their own color definitions and I’d find myself editing more and more style sheets trying to get everything matching.
The first thing I accomplished today was stripping all color information from these multiple style sheets and putting them into ipb_styles.css. This way, all the specific code that controlled layout was in its own file, and all of the actual style definitions where in one spot.
It was pretty annoying too… Although hex codes are used everywhere, there are RGB definitions set in the blog file, and there are some random named colors (ie: gray, white, black, red) throughout. I’ve replaced these oddities with hex codes for easier editing. It should provide a nice base to work off of while replacing colors, and I’ve released it here for other skinners.
Notes: While I’ve taken all of the colors and ‘condensed’ them into ipb_styles, I did not move the colors from the editor style sheet or ipb_common. This way it’s easier to drop in light or dark quote and editor styles across multiple skins.
The first thing I’m doing with this skin set is creating an IP 2.3 skin from which I can build updated versions of 2.3 skins, and I’ll release that as well, so stay tuned for that!
You can download the file from the Skinner Resources category in the download system!