Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Apprentice

panoc

Posted
Posted

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:

screenhunter01oct031208n.jpg

can you upload the transparent styles ?

Community Regular

foxxyn8

Posted
Posted

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;
}

Collaborator

Deo Domuique

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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;
}

Community Regular

foxxyn8

Posted
Posted

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

mb-1.png

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;
}

Enthusiast

mNiosu

Posted
Posted

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:

post-344974-12862580547403.png

Community Regular

foxxyn8

Posted
Posted

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.

Enthusiast

mNiosu

Posted
Posted

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:

post-344974-12862798408101.png

post-344974-12862798506133.png

Collaborator

Deo Domuique

Posted
Posted

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

Collaborator

Deo Domuique

Posted
Posted

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...

Community Regular

foxxyn8

Posted
Posted

@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.

Collaborator

Deo Domuique

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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.

Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

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.

Contributor

Drifus

Posted
Posted

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.

15qvtl3.jpg

@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;
}

Collaborator

Deo Domuique

Posted
Posted

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?

post-350150-12863077562005.png

Contributor

Drifus

Posted
Posted

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.

Contributor

Drifus

Posted
Posted

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*/
}

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.