Rounded Address Bar
-
- Posts: 38
- Joined: April 9th, 2003, 1:15 am
Rounded Address Bar
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.
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
- Posts: 950
- Joined: March 14th, 2004, 10:57 pm
- Location: Down in the basement
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:
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.
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.
- cheeaun
- Posts: 826
- Joined: November 5th, 2002, 10:55 pm
- Location: Malaysia
- Contact:
1. Add these codes to userChrome.css 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.
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;
}
- http://phoenity.com/temp/bar.png
- http://phoenity.com/temp/barmid.png
Move them to the folder where your userChome.css is located.
-
- Posts: 8
- Joined: April 12th, 2004, 9:48 pm
Rounded corners
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?
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
- Posts: 826
- Joined: November 5th, 2002, 10:55 pm
- Location: Malaysia
- Contact:
Re: Rounded corners
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: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?
Code: Select all
html|*.menulist-editable-input {
background-image: none !important;
}
-
- Posts: 8
- Joined: April 12th, 2004, 9:48 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!
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
- Posts: 53
- Joined: March 20th, 2004, 6:01 pm
- Contact:
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
Windows XP Media Center Edition Service Pack 2 (build 2600) Intel(R) Core(TM) 2CPU 6300 @ 1.86 Ghz, 2GB RAM
-
- Posts: 920
- Joined: February 3rd, 2004, 2:45 pm
- Location: Michigan
- Contact:
- cheeaun
- Posts: 826
- Joined: November 5th, 2002, 10:55 pm
- Location: Malaysia
- Contact:
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.
I'm not sure if this can be applied to Thunderbird, since I don't use it.. and test it.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?
-
- Posts: 8
- Joined: April 12th, 2004, 9:48 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.
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.
- soccer_dude182
- Posts: 720
- Joined: July 11th, 2003, 10:50 pm
- Location: Waco, TX