[help] 3 Question For Skinning

i have 3 question for skinning. ...

question 1:

i want to modify the "urlbar",

"A" is the old one...then i push this code to "\browser\browser.css"

textbox-input-box{
border-top: 2px solid;
-moz-border-top-colors: #878787 #B5B5B5;
border-bottom: 2px solid;
-moz-border-bottom-colors: #E1E1E1 #F3F3F3;
margin: -1px 0px -1px -2px !important;
padding: 0px 2px 1px 0px !important;
background-color: #FFFFFF !important;
min-height: 22px !important;
}

then the "urlbar" changed to "B"~ it is sucessful :woot: ~

but is also modify the "search bar" ("C")... >.<

i don't want to it, because my search bar has use a background image...

so i don't want the search bar has a border line,

can anyone tell me how can i modify the "urlbar" only ?

i think my code need to change somethings...but i don't know it~ >.<

dose anybody can help me ?

question 2:

for "D",

dose anybody can tell me how can i remove this background image??

question 3:

tab[busy] > .tab-icon {
  list-style-image: url("chrome://global/skin/icons/loading-anim.gif");
}

i have try this code on "\global\browser.css",

but it dose not work...for me.....

when i reload a page, the tab icon do not change~_~

i also have try "firefox classic theme",

it also do not change the tab icon when the tab is loading...

dose anbody have this problem??

#116778

help...

i am HongKong people...my engish is bad >.< :cry:

#117333

i'll try to help, but that's the pinstripe theme i think, and i'm used to the saf-p(which seems to be organized a bit dif.). I'll post my working examples from saf and you can pick the bits that are essential for you.

1. I had the same problem with the theme Saf-p. This is the url bar/search bar combo that i have in browser/browser.css:

/* ::::: nav-bar and search bar ::::: */
#urlbar {
-moz-appearance: none;
border: none;
background-color: transparent;
font:icon;
min-height: 30px !important;
margin: -1px 10px -4px 0px;
}
#urlbar > .autocomplete-textbox-container {
border: medium none;
background-image: url('chrome://browser/skin/leftcap.png');
background-position: left center;
background-repeat: no-repeat;
padding-left: 4px;
padding-right: 0px;
padding-top: 4px;
padding-bottom: 5px;
background-color: #transparent;
min-height: 22px !important; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:2px
}
.textbox-input-box {
border-top: 2px solid;
-moz-border-top-colors: #878787 #B5B5B5;
border-bottom: 2px solid;
-moz-border-bottom-colors: #E1E1E1 #F3F3F3;
margin: -1px 0px -1px -2px !important;
padding: 0px 2px 1px 0px !important;
background-color: #FFFFFF !important;
min-height: 22px !important;
}
.autocomplete-history-dropmarker {
border: none;
background: url('chrome://browser/skin/rightcap.png') no-repeat !important;
list-style-image:url('chrome://global/skin/arrow/snapback.png') !important; width:20px !important; margin-left:0px; margin-right:0px; margin-top:3px; margin-bottom:6px; background-image:url('chrome://browser/skin/rightcap.png') !important; background-repeat:no-repeat !important; background-color:transparent !important
}
#search-bar {
-moz-appearance: none;
border: none;
background-color: transparent;
padding-right: 10px;
padding-bottom: 7px;
padding-top: 5px;
font:icon;
min-height: 22px !important;
margin: 0px 5px -0px 8px;
}
#search-container {width: 272px !important; border: medium none;
background-image: url('chrome://browser/skin/x.png') !important;
background-position: left center;
background-repeat: no-repeat;
padding-left: 4px;
padding-right: 10px;
padding-bottom: 2px;
padding-top: 1px;
background-color: #transparent;
width: 272px !important;
min-height: 22px !important; margin-left:0px; margin-right:0; margin-top:0px; margin-bottom:2px }

for some reason, my original had two .textbox-input-box sections, the 2nd one of which i deleted with no effect... the #search-bar section is what i added to convert saf-p from firebird to firefox. This may not work for you though, if not, root around in a 0.8 compatible theme in the browser.css and see if you can find a solution that works for you. oh yeah, all paddings, widths, etc. may be different for yours.

2. Do you want to display no image? or change it? I'm rusty on this but the tab background should be called from the global/browser.css. I think its either '.tabbrowser-strip' or '.tabbrowser-tabs' and if you want to change an image just change it to one you want after 'url' . If you want no image, i can't remember, but i'm sure you can just remove the image command and have 'background-color: #000000 !important; ' but i'm not sure. You can test changing the image in your userchrome.css, where xxxxx.png is the name of your desired png placed in the chrome folder:

toolbar {
border-style: none !important }
.tabbrowser-tabs {
background-image: url("xxxxx.png") !important;
background-color: #000000 !important;
border-style: none !important;
}

3. Mine works with the following in global/browser.css

.tab-icon {
display: none;
margin-right: 1px !important;
margin-left: 1px !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
padding: 1px !important;
width: 16px !important;
height: 16px !important;
min-height: 16px !important;
min-width: 16px !important;
list-style-image: url('chrome://global/skin/icons/folder-item.png');
-moz-image-region: rect(0px 16px 16px 0px)
}
tab[busy][selected=true] > .tab-icon {
display: -moz-box !important;
list-style-image: url('chrome://global/skin/icons/loading-anim.gif') !important;
margin-right: 1px !important;
margin-left: 1px !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
padding: 1px !important;
padding-left: 1px !important
width: 16px !important;
height: 16px !important;
min-height: 16px !important;
min-width: 16px !important;
}
tab[busy] > .tab-icon {
display: -moz-box !important;
list-style-image: url('chrome://global/skin/icons/loading-anim.gif') !important;
padding-left: 1px !important
margin-right: 1px !important;
margin-left: 1px !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
padding: 1px !important;
width: 16px !important;
height: 16px !important;
min-height: 16px !important;
min-width: 16px !important;
}

maybe your just missing 'display: -moz-box !important; '

i dunno if any of that will help you, but hopefully..

if not, check out the code in other working skins and just fiddle around with yours.

#117374

Originally posted by realitybath@Feb 21 2004, 09:01 AM
i'll try to help, but that's the pinstripe theme i think, and i'm used to the saf-p(which seems to be organized a bit dif.). I'll post my working examples from saf and you can pick the bits that are essential for you.

:woot:

thanks thanks thanks!!!!!!!

i will try to modify the theme~

um...in my Screen shot ,

it is "Safari tab"...

but the icon is "Pinstripe icon",

is that right? (i don't know all the Mac theme name..>.<)

Firebird Pinstripe theme

FireBird Safari theme

i really want to modify a theme to "Safari theme for FireFox".

thank you again!!

:staffs here:

#117509

i have improve "my modify theme"

http://miniforum.netcomhost.com/imgupload/fx.jpg

the icon of tab loading is no work

#117897

do you have tabbrowser extension installed and running?

i think it can prevent the loading icon from showing up maybe.

i'm not too sure though... if you do have that extension, you might have to go into the tabextentions jar to change it (i think its in content/tabextensions/tabextensions.css or something like that)

yeah, your right on the pinstripe/safari thing from you previous post

looks good, have fun.

btw, your english is fine! :canadian:

#117910