Aqua-Soft Forums

[help] firefox 0.10.1 skinning

ok, i´m really not good at this code stuff and even hours infront of this browser.css did not help.

how and where do i skin the search-bar (this google search thing). for example: default to rounded-corner version?

it´s strange. i tried themes with a search-bar skinning. included in the browser.css is this code for example:

#search-bar {

-moz-appearance: none;

border: none;

background-color: transparent;

min-height: 29px;

margin: -4px 5px 0px 0px;

}

#search-bar > .autocomplete-textbox-container {

border: medium none;

background-image: url("chrome://browser/skin/search.png");

background-position: top-left;

background-color: transparent;

padding-left: 14px;

padding-right: 9px;

padding-bottom: 0px;

padding-top: 0px;

margin-bottom: 0px;

margin-top: 0px;

min-height: 29px;

}

#search-bar[focused=true] .autocomplete-textbox-container{

border: medium none;

background-image: url("chrome://browser/skin/search-hov.png");

background-position: top-left;

background-color: transparent;

}

.textbox-input-box {

border-top: 0px solid;

-moz-border-top-colors: transparent;

border-bottom: 0px solid;

-moz-border-bottom-colors: transparent;

background-color: transparent;

margin: 3px 0px -1px 5px;

margin-bottom: 1px !important;

padding: 0px 0px 0px 0px;

}

so i guess this should work, but still my version does not skin the search-bar. anybody with similar experiences?

B²

#219822

Because it doesn't belong in the browser.css anymore, and it's not search-bar anymore. Here's what I have in browser/searchbar.css in Milk, Remilked:

.searchbar-textbox {

 -moz-appearance: none;

 border: none;

 background-color: transparent;

 min-height: 29px;

 margin: -3px 9px 0px 0px;

}



.searchbar-textbox > .autocomplete-textbox-container {

 border: medium none;

 background-image: url('chrome://browser/skin/x.png');

 background-position: TOP-left;

 background-color: transparent;

 padding-left: 14px;

 padding-right: 9px;

 padding-bottom: 0px;

 padding-top: 0px;

 margin-bottom: 0px;

 margin-top: 2px;

 min-height: 29px;

}



.searchbar-textbox[focused="true"] .autocomplete-textbox-container{

 border: medium none;

 background-image: url('chrome://browser/skin/xhov.png');

 background-position: TOP-left;

 background-color: transparent;

 padding-left: 14px;

 padding-right: 9px;

 padding-bottom: 0px;

 padding-top: 0px;

 margin-bottom: 0px;

 margin-top: 2px;

 min-height: 29px;

}



.textbox-input-box {

 border-top: 0px solid;

 -moz-border-top-colors: #7C7C7C #C3C3C3;

 border-bottom: 0px solid;

 -moz-border-bottom-colors: transparent #DDDDDD;

 background-color: transparent;

 margin: 3px 0px -1px 5px;

 padding: 0px 0px 0px 0px;

  font-family: lucida grande, sans-serif, lucida sans unicode, lucida sans unicode !important;

  font-weight: normal !important;

  font-size: 1.0em !important;

}



.searchbar-textbox {

 width: 192px;

}



#searchbar-engine {

min-width: 60px;

margin: 0px 18px 4px 0px;

list-style-image: url("chrome://browser/skin/page.png")

}



.searchbar-engine-image {

padding-left: 0px;

padding-right: 7px !important;

padding-bottom: 3px !important;

padding-top: 0px;

margin-bottom: 1px;

margin-top: 0px;

margin-right: 0px;

margin-left: -3px;

list-style-image: url("chrome://browser/skin/page.png");

}

And it works fine.

#220086

WOW

didn´t know that. many thx for helping out on this one. i would never found this.

respect

B²

#220272

Anyone know how to extend the search bar in FireFox 1.0RR? I had tried before by modified browser.css, but no use:

#searchbar-textbox {

width: 192px;

}

Other than this, when I installed the latest milk theme for FireFox....my compact menu became an apple icon instead of a dimple. please advice...thanks.

#221355

Please read carefully. Searchbar does not belong to the browser.css anymore. A correct file to set searchbar properties is /browser/searchbar.css.

#221452

Please read carefully. Searchbar does not belong to the browser.css anymore. A correct file to set searchbar properties is /browser/searchbar.css.

:confused: I didn't find out searchbar.css inside Milk_Chrome_safari.jar/Browser except browser.css. Sorry, I never mean to bother you guys.

#221539

Of course you didn't find it. You need to *create* one. :]

#221567

So...what I should do now is create a searchbar.css and copy all the code you wrote down in the previous post then repack it with Milk_Chrome_safari.jar, right?

#221569

Correct. You may have to adjust the code for this specific skin though.

#221678

Another way. (sorry, I've shortened searchbar.)

Download these PNGs.

search.png

search-hov.png

Open theme jar file in winrar.

Put 'search.png' and 'search-hov.png' into browser.

And add the following code to your userchrome.css.

.searchbar-textbox {

  width: 192px !important;

}

If you want to use an apple icon instead of a dimple,

Download this file.

apple compactmenu for 1.7.1.1

Put compact.jar in C:Documents and Settings*USER NAME*Application DataMozillaFirefoxProfilesdefaultextensions{535bbd25-7a7c-4f9a-80fb-bd832ae22386}chrome

Open browserbrowser.css.

Delete this code.

/* ::::: Compact Menu Support ::::: */



#menu-button {

  margin-top: 1px;

  margin-right: -7px;

  margin-left: -7px;

  list-style-image: url('chrome://browser/skin/dimple.png') !important;

  -moz-image-region: rect(0px 14px 20px 1px) !important;

}

#menu-button:hover {

  -moz-image-region: rect(0px 29px 20px 16px) !important;

}

#221693

incredible! man~ thanks your kindly advise, Hills and Kyods as well.

Hills, your great works quite well known. I ever seen your great works converted into chinese version. U rock.

again ありがとう

#221751

Wow great Hills!! Now my Safarifox looks perfect! Thx :cool:

#222673

ya, that´s what i call "community". great help this was here, well, ya, and some FUN either. (slapping aloysAllen for being slow) ;) LMFAO

B²

#222681

ya, that´s what i call "community". great help this was here, well, ya, and some FUN either. (slapping aloysAllen for being slow) ;) LMFAO

B²

Y slap me T_T.....

N I hope Hills can design more great themes for FireFox..hahaha, thanks!

#223316

Thanks for Hills n Kyods help.

Lately...I had installed Soft_Blue_Milk theme which is created by Hills...

I feel a bit eyesore :o is that both underlines on Navigation Toolbar. How do i get rid of the underlines(note* installed latest tabbrowser extension from Hills' website) or change their color?

Thanks ;)

#223771

uhm i have a problem with the tabbrowser extension.. i don't have the circled x button, and i have to click Close Tab twice just to close a tab. can anyone help me out on this?

thanks :D

#224013