Recommended Posts

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 ?

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

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

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

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

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

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.

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

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

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

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

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

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.

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.

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

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

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.

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • It would be surprising if even 3 year old Apple Watches (and not SE models at that) cannot run watchOS 27. Granted, it doesn't mean it would work as well. We'll see.
    • Apple launches new website for parents and a revamped Screen Time experience by Aditya Tiwari At WWDC 2026, Apple announced new parental control features for iOS 27, iPadOS 27, and macOS 27 to keep kids' device usage in check and keep them safe online. As a parent, you'll get access to a simpler setup experience, Ask to Browse, Time Allowances, and a redesigned Screen Time. You'll be able to pick exactly which apps your child can access on their device, choosing from just a few essential apps, a curated set, or the apps you feel are appropriate. There will be an option to gradually add more apps. Ask to Browse is a new feature that requires kids to request permission before visiting a new website in Safari on iPhone, iPad, or Mac. You can also turn on a setting that requires your kid to ask for approval before connecting with an unknown contact via Messages, FaceTime, or the Phone app. You can manage your child's screen time more effectively with Time Allowances that work across categories, including Games, Entertainment, and Social Media. You can set time limits based on your kid's age and get suggestions informed by expert research. Speaking of expert guidance, Apple added that it's working with the American Academy of Pediatrics (AAP) to adapt its Family Media Plan to create a guide parents can refer to when using Apple products. Moreover, the company has also set up a new dedicated website, where you can find tools, resources, and answers to common questions around parental controls and child safety. Apple also allows parents to set daily schedules to manage screen time, configuring access to different apps at different times of the day and across the week. Overall, the Screen Time section has been revamped and provides a bird's-eye view of your kid's average device usage and most-used apps. "For example, to help protect important family moments, parents can quickly limit access during meals, outdoor play, and other times that deserve full attention. If kids need a little extra time to finish something in an app, parents can also easily extend access," Apple said. Apart from these, Communication Safety has been updated to block gore or violent content when detected in shared images or videos. The feature already blurs nudity in Messages and FaceTime calls, and is enabled by default for users under 18.
    • They already threw the Ultra 1st gen under the bus? It really feels like someone screwed up, and that advanced AI features will only be available on the list above but someone screwed up and said that Watch OS 27 in general will only be available for those models. I think they will pull it back. I did see someone also put a snap shot of their series 9 watch being offered the watch os 27 beta. As the backlash online is already in full swing.
    • Right, Google... because that's who this is going to. Google, the company who's entire business model is geared around ad revenue and your personal data.
    • That is the natural course for regulations. First to protect the consumer. Then to protect the business/industry from upstart competition. There are countless examples across history.
  • Recent Achievements

    • Very Popular
      Captain_Eric earned a badge
      Very Popular
    • One Month Later
      amusc earned a badge
      One Month Later
    • One Month Later
      DJC50PLUS earned a badge
      One Month Later
    • Week One Done
      DJC50PLUS earned a badge
      Week One Done
    • Proficient
      Eric Biran went up a rank
      Proficient
  • Popular Contributors

    1. 1
      +primortal
      513
    2. 2
      PsYcHoKiLLa
      231
    3. 3
      ATLien_0
      87
    4. 4
      +Edouard
      84
    5. 5
      Steven P.
      80
  • Tell a friend

    Love Neowin? Tell a friend!