Share your custom Firefox/Minefield 4 stylish scripts

[panoc]

Thank You! I use those scripts myself so you can be rest assured that they will be maintained. I've styled most of the "about" pages similar to that, but just haven't uploaded them yet.

Most of my UI is actually styled like this:

can you upload the transparent styles ?

[foxxyn8]

I know exactly what you mean. I use a custom Windows theme, too. The addon bar is a modified version of Better Addon Bar:

#addon-bar {
-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
} 

#addon-bar, 
#FindToolbar {
  -moz-appearance: none !important;
  margin-top:-25px !important;
  border: 0 !important;
}

#addon-bar > #status-bar {
  -moz-appearance: none !important;
  margin: 2px 1px 0 0 !important;
  padding: 2px 2px 2px 2px;
  border-radius: 4px 4px 0 0;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgba(0,0,0,.3) !important;
  box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important; 
}

#FindToolbar .findbar-container {
  position: relative !important;
  z-index: 2 !important;
  margin-left: 55px !important;
  margin-bottom: -4px !important;
  margin-right: 700px !important;
  border-radius: 4px 4px 0 0;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgba(0,0,0,.8) !important;
  box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important; 
}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]),
#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) + .findbar-find-status{
  display:none !important;
}

#FindToolbar .find-status-icon[status="notfound"] + .findbar-find-status,
#FindToolbar .find-status-icon[status="wrapped"] + .findbar-find-status {
  padding-right:5px !important;
}

#FindToolbar .find-status-icon[status="notfound"],
#FindToolbar .find-status-icon[status="wrapped"] {
  margin-left: -1px !important;
}

toolbarbutton.findbar-highlight.tabbable[checked="true"]{
  color:yellow !important;
}

#FindToolbar .findbar-textbox {
width:250px!important;  
-moz-appearance:none !important;
background:rgba(0,0,0,.9) !important; 
border:1px solid #444 !important;
-moz-border-radius: 4px !important; 
font-family:tahoma !important; 
font-weight:bold !important;
color:#eee !important; 
}

I moved my appmenu button into the addon-bar by via the Custombuttons extension using this code. It's sytled with this:

#custombuttons-button0 {
background: rgba(0,0,0,.7) !important;
box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important;
-moz-border-radius: 4px 4px 0px 0 !important;
width: 52px !important;
margin-left: 1px !important;
border-color: transparent !important;
margin-bottom:-1px !important;
}

#custombuttons-button0:hover, #custombuttons-button0[open] {
background-image: -moz-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.6) 10%, transparent 60%), -moz-radial-gradient(25px, circle cover, rgba(161,161,161, 0.2) 32%, rgba(161,161,161, 0.2) 35%, rgba(0,0,0,0.1) 50%) !important;
border-color: transparent !important;
}

#custombuttons-button0 image {
margin-top: 2px !important;
margin-left: -4px !important;
}

The transparent tabs are part of a larger style that makes all the toolbars transparent, so I can't provide you with any guarantee of how well they'll look outside of that, but this is the code that applies to just the tabbar:

#TabsToolbar {
-moz-box-shadow: none !important;
margin-bottom: 1px !important; 
background: none !important;  
}

.tabbrowser-tab { 
/*margin-top: -1px !important; */
background: -moz-linear-gradient(left, transparent, transparent 1px, rgba(50%,50%,50%,.1) 1px, rgba(50%,50%,50%,.1)) no-repeat -6px -2px  !important;
background-size: 200% auto !important; 
font-family: tahoma !important;
font-weight:bold !important; 
opacity: .65 !important; 
text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important; 
}

.tabs-newtab-button { 
/*margin-top: -1px !important; */
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.2) 1px, rgba(255,255,255,.2)) !important;
background-size: 200% auto !important; 
font-family: tahoma !important;
font-weight:bold !important; 
opacity: .65 !important; 
text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important; 
}

#TabsToolbar .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
-moz-appearance: none !important;  
background-image:-moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.1) 1px, rgba(255,255,255,.1)) !important;
background-position: -5px -2px !important;
background-repeat: no-repeat !important;
background-size: 200% !important;
margin: 0px 0 0 0 !important;
padding: 0 1px !important;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
-moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:hover, 
toolbarbutton.tabs-newtab-button:hover,
.tabbrowser-tab[selected="true"] { 
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}

#TabsToolbar .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover   { 
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.2) 1px, rgba(255,255,255,.2)) !important;
}

.tabbrowser-tab[pinned="true"] {
padding:1px 0 0 0 !important;
}

[Deo Domuique]

!

O.K. Let's start from scratch.

[Deo Domuique]

Trans Tabs working perfect, just can't see which is active and which are inactive. This is how it should work? Actually it isn't problem.

Damn! Now, Fine... You made me Find new headache... "Create new Buttons" Lol

[panoc]

great

can you also give the style for transparent toolbar ?

or give the entire style, i love it !

PS. which addon do you use to show the clock on addon bar ?

[foxxyn8]

great

can you also give the style for transparent toolbar ?

or give the entire style, i love it !

PS. which addon do you use to show the clock on addon bar ?

The addon is Simple Timer

Toolbars:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

toolbox,
#FindToolbar { 
border: none !important; 
}

#status-bar,
#main-menubar,
#browser-bottombox,  
#PersonalToolbar,
.chromeclass-toolbar {
border: none !important; 
background: none !important; 
text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important;
}

#nav-bar {
padding-bottom: 4px !important;
}

#TabsToolbar {
-moz-box-shadow: none !important;
margin-bottom: 1px !important; 
background: none !important;  
}

.tabbrowser-tab { 
/*margin-top: -1px !important; */
background: -moz-linear-gradient(left, transparent, transparent 1px, rgba(50%,50%,50%,.1) 1px, rgba(50%,50%,50%,.1)) no-repeat -6px -2px  !important;
background-size: 200% auto !important; 
font-family: tahoma !important;
font-weight:bold !important; 
opacity: .65 !important; 
text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important; 
}

.tabs-newtab-button { 
/*margin-top: -1px !important; */
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.2) 1px, rgba(255,255,255,.2)) !important;
background-size: 200% auto !important; 
font-family: tahoma !important;
font-weight:bold !important; 
opacity: .65 !important; 
text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important; 
}

#TabsToolbar .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
-moz-appearance: none !important;  
background-image:-moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.1) 1px, rgba(255,255,255,.1)) !important;
background-position: -5px -2px !important;
background-repeat: no-repeat !important;
background-size: 200% !important;
margin: 0px 0 0 0 !important;
padding: 0 1px !important;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
-moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:hover, 
toolbarbutton.tabs-newtab-button:hover,
.tabbrowser-tab[selected="true"] { 
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}

#TabsToolbar .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover   { 
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.2) 1px, rgba(255,255,255,.2)) !important;
}

.tabbrowser-tab[pinned="true"] {
padding:1px 0 0 0!important;
}

#addon-bar {
-moz-appearance: none !important; 
}

}

toolbar button backgrounds:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);


#nav-bar .toolbarbutton-1 {
background: rgba(0,0,0,.3) !important;
-moz-box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important;
}

#addon-bar .toolbarbutton-1 { 
background: rgba(0,0,0,.3) !important;
-moz-box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important;
-moz-border-radius: 4px 4px 0 0 !important;
padding-top: 2px !important;
-moz-border-radius: 4px 4px 0 0 !important;
margin-right: 1px !important;
margin-top: 2px !important; 
}

#addon-bar .toolbarbutton-menubutton-button,
#addon-bar dropmarker { 
background: none !important; 
box-shadow: none !important;
border: none !important;
}

#addon-bar .toolbarbutton-1:hover {
-moz-border-radius: 4px 4px 0 0 !important;
background: rgba(0,0,0,.8) !important;
border-color: transparent !important;
}

#nav-bar .toolbarbutton-1:hover,
#nav-bar .toolbarbutton-1[open="true"] {
background-image: -moz-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.6) 10%, transparent 60%), -moz-radial-gradient(42px, circle cover, rgba(191,191,191, 0.2) 32%, rgba(191,191,191, 0.2) 35%, rgba(191,191,191, 0.2) 50%) !important;
border-color: transparent !important;
}

[panoc]

thanks a lot !

[+Gary7 Subscriber²]

How would I turn the navigational toolbar Blue? The same color as my Firefox Button.

[foxxyn8]

How would I turn the navigational toolbar Blue? The same color as my Firefox Button.

This may not be the exact shade of blue, but you get the idea.

#nav-bar {
background: rgb(40,110,195) !important;
border:none !important;
}

[+Gary7 Subscriber²]

This may not be the exact shade of blue, but you get the idea.

#nav-bar {
background: rgb(40,110,195) !important;
border:none !important;
}

Thank you very much. It is perfect! :)

[mNiosu]

Can anyone please tell me where I can find the default Firefox icons or how can I export them (the personal toolbar icons,bookmark and history button icons in particular)? I need them for custom buttons add-on. I have a code for creating a button displaying app-menu and the codes for bookmark and history buttons (so no need for personal menu add-on). But I want the default icons and can't manage to find them ... HERE is the page for dev builds of custom buttons if anyone wants to try the buttons. You must install it on clean profile thought...

The codes ("Initialization" section):

app-menu:

var amb = document. getElementById ("appmenu-button");
var amp = document. getElementById ("appmenu-popup");
this. appendChild (amp. cloneNode (true));
amb. setAttribute ("hidden", "true");
this. type = "menu";

bookmark-menu:

var gp = document. getElementById ("bookmarksMenuPopup");
this. appendChild (gp);
this. type = "menu";

history-menu:

var gp = document. getElementById ("goPopup");
this. appendChild (gp);
this. type = "menu";

Thanks to antonglv fore these! So any ideas where to find the icons ?

Icon for app-menu:

[foxxyn8]

Can anyone please tell me where I can find the default Firefox icons or how can I export them (the personal toolbar icons,bookmark and history button icons in particular)? I need them for custom buttons add-on. I have a code for creating a button displaying app-menu and the codes for bookmark and history buttons (so no need for personal menu add-on). But I want the default icons and can't manage to find them ... HERE is the page for dev builds of custom buttons if anyone wants to try the buttons. You must install it on clean profile thought...

The codes ("Initialization" section):

app-menu:

var amb = document. getElementById ("appmenu-button");
var amp = document. getElementById ("appmenu-popup");
this. appendChild (amp. cloneNode (true));
amb. setAttribute ("hidden", "true");
this. type = "menu";

bookmark-menu:

var gp = document. getElementById ("bookmarksMenuPopup");
this. appendChild (gp);
this. type = "menu";

history-menu:

var gp = document. getElementById ("goPopup");
this. appendChild (gp);
this. type = "menu";

Thanks to antonglv fore these! So any ideas where to find the icons ?

Icon for app-menu:

Most of the toolbar icons are located at "chrome://browser/skin/Toolbar.png". You'll have to extract them from omni.jar located in the Firefox install directory or just paste that url into your address bar and save the image. You'll have to use domi or look through "chrome://browser/skin/browser.css" to get the image regions.

[mNiosu]

Most of the toolbar icons are located at "chrome://browser/skin/Toolbar.png". You'll have to extract them from omni.jar located in the Firefox install directory or just paste that url into your address bar and save the image. You'll have to use domi or look through "chrome://browser/skin/browser.css" to get the image regions.

Found it, thanks!

Here they are if needed:

[Deo Domuique]

foxxyn watafak man! You're FF's Expert! Glad to have you Here! Cause I'm FF's FanBoy on the First Places.

Is customizing FF and Windows your Hobby? Where are you come from? Just curious...

Nice update yesterday about "Flat and Dark". It's extremely sharp, clean and handy! The contrast between disabled, enabled and those incompatibe add-ons... Top!

Once your eye get used to dark, you never go back! Even while I'm still ( not Jenny from the block ) light-Fan! I did a special exception for :p

[Deo Domuique]

And by luck, just know realized that this: "Firefox 4 Replace URL w/ Hovered Link URL" is yours too while I use it one week now!... Lol

Can you tell me if I can add the option to see where I'm connecting on every site? You know, like the old status-bar behavior...

[foxxyn8]

@dert07

Have a look at the problem I wrote in my previous post. And I add another one (not a problem for me but I was thinking to upload the style on user-styles and it might be a problem for others): how can I force labels to always show for folders in the personal-bar ?

BTW is it ok with you if I upload this style on user-styles or it is already there (or maybe you should do it...) ? :D I mean there are a lot of people using that add-on for this style and I just don't see the point of doing it any more and this might help them...

LE: solved my second problem on my own. :)

Here is the new code:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#PersonalToolbar .bookmark-item:not([container="true"]) {max-width: 22px !important;}

#PersonalToolbar .bookmark-item:hover {max-width: none !important;}

#PersonalToolbar {margin: -4px 0 -2px 2px !important;}

#PersonalToolbar  image {margin: 0 !important;}

Changed the element ID so the script will still work if you move the bookmarks from the bookmark toolbar to a different toolbar.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#PlacesToolbar .bookmark-item:not(.menu-iconic):not(menuitem):not([container="true"]) {max-width: 22px !important;}

#PlacesToolbar .bookmark-item:hover:not(.menu-iconic):not(menuitem){max-width: none !important;}

#PlacesToolbar {margin: -4px 0 -2px 0 !important;}

#PlacesToolbar  image {margin: 0 !important;}

@Deo Domuique

Customizing everything is my hobby. I'm no "expert", I just know my way around.

[+Gary7 Subscriber²]

Customizing everything is my hobby. I'm no "expert", I just know my way around.

Well you know your way around pretty good.

[Deo Domuique]

Well it's not that bad to admit something... Especially when others told it! You can give answer almost to everyone and on any kind of question that concerns FF's customizing-scripts. If this isn't called expert... What is then? Anyway!

Can you please give me an answer about your script: Firefox 4 Replace URL w/ Hovered Link URL?

Gary, are you Gauros? If you can't understand what "Gauros" means, then forget about the question. :p

[foxxyn8]

And by luck, just know realized that this: "Firefox 4 Replace URL w/ Hovered Link URL" is yours too while I use it one week now!... Lol

Can you tell me if I can add the option to see where I'm connecting on every site? You know, like the old status-bar behavior...

That option isn't available within Fx natively. The add-on Status-4-Evar will allow you to add that option (among others) to toolbars, but AFAIK it isn't possible to have it displayed in the url bar.

[+Gary7 Subscriber²]

Well it's not that bad to admit something... Especially when others told it! You can give answer almost to everyone and on any kind of question that concerns FF's customizing-scripts. If this isn't called expert... What is then? Anyway!

Can you please give me an answer about your script: Firefox 4 Replace URL w/ Hovered Link URL?

Gary, are you Gauros? If you can't understand what "Gauros" means, then forget about the question. :p

No, I speak and understand English. But these scripts are all Greek to me.

[Drifus]

Hello everyone. I updated the customizations I had done for Firefox 4 beta 6 (http://www.neowin.ne.../page__st__2220)

Now for Firefox 4 pre/beta 7.

Most of the changes came from tips from the guys here.

The goal remains the same: a clean and functional UI.

Tested on Windows 7 with a custom aero theme and font default Calibri 8.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*Hide the Search Engine image*/
.searchbar-engine-image {
	display: none !important;
}
/*Hide the search button (magnifying glass)*/
.search-go-button {
	display: none !important;
}
/*Hide bookmark icons in the Personal Toolbar*/
toolbarbutton.bookmark-item > .toolbarbutton-icon {
	display: none !important;
}
/*Disable tabstoolbar drag - enable newtab double clicking*/
#TabsToolbar {
	-moz-binding: none !important;
}
/*Transparent Firefox Button and no text*/
#appmenu-button {
	background: none !important;
	border: 1px solid rgba(0,0,0,0) !important;
	border-top: none !important;
	box-shadow: none !important;
	padding: 8px 28px 4px 0px !important;
}
#appmenu-button:hover:not(:active):not([open]) {
	background-color: rgba(0,0,0,.1) !important;
	border: 1px solid rgba(0,0,0,.2) !important;
	border-top: none !important;
}
#appmenu-button:hover:active, #appmenu-button[open] {
	background-color: rgba(0,0,0,.1) !important;
	border: 1px solid rgba(0,0,0,.2) !important;
	border-top: none !important;
	border-radius: 0 !important;
}
#appmenu-button .button-text {
	display: none !important;
}
/*Reduce titlebar margin - choose margin according your windows theme (minimize, maximize close buttons)*/
#main-window {
	margin-top: -7px !important;
}
#main-window[sizemode="maximized"] {
	margin-top: -4px !important;
}
#main-window[sizemode="fullscreen"] {
	margin-top: 0px !important;
}
/*Remove some dropmarkers*/
#back-forward-dropmarker {
	display: none !important;
}
.urlbar-history-dropmarker {
	display: none !important;
}
/*Transparency, hover and more naked UI*/
#nav-bar {
	background-color: transparent !important;
	border: none !important;
	margin-top: 1px !important;
}
#PersonalToolbar {
	background-color: rgba(255,255,255,.1) !important;
	border: none !important;
}
#urlbar {
	background: rgba(255,255,255,.3) !important;
	border: none !important;
	box-shadow: none !important;
}
#searchbar > *, #search-box {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	height: 22px !important; /*Fix searchbar height without magnifying glass and search engine icon*/
}
#urlbar:hover, #searchbar:hover > *, .findbar-textbox:hover {
	background: rgba(255,255,255,.5) !important;
}
.urlbar-over-link-box {
	color: #444444 !important;
}
.tabbrowser-tab:not([selected="true"]) {
	background: rgba(0,0,0,0.2) !important;
	color: #eeeeee !important;
	text-shadow: none !important;
}
.tabbrowser-tab[selected="true"] {
	background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}
.tabs-newtab-button {
	background: transparent !important;
	border: #000000 !important;
}
.tabs-newtab-button:hover, #new-tab-button:hover, .scrollbutton-down:hover, .scrollbutton-up:hover, #alltabs-button:hover, #tabview-button:hover {
	-moz-appearance: none !important;
	background: none !important;
	box-shadow: none !important;
	border: none !important;
}
.toolbarbutton-1 > .toolbarbutton-menubutton-button, .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker, .toolbarbutton-1 {
	background: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}
.toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):not(:active):hover, .toolbarbutton-1:not([open="true"]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]), .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
	background-color: hsla(190,60%,70%,.5) !important;
	border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8) !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 1.5px rgba(255,255,255,.1) inset, 0 1px 0 rgba(0,0,0,.1), 0 0 3.5px hsl(190,90%,80%) !important;
	-moz-transition: background-color .4s ease-in, border-color .2s ease-in, box-shadow .2s ease-in !important;
}
#browser-bottombox {
	background: rgba(255,255,255,.1) !important;
	bottom: 0px !important;
}

/*If you use the Status-4-Evar addon*/
#addon-bar > * {
	background: transparent !important;
	margin-top: 0px !important;
}
#addon-bar {
	-moz-appearance: none !important;
	border: none !important;
	height: 15px !important;
}

/*Autohide addon-bar - by users from neowin.net - NOT compatible with Status-4-Evar*/

/*#addon-bar {
 position: fixed;
 bottom: -22px;
 right: 20px;
 border: 0 !important;
 -moz-appearance: none !important;
 -moz-transition: bottom .3s;
 padding-top: 22px !important;
 margin-right: 20px !important;
}
#addon-bar:hover {
 bottom: 1px;
}
#main-window[sizemode="maximized"] #addon-bar {
 bottom: -22px;
 right: 0;
 -moz-transition: bottom .3s;
}
#main-window[sizemode="maximized"] #addon-bar:hover {
 bottom: 0;
}
#addon-bar > #status-bar {
 margin: 0 !important;
 padding: 0 2px 0 2px;
 border-radius: 4px 4px 0 0;
 border: 0 !important;
 border-left: 1px solid rgba(0,0,0,.25) !important;
 border-right: 1px solid rgba(0,0,0,.25) !important;
 border-top: 1px solid rgba(0,0,0,.25) !important;
 background-color: rgba(255,255,255,.5) !important;
 background-image: -moz-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.5)) !important;

 box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}*/

/*Progess bar - foreground and background*/
.progress-remainder {
	background-image: none !important;
}
.progress-bar {
	background: #1795E8 -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) !important;
	border-radius: 0 0 0 5px !important;
}

[Deo Domuique]

Drifus... The project seems very good... Can you find something better for address and search boxes? I mean... I'd like a bit more seperated boxes... Fully squared of course...

Check this out... But not white background... Think something that intergrates the boxes perfectly in your entire project...

What about add-on bar?

[Drifus]

Drifus... The project seems very good... Can you find something better for address and search boxes? I mean... I'd like a bit more seperated boxes... Fully squared of course...

Check this out... But not white background... Think something that intergrates the boxes perfectly in your entire project...

What about add-on bar?

Hi Deo Domuique,

I did not understand what you mean "more separate".

"What about add-on bar?"

What do you mean?

The goal is to make the layout more integrated with the Windows Aero. Also, more naked (or if you prefer, more minimalist, without losing accessibility). I think the searchbar is better looking transparent. Thus we can visually highlight the url-bar.

Square: good suggestion!

Checkout:

#urlbar {
	background: rgba(255,255,255,.3) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
#searchbar > *, #search-box {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	height: 22px !important; /*Fix searchbar height without magnifying glass and search engine icon*/
}

You can change the color and transparency of the nav-bar, url-bar, searchbar and addon-bar (browser-bottombox) to better match your theme and background.Search for something like "rgba(255,255,255,.3)" = red, green, blue and transparency.

[Drifus]

I'd like a bit more seperated boxes... Fully

You refer to the height of the bar? Leave it apart vertically?

If yes, try this:

#nav-bar {
	background-color: transparent !important;
	border: none !important;
	margin-top: 1px !important;
	height: 30px !important; /*play around with this parameter*/
}

[Deo Domuique]

I mean I'd like the boxes to be squared and different a bit according to the entire clean interface... More contrast...

Let me try those that you gave me...