MozillaZine

Rounded Address Bar

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

Post Posted April 10th, 2004, 8:22 pm

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

firemonkey

User avatar
 
Posts: 950
Joined: March 14th, 2004, 10:57 pm
Location: Down in the basement

Post Posted April 10th, 2004, 11:37 pm

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 Posted April 10th, 2004, 11:53 pm

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

cheeaun

User avatar
 
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia

Post Posted April 11th, 2004, 4:06 am

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 Posted April 11th, 2004, 12:04 pm

Worked like a charm. Thanks cheeaun.
bakedAtom

juntaone
 
Posts: 8
Joined: April 12th, 2004, 9:48 pm

Post Posted April 12th, 2004, 10:03 pm

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?

cheeaun

User avatar
 
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia

Post Posted April 13th, 2004, 4:55 am

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 Posted April 23rd, 2004, 10:00 pm

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

User avatar
 
Posts: 53
Joined: March 20th, 2004, 6:01 pm

Post Posted April 24th, 2004, 12:19 pm

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

User avatar
 
Posts: 920
Joined: February 3rd, 2004, 2:45 pm
Location: Michigan

Post Posted April 24th, 2004, 12:23 pm

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

User avatar
 
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia

Post Posted April 24th, 2004, 6:09 pm

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 Posted April 24th, 2004, 10:11 pm

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 Posted July 4th, 2004, 3:06 pm

does anyone know if this would work with .9.1?

soccer_dude182

User avatar
 
Posts: 720
Joined: July 11th, 2003, 10:50 pm
Location: Waco, TX

Post Posted July 4th, 2004, 3:15 pm

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

Old Bozz
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted July 4th, 2004, 4:57 pm

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.

Return to Firefox General


Who is online

Users browsing this forum: No registered users and 5 guests