Rounded Address Bar

[bakedAtom]

Hi,

I wanted to know if it is possible to make the address and search bars have rounded corners? I know some themes make them round when installed but I want to do it on the default Firefox theme. I searched the forum but couldn't find an answer.

Also, at http://phoenity.com/firefox.html, it said to add @import url("chrome://browser/skin/roundedbars.css"); in the userChrome.css file. I tried it but it didn't make the bars rounded for the default firefox theme.

I'd appreciate any help.

thanks.

[firemonkey]

The whole toolbar or just the text boxes? For the boxes, a simple method would be to put something like the following in your userChrome.css file:

Code: Select all

#urlbar {
-moz-appearance: none !important;
-moz-border-radius: 3px !important;
padding-right: 1px !important;
}

#search-bar {
-moz-appearance: none !important;
-moz-border-radius: 3px !important;
}


you can add a px or two of padding to the left or right to push any icons or dropdown arrows out of the way of the new rounded borders.

[bakedAtom]

Thanks firemonkey. Your tip did make the boxes rounded at the edges, like so:


But I want it to look like:


Is it possible to do it through the userChrome file?

[cheeaun]

1. Add these codes to userChrome.css

Code: Select all

/*Rounded-corner bars - much,much cleaner codes*/
/*Also for the Googlebar extension*/

#urlbar-container,
#urlbar,
#search-container,
#search-bar,
#search-textbox,
#googlebarCriteria{
background: transparent url(bar.png) no-repeat center left !important;
color: #000 !important;
}

#urlbar-container,
#search-container,
#search-textbox{
height: 22px !important;
padding: 0 !important;
margin: 1px !important;
}

#urlbar,
#search-bar,
#googlebarCriteria{
background-position: right !important;
-moz-appearance: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
height: 22px !important;
}

#page-proxy-deck{
margin: 3px 0 3px 6px !important;
}

#search-proxy-button{
margin-left: -4px !important;
margin-right: 2px !important;
}

#urlbar > .autocomplete-history-dropmarker,
#urlbar:hover > .autocomplete-history-dropmarker,
#urlbar[focused="true"] > .autocomplete-history-dropmarker,
#urlbar > .autocomplete-history-dropmarker:hover,
#urlbar > .autocomplete-history-dropmarker:active,
#urlbar > .autocomplete-history-dropmarker:hover:active,
#urlbar > .autocomplete-history-dropmarker:focus,
#urlbar > .autocomplete-history-dropmarker[open="true"],
#googlebarCriteria .menulist-dropmarker,
#googlebarCriteria:hover > .menulist-dropmarker,
#googlebarCriteria .menulist-dropmarker:hover,
#googlebarCriteria .menulist-dropmarker:hover:active{
-moz-appearance: none !important;
margin: 0 !important;
padding: 2px !important;
border: 0 !important;
background-color: transparent !important;
background-image: none !important;
}

#urlbar .textbox-input-box,
#search-bar .textbox-input-box,
#googlebarCriteria .textbox-input-box{
background: transparent url(barmid.png) repeat-x !important;
}

#urlbar .textbox-input-box {
margin: 0 !important;
padding: 1px 3px !important;
}

#search-bar .textbox-input-box {
margin-right: 10px !important;
margin-left: 10px !important;
}

#googlebarCriteria .textbox-input-box{
margin-left: 10px !important;
}

2. Download these:
- http://phoenity.com/temp/bar.png
- http://phoenity.com/temp/barmid.png
Move them to the folder where your userChome.css is located.

[bakedAtom]

Worked like a charm. Thanks cheeaun.

[juntaone]

Very cool, Cheeaun!

Tried this myself and it works great! However, the Googlebar extension doesn't quite get formatted correctly--there's always a line across the top and sometimes one on the left. How can I get rid of this anomaly?



I've looked thru userchrome and the config files for Googlebar, but I don't really understand them--I'm not sure what to look for.

Any suggestions?

[cheeaun]

However, the Googlebar extension doesn't quite get formatted correctly--there's always a line across the top and sometimes one on the left. How can I get rid of this anomaly?

Oh, I forgot to mention this. It's not a bug with the Googlegar extension, but with Firefox itself, I think. To get rid of that line, this code *should* work:

Code: Select all

html|*.menulist-editable-input {
background-image: none !important;
}

..but somehow, I don't know why it doesn't work. Then, I directly apply this code to global/menulist.css of my phoenity JAR file, and it works. So, I think you'll have to edit the classic JAR file...

[juntaone]

Hey Cheeaun,

Been busy, so I've just got around to messing with this again. Still can't figure out how to get rid of that extra line in the googlebar edit box. I don't have any themes installed, so there's no meulist.css that i can find. i tried editing classic.jar, but then when i restarted firefox the whole interface when crazy.

like i said, editing jar & css files is very new to me. i'm cofortable messing with them, but don't really know what i'm doing.

any additional help would be appreciated, as well as pointers to sites where i can learn more.

one last thing: i'm assuming the same idea can be applied to thunderbird so that the various combo , search and input boxes can all share the same rounded borders? where do i start?

thanks again for all of your help!

[silberj]

I can't find my userChome.css file, i would like to apply this mod, but I searched for this file on my entire harddrive, and it does not show up. Can anyone help me? Thanks

[SimmonsJ2K]

userChrome.css does not exist unless you create it. you can rename the example file if you wish, in you profile directory. Or, get the ChromeEdit extension.

[cheeaun]

Been busy, so I've just got around to messing with this again. Still can't figure out how to get rid of that extra line in the googlebar edit box. I don't have any themes installed, so there's no meulist.css that i can find. i tried editing classic.jar, but then when i restarted firefox the whole interface when crazy.

like i said, editing jar & css files is very new to me. i'm cofortable messing with them, but don't really know what i'm doing.

any additional help would be appreciated, as well as pointers to sites where i can learn more.

1. Open classic JAR file.
2. Click through the folders and go to the 'global' folder.
3. Open/edit menulist.css .
4. Find this:

Code: Select all

html|*.menulist-editable-input {
  margin: 0px !important;
  border: none !important;
  padding: 0px !important;
  background: inherit;
  font: inherit;
}

5. Modify it to this:

Code: Select all

html|*.menulist-editable-input {
  margin: 0px !important;
  border: none !important;
  padding: 0px !important;
  background: inherit;
  font: inherit;
  background-image: none !important;
}

6. Save it, in the JAR file.

one last thing: i'm assuming the same idea can be applied to thunderbird so that the various combo , search and input boxes can all share the same rounded borders? where do i start?

I'm not sure if this can be applied to Thunderbird, since I don't use it.. and test it.

[juntaone]

ahhh! the light bulb finally went off!

i was forgetting the fact that classic.jar is actually just a zip file and that i needed to "open" it as such to find menulist.css.

just did that, followed your steps, and now everything works perfectly.

thanks, cheeaun! it's all gradually making sense to me how this works.

btw, i checked out your website--very, very cool! i'm going to try out your theme.

[wookietv]

does anyone know if this would work with .9.1?

[soccer_dude182]

Yep, it works. I'm currently using it :)

[Old Bozz]

Do you need to go through this every time you upgrade? It would be great to have this as an extension or a modified Qute or even Winstripe theme.
I like the look in the screen shots above.