Rounded Address Bar

Discussion of general topics about Mozilla Firefox
bakedAtom
Posts: 38
Joined: April 9th, 2003, 1:15 am

Rounded Address Bar

Post by 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.
bakedAtom
User avatar
firemonkey
Posts: 950
Joined: March 14th, 2004, 10:57 pm
Location: Down in the basement

Post by 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
Posts: 38
Joined: April 9th, 2003, 1:15 am

Post by bakedAtom »

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

But I want it to look like:
Image

Is it possible to do it through the userChrome file?
bakedAtom
User avatar
cheeaun
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia
Contact:

Post by 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.
Phoenity http://phoenity.com/
You should follow me on Twitter here http://twitter.com/cheeaun
bakedAtom
Posts: 38
Joined: April 9th, 2003, 1:15 am

Post by bakedAtom »

Worked like a charm. Thanks cheeaun.
bakedAtom
juntaone
Posts: 8
Joined: April 12th, 2004, 9:48 pm

Rounded corners

Post by 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?

Image

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?
User avatar
cheeaun
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia
Contact:

Re: Rounded corners

Post by cheeaun »

juntaone wrote: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... ;-)
Phoenity http://phoenity.com/
You should follow me on Twitter here http://twitter.com/cheeaun
juntaone
Posts: 8
Joined: April 12th, 2004, 9:48 pm

Post by 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!
User avatar
silberj
Posts: 53
Joined: March 20th, 2004, 6:01 pm
Contact:

Post by 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 :)
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Windows XP Media Center Edition Service Pack 2 (build 2600) Intel(R) Core(TM) 2CPU 6300 @ 1.86 Ghz, 2GB RAM
SimmonsJ2K
Posts: 920
Joined: February 3rd, 2004, 2:45 pm
Location: Michigan
Contact:

Post by 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.
User avatar
cheeaun
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia
Contact:

Post by cheeaun »

juntaone wrote: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.
juntaone wrote: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.
Phoenity http://phoenity.com/
You should follow me on Twitter here http://twitter.com/cheeaun
juntaone
Posts: 8
Joined: April 12th, 2004, 9:48 pm

Post by 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
Posts: 3
Joined: May 13th, 2004, 7:09 pm

Post by wookietv »

does anyone know if this would work with .9.1?
User avatar
soccer_dude182
Posts: 720
Joined: July 11th, 2003, 10:50 pm
Location: Waco, TX

Post by soccer_dude182 »

Yep, it works. I'm currently using it :)
Old Bozz
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by 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.
Locked