Main Content

iPox Hacks – Bookmarks Bar

New Hacks Documentation ->

Two complaints I hear again and again are that people don’t like the blue of the bookmarks bar or they don’t want the icons in the bookmarks bar. Well good news. We can fix that for you.

Update: Get Stylish and you don’t have to worry about finding or editing the userChrome.css!

First you must understand what your userChrome.css file is and where it is. Head over to Mozilla to learn about it.

One you have located or created your userChrome.css file you can add a few lines of code to remove what you don’t like.

Note: I’m on a Mac, this works on a Mac, if you’re on a PC please let me know what works or doesn’t and how to fix it. ๐Ÿ˜‰

Code:

/* 1 Change Personal Toolbar Background Color */
#PersonalToolbar { background: #e5e5e5 !important; }

/* 2 Change Personal Toolbar Background Image */
#PersonalToolbar { background: url("yourImage.png") repeat-x !important; }

/* 3 Change Personal Toolbar Text Color */
.toolbarbutton-text { color: #464646 !important; }

/* 4 Kill bookmark icons in the Personal Toolbar */
toolbarbutton.bookmark-item > .toolbarbutton-icon { display: none; }

1) Allows you to define any color for the back of the bookmarks toolbar. This will override my blue pattern.

2) Same as 1 except you can define an image. Just put in the path to the image and you’ll be good to go.

3) Depending on what you change 1 or 2 to you might need to change the color for readability sake. Here is where you do that.

4) Kills the icons in the bookmark bar. Ok hides them, kill is such a scary word. However if you do this, you may get some odd overlapping issues on the left side of the bookmark hover. Don’t complain, it’s a hack.

That should do it for now. Just trying to make everyone happy. Let me know if you have success or not. ๐Ÿ™‚

Ohh and it’s good to note that this effects all Firefox themes on your machine; not just iPox.


40 Responses

  1. Tad says:

    Can one get round buttons in WINXP? Or Apple-like buttons on the WIN top line?
    I like your theme….. ******

  2. Maarten says:

    I have to say I liked the bookmarks toolbar before 0.50 better. This new one is just a bit ‘too’ blue.
    I am also sorry to say the folder icons are also less nice :p
    now the good things: the new hover buttons are great and the scrollbar looks very, very good. Also good work on fixing the grey inputfield bug!

  3. Ross says:

    I like it , but most of it is grey/silver and only a little is blue so please change that

  4. Thomas says:

    Ross, I’m not changing how my theme looks. This version isn’t supposed to be tons of color. But I am considering creating a spin off in the future.

  5. Adam says:

    Is there an easy way to add the separators back into the tool bar… kinda miss those. Other than that though, I really enjoy this theme, thanks for the great work!

  6. Thomas says:

    Adam – I have no idea there. What separators are you talking about? I’m not sure I know what you’re talking about.

  7. Max says:

    I tried to hack it like you recommended above, but I can’t seem to make it work, maybe if you gave more specific directions? Or perhaps you could make a copy of your skin, but without the blue and with standard icons in the the bookmark bar. That way more people (like me) will actually use it. Thanks

  8. ryanne says:

    thanks for the update!

    i love the new scrollbars except that i prefer them to be greyish….would it be difficult to hack?

    thanks again!

  9. Thomas says:

    ryanne – I’m sure there is a way, but you’d need quite a bit of code. If it’s really important I can send you some code to try. Hit up the contact form and let me know if you want it.

  10. aaron says:

    how you you get the bookmark bar text to change colour because it doesn’t really match the colour of my bkground image, in stylish when i put in the code

    #toolbarbutton-text { color: #2E8B57 !important; }

    nothing happens

  11. Thomas says:

    aaron – It should be .toolbarbutton-text not #toolbarbutton-text. Plus, you may need to quite Firefox and restart it or the changes to take effect.

  12. atomicSpatule says:

    Is it possible to hack the bar so it changes when you rollover a link? I tried the following, with no luck :
    .toolbarbutton-text { color:#C0C0C0 !important }
    .toolbarbutton-text:hover { background: #686868; color:#C0C0C0 font-size:1.1em; !important }
    Any ideas on how I could get this to work?

  13. passerby says:

    Since you’ve provided a hack for the bookmarks bar, any chance of offering an alternative for the tab bar that would provide Safari-style tabs?

  14. Scotty D says:

    All you guys or girls really need to stop complaining. Thomas made how he likes it, if you want it different make one yourself. Thomas I love it just the way it is, blue bookmarks bar and all !!!

  15. Thomas says:

    @passerby – Safari style meaning???

  16. Tamy says:

    oh, thank youu, iPox is great!!
    It didn’t match the rest of the programs, now it does (I didn’t wanted to change itt)

    thank youu

  17. Fawn says:

    I totally agree with Scotty D… I love it just the way it is! As a matter of fact, it’s the only one I use. It would also be nice to have a Thunderbird theme to match someday. Thanks for this awesome theme!!! Great Job!!

  18. Dinho says:

    U really did a great job, thank you!

    Please consider doing an IPOX BLUE theme, but changing only the tabs and icons into bluer ones to match the favorites bar.

  19. Dinho says:

    Sorry, i wrote “favorites” bar, but i think it is “bookmarks” bar.

    Iยดm brazilian and my English is not so perfect as yours LOL.

    Thanks again for your grat job.

  20. Fawn says:

    Just a suggestion… the buttons could use some color. They are hard to see until you hover over them. But, like I have said before, I love your theme and you are doing a great job. Can’t wait for the next release!

  21. passerby says:

    @Thomas:

    I just updated to 0.7, came here to read about the changes, and was reminded that I’d left a comment and hadn’t checked back for a while to see if there was a response. Sorry about that!

    By Safari-style tabs, I just meant the visual style of them, as seen here (ignore the content of the page, which is all about RSS):

    http://www.apple.com/macosx/features/safari/

    I actually got this to work by using a set of tab images for another theme, but it messes up the spacing things in the Options window. So, it would be great if you could include an alternative tab style in v. 1.0. Thanks.

  22. Thomas says:

    Do you mean flatter? Or coming down from the bookmark bar instead of up from the page? Or do you want brushed metal? Just trying to figure out what you are looking for. ๐Ÿ™‚

  23. passerby says:

    Flatter, more square, and extending down from the bookmark bar.

    Thanks for asking!

  24. _habit_ says:

    I love this theme, but I wish there was a way to make the buttons blue to grey instead of grey to blue. And while I realize this is an iPod themed skin, I use it because, well, it looks nice, and I think a different home button would be better than the little iPod icon, so a way that one could change that would be great.

    Note: I’m not asking you to “change” the theme, I’m asking for a way that people who use the theme can change it, without any great difficulty.

    Now, to be honest, I don’t know much about CSS (that may just be temporary ๐Ÿ˜‰ and such, so if there is a way that both those things can be done by the user, I’d love to know how.

  25. Toni Truant says:

    nice theme, thanx but:

    is it possible to change the folder icons?
    i’d like use the folder icon from the silk icons
    http://www.famfamfam.com/lab/icons/silk/

    or just the ordinary icon from the default theme.

    peace

  26. Thomas says:

    Humm, I’m sure you could probably change the folder icons by updating the userChrome.css file.

    Try adding:
    .bookmark-item[container] {
    list-style-image: url(“/path/to/your/folder.png”) !important;
    }

    As far as the home buttons or tab, I think that’s a bit out of the basic editing.

  27. _habit_ says:

    Hmm that’s unfortunate ๐Ÿ™

    But what about the color of the buttons?

  28. Karina says:

    okay so I must be the only retarded person here but I still can’t figure out what a userChrome.css is or where I can find it. Please help!!

  29. Thomas says:

    Katrina you can either visit http://www.mozilla.org/unix/customizing.html or get Stylish https://addons.mozilla.org/firefox/2108/ and put the code in there. Hope that helps.

  30. Karina says:

    heehee, my name is Karina not Katrina. ๐Ÿ™‚
    but YES I finally figured it out, thanks.

  31. Thomas says:

    Whoops, my bad. ๐Ÿ˜‰ Glad to see it’s working.

  32. Ho-oh says:

    Please, change the grey buttons in colored buttons. Also I hope you’ll change the iPod Icon and remove the dark grey status bar’s shadow…

  33. Dinho says:

    The “World” want Bluer Buttons…please Thomas , consider that.
    IPOX theme rules,
    BUT with bluer buttons LOL.

  34. Fawn says:

    Definitely colored buttons! A version with colored buttons would be nice, even if they’re blue… LOL. They are just hard to see. It would make it absolutely perfect in my opinion. Thanks, Thomas!

  35. lars says:

    nice theme, i love it, but when it will be campatible to firefox 2???

  36. Thomas says:

    Colored buttons may come some day, but I can’t be doing different versions all at the same time or the quality will be lower. I will work in some, but don’t expect them anytime soon.

    Firefox 2.0 support is started. Check back tomorrow for a status update.

  37. Thomas says:

    Some hacks are now built into iPox 1.0.

  38. jin says:

    the hacks work on PCs too. At least 1 and 3 does. x]]

  39. Thomas says:

    The hacks shouldn’t be OS specific. All should work across the board.

  1. 5/5/2006

    […] I found a great extension that makes the iPox hacks even easier to do. Just go get Stylish! Stylish allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun. With an online repository at userstyles.org, you don’t even need to know how to write styles yourself; just a couple clicks and the chosen style is applied. Stylish is to CSS what Greasemonkey is to JavaScript, and unlike other methods of using user styles, most styles take effect immediately. […]

Leave a Reply