Recommended Posts

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

If you not use Status-4-Evar addon, comment or remove this peace:

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

And UNcomment or delete "/*" and "*/" from "/*#addon-bar..." to "...box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;}*/" - just below /*Autohide addon-bar - by users from neowin.net*/

Understand?

If you not use Status-4-Evar addon, comment or remove this peace:

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

And UNcomment or delete "/*" and "*/" from "/*#addon-bar..." to "...box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;}*/" - just below /*Autohide addon-bar - by users from neowin.net*/

Understand?

Do you have this script on userstyles.org so I could keep it updated?

By the way foxxyn8, I observed that on the find-bar style there is a certain issue: when the search result is on the bottom of the page it is displayed under the find-bar. That's kind of an annoying problem as you may not realize where your search result is as you must scroll down to see it ... Is there away to force the search result to be displayed some pixels above (to auto-scroll down a bit on it's own) ?

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

excellent !

is there anyway to highlight the toolbar buttons when mouse is over them ;

PS. the addon bar does not get the theme, i had to add extra code yo do it or remove the following

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

i merged your code with mine and had this (the result is at the attached image)

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

#addon-bar > *
{
        margin-top: 0px !important;
}

#addon-bar.chromeclass-toolbar {
border:none !important;
-moz-appearance:none !important;
}
#addon-bar {
        border: none !important;
        height: 15px !important;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

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

#addon-bar > #status-bar {
background: none !important; 
}

#status-bar {
color :white !important;
text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important;
}

.bookmark-item > .toolbarbutton-text {
  color: white !important;

}

/*Disable tabstoolbar drag - enable newtab double clicking*/
#TabsToolbar {
        -moz-binding: none !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: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: rgba(190,60%,70%,.5) !important;
        border-color: rgba(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;
}

question what does this code do ?

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

post-350684-128637134336.jpg

Green progress lines with modified color transition

.tab-progress > .progress-bar,
#urlbar-progress > .progress-bar
{
	background-color: rgb(25, 255, 25) !important;
	background-image: none !important;
}

#urlbar-progress > .progress-remainder
{
	background-image: -moz-linear-gradient(left,
 	rgba(25, 255, 25, 1),
 	rgba(255, 255, 255, 0) 60px) !important;
	background-color: threedlightshadow !important;
}

.tab-progress > .progress-remainder
{
	background-image: -moz-linear-gradient(left,
 	rgba(25, 255, 25, 1),
 	rgba(255, 255, 255, 0) 30px) !important;
	background-color: threedlightshadow !important;
}

You can find more & some info here: Bug 597592

does anyone know why this code for unread tabs don't work

#content tab:not([selected]) {
   font-style: italic !important; 
   background-color: red !important;
   color: white !important; }

i want to use it with this code

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

By the way foxxyn8, I observed that on the find-bar style there is a certain issue: when the search result is on the bottom of the page it is displayed under the find-bar. That's kind of an annoying problem as you may not realize where your search result is as you must scroll down to see it ... Is there away to force the search result to be displayed some pixels above (to auto-scroll down a bit on it's own) ?

Actually I use an extension that scrolls the window to display the search result: Find To Center

Sorry for the double post!

does anyone know why this code for unread tabs don't work

#content tab:not([selected]) {
   font-style: italic !important; 
   background-color: red !important;
   color: white !important; }

i want to use it with this code

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

The selected attribute was removed from all tabs except the currently selected tab via bug 480813 as it wasn't working properly. It has not been reintroduced into Fx 4. So the only way to color unread tabs is with an add-on like this which will add a vistited attribute : https://bugzilla.mozilla.org/attachment.cgi?id=420804

Then code like this:

.tabbrowser-tab:not([visited="true"]) {
   font-style: italic !important; 
   background-color: red !important;
   color: white !important; }

Sorry for the double post!

The selected attribute was removed from all tabs except the currently selected tab via bug 480813 as it wasn't working properly. It has not been reintroduced into Fx 4. So the only way to color unread tabs is with an add-on like this which will add a vistited attribute : https://bugzilla.mozilla.org/attachment.cgi?id=420804

Then code like this:

.tabbrowser-tab:not([visited="true"]) {
   font-style: italic !important; 
   background-color: red !important;
   color: white !important; }

thanks o a lot it worked!

Yes. As soon as I receive feedback that everything is ok. And perhaps it is better to wait for beta 7 release. Few days I think.

Great :)

I don't know if this related to your script or not, but when I put a button on the tab bar (downloads button, sync button) they don't move, I have to put them on the 'address bar' bar first, then move them. Then when I restart Firefox everything has reset to the default view :/

question what does this code do ?

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

This code preserves hover highlights buttons on nav-bar.

Great :)

I don't know if this related to your script or not, but when I put a button on the tab bar (downloads button, sync button) they don't move, I have to put them on the 'address bar' bar first, then move them. Then when I restart Firefox everything has reset to the default view :/

You are right, Iakobos. This issue is caused by:

/*Disable tabstoolbar drag - enable newtab double clicking*/
#TabsToolbar {
	-moz-binding: none !important;
}

If anyone can help me with this, I am grateful. Keep double-clicking on the tabbar, but without this problem. :D

You are right, Iakobos. This issue is caused by:

/*Disable tabstoolbar drag - enable newtab double clicking*/
#TabsToolbar {
	-moz-binding: none !important;
}

If anyone can help me with this, I am grateful. Keep double-clicking on the tabbar, but without this problem. :D

I never double click the tab bar, I commented them lines out and all works fine again, thanks :)

GREAT script btw, Thanks so much

excellent !

i merged your code with mine and had this (the result is at the attached image)

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

#addon-bar > *
{
 margin-top: 0px !important;
}

#addon-bar.chromeclass-toolbar {
border:none !important;
-moz-appearance:none !important;
}
#addon-bar {
 border: none !important;
 height: 15px !important;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

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

#addon-bar > #status-bar {
background: none !important; 
}

#status-bar {
color :white !important;
text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important;
}

.bookmark-item > .toolbarbutton-text {
 color: white !important;

}

/*Disable tabstoolbar drag - enable newtab double clicking*/
#TabsToolbar {
 -moz-binding: none !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: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: rgba(190,60%,70%,.5) !important;
 border-color: rgba(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;
}

Nice!

But I really like the ability to drag a window even with multiple tabs open. So I keep the tittle bar.

Leave a margin on the right and/or left of the tabs can be a solution to drag, too. But personally, I still prefer to have all the tittle bar available for drag.

You are right, Iakobos. This issue is caused by:

/*Disable tabstoolbar drag - enable newtab double clicking*/
#TabsToolbar {
	-moz-binding: none !important;
}

If anyone can help me with this, I am grateful. Keep double-clicking on the tabbar, but without this problem. :D

I'm not seeing that problem on my end (Mozilla/5.0 (Windows NT 6.1; rv:2.0b7pre) Gecko/20101006 Firefox/4.0b7pre ID:20101006041601), but that binding should be

#navigator-toolbox > #TabsToolbar {
  -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar")
!important;
}

I'm not seeing that problem on my end (Mozilla/5.0 (Windows NT 6.1; rv:2.0b7pre) Gecko/20101006 Firefox/4.0b7pre ID:20101006041601), but that binding should be
#navigator-toolbox > #TabsToolbar {
 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar")
!important;
}

Really? Maybe I have some addon causing this? Disabling Tabmix Plus, this issue remains.

Have you tried putting a button (back/forward, for example) in tabbar with this code enabled?

Please,Try this, restart and check if the buttons is still there.

Really? Maybe I have some addon causing this? Disabling Tabmix Plus, this issue remains.

Have you tried putting a button (back/forward, for example) in tabbar with this code enabled?

Please,Try this, restart and check if the buttons is still there.

I have replaced your little bit of code with foxxyn8's and it works fine here for me :)

Really? Maybe I have some addon causing this? Disabling Tabmix Plus, this issue remains.

Have you tried putting a button (back/forward, for example) in tabbar with this code enabled?

Please,Try this, restart and check if the buttons is still there.

Your code as is won't work. You have to insert the correct binding . Change:

#TabsToolbar {
        -moz-binding: none !important;
}

to

#navigator-toolbox > #TabsToolbar {
  -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar") !important;
}

and it will work like you desire.

:)

Thanks for confirming this +IakobosJ!

I'm not seeing that problem on my end (Mozilla/5.0 (Windows NT 6.1; rv:2.0b7pre) Gecko/20101006 Firefox/4.0b7pre ID:20101006041601), but that binding should be

#navigator-toolbox > #TabsToolbar {
 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar")
!important;
}

Oh yes! Thanks foxxyn8, your code fixed that issue. I just do not understand how, but did the job.

This code taken from browser.css - omni.jar - also worked:

 #toolbar-menubar:not([autohide="true"]),
 #TabsToolbar[tabsontop="true"],
 #navigator-toolbox[tabsontop="false"] > #nav-bar,
 #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
 #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
	-moz-binding: none !important;
 }

Editing my reply:

Yes, you code seems correct. Mine does not. "-moz-binding none" is wrong.

Thanks again.

Oh yes! Thanks foxxyn8, your code fixed that issue. I just do not understand how, but did the job.

This code taken from browser.css - omni.jar - also worked:

 #toolbar-menubar:not([autohide="true"]),
 #TabsToolbar[tabsontop="true"],
 #navigator-toolbox[tabsontop="false"] > #nav-bar,
 #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
 #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
	-moz-binding: none !important;
 }

Editing my reply:

Yes, you code seems correct. Mine does not. "-moz-binding none" is wrong.

Thanks again.

No problem. It's a very nice looking style! :)

I'm trying something new with back/forward buttons.

Before apply this you need move the back/forward buttons to Tab Bar.

This is just for Bars on Top.

Little lazy changelog:

1 - new back/forward button on Tab Bar;

2 - new square layout for url and search bar;

3 - fix double-click issue on Tab Bar;

4 - comment custom css for Status-4-Evar addon;

5 - uncomment custom css for default Add-on Bar;

The code is a bit out of order. I need to polish it later.

Actually, I do not like codes and programming. I am a graphic designer. My brain does not work well for codes. :blush:

So, if someone can check everything for me, thank you.

Got a issue that could not solve yet: if you use the auto hide menu bar (ALT key), the buttons are clipped when return to hide menu.

I tried to force zIndex negative on titlebar and mainmenu, but without success.

Please, give-me some feedback about this changes.

Thank you everyone for your help.

2n026fd.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;
}

/*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;
	margin-left: 60px !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;
}

/*Disable tabstoolbar drag - enable newtab double clicking - fixed by foxxyn8*/
#navigator-toolbox > #TabsToolbar {
	-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar") !important;
}

/*Remove some dropmarkers*/
#back-forward-dropmarker {
	display: none !important;
}
.urlbar-history-dropmarker {
	display: none !important;
}

/*Back-Forward buttons detached - only for back-forward buttons on tab bar and Tabs on Top*/
#titlebar-content {
	position: relative !important; 
	z-index: 0 !important;
}
.tabbrowser-tab {
	height: 25px !important; /*fix back/forward margin issue with tab pinned*/
}
#main-menubar {
 margin-left: 60px !important;
}
#back-button {
	border-radius: 10000px !important;
	margin-top: -10px !important;
	margin-bottom: 5px !important;
	width: 30px !important;
	height: 30px !important;
	position: relative !important; 
	z-index: 1 !important;
	border: none !important;
	background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, rgba(231,232,233,.45) 51%, rgba(225,226,229,.2)) !important;
	box-shadow: 0 0 0 3px rgba(255,255,255,.3) inset, 0 0 0 2px rgba(255,255,255,.1) inset, 0 0 0 1px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3), 1px 2px 1px rgba(0,0,0,.2) !important;
}
#forward-button {
	border-radius: 0 5px 5px 0 !important;
	padding-left: 7px !important;
	padding-right: 3px !important;
	margin-top: -5px !important;
	margin-bottom: 10px !important;
 	width: auto !important;
 	height: auto !important;
	border: none !important;
 	-moz-margin-start: -5px !important;
	background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, rgba(231,232,233,.45) 51%, rgba(225,226,229,.2)) !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 2px rgba(255,255,255,.1) inset, 0 0 0 1px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3), 1px 2px 1px rgba(0,0,0,.2) !important;
	mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask) !important;
}
/*END Back-Forward buttons detached*/


/*Transparency, hover and more naked UI*/
#nav-bar {
	background-color: transparent !important;
	border: none !important;
	margin-top: 1px !important;
/*	height: 26px !important;*/ /*If you like more vertical space on nav-bar, uncomment this*/
}
#PersonalToolbar {
	background-color: rgba(255,255,255,.1) !important;
	border: none !important;
}
#urlbar {
	background: rgba(255,255,255,.3) !important;
	border: none !important;
	border-radius: 0 !important; /*suggest by Deo Domuique*/
	box-shadow: none !important;
}
#searchbar > *, #search-box {
	background: none !important;
	border: none !important;
	border-radius: 0 !important; /*suggest by Deo Domuique*/
	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* uncomment this/
/*#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* - If you use the Status-4-Evar addon comment-remove this*/
#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;
}
/*END Autohide addon-bar */

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

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • State of Decay 3 is out in 2027, reveals Plague Nests with new co-op gameplay trailer by Pulasthi Ariyasinghe A few months ago, Undead Labs broke its silence about the third entry in the State of Decay series since its announcement in 2020. Today, the studio had a brand-new trailer to reveal at the Xbox Games Showcase, finally giving players a look at the Unreal Engine 5-powered title. A broad 2027 release window is now attached to State of Decay 3 too. The studio confirmed that every scene seen in the gameplay trailer (except for the studio logo) released today is from the game with no cinematic footage. "The quality bar of the moment-to-moment experience is higher than anything we’ve achieved in Undead Labs’ history," says the studio. "State of Decay 3 is being built in Unreal Engine 5, and we’re creating better quality versions of what makes our game the survival sandbox it is, and the combat experience is really, really important to us, and I think you can see it coming through in this trailer." One new aspect of this upcoming entry is the Plague Nests. These are supposed to be dynamic, dungeon‑like enemy hubs with varied “personas” that change tactics each time one appears on a map. These areas will have the best loot in the game for players brave enough to tackle them. The combat system is being overhauled too, letting players do quick and power attacks depending on the situation. This isn't just on the player's side though, as zombies themselves now have multiple new types of behaviors depending on how fresh or decayed they are. "All of these play very differently, especially as you start getting outnumbered or when you’re making noise and running around and trying to save your rear end or the rear end of your friend next to you," adds the developer. Of course, settlement building and community management are massive parts of this third entry too. These are being further expanded with the cooperative focus, giving players much more freedom for playing together than in State of Decay 2. Players will even be able to split up and build settlements in different areas of the same map with different goals. Undead Labs confirmed that playtests are already ongoing for the title, and interested players can sign up to participate by heading over here once more slots open up ahead of the full release. State of Decay 3 is coming out on PC, Xbox Series X|S, PlayStation 5, and Xbox Game Pass sometime in 2027.
    • Doom: The Dark Ages Revelations expansion gives the Slayer a brutal Chain Spear by Pulasthi Ariyasinghe Last year, id Software released Doom: The Dark Ages as a prequel to its reboot series, offering a look at the legendary Slayer character during an ancient war between Hell and Heaven. Today, at the Xbox Games Showcase, id Software returned with a new announcement that unveiled Doom: The Dark Ages Revelations as its first story expansion. The expansion will see the Slayer being betrayed and cast into a "merciless purgatory only escapable by confronting haunting truths." Somehow, there is one ally in all this chaos seemingly attempting to help our protagonist escape his fate. Players will be ascending this prison and fighting plenty of new demons and abominations as they work to free the Slayer's followers. One new aspect of the expansion will be the Chain Spear. This new weapon is described by the studio as a "uniquely satisfying combat system that rewards mastery with a potent combination of power and mobility." Check out the trailer below to see the new weapon in action, where the Slayer is seen using it to even pin enemies to walls. id Software is also preparing a free update to all owners of Doom: The Dark Ages that will land alongside the new paid expansion. Dubbed the Ripatorium 3.0 update, this will add more customization options, an improved pass code generation system, and preset options for players diving into the game's arena challenge mode. Expansion buyers will also receive additional maps, demons, and new weapons to use in this mode in addition to the story levels. Doom: The Dark Ages Revelations expansion is out on July 7 across PC, Xbox Series X|S, and PlayStation 5 with a $19.99 price tag. Those who own the Premium Edition or the Collector's Bundle will receive the expansion for no extra cost as well.
    • Hyped for this. Replayed the remasters recently and they're so well done, and Crash 4 was great too. I trust this team to deliver.
    • Ninja Theory's new Hellblade game is action-focused and set in Purgatory by Pulasthi Ariyasinghe Ninja Thery has been building its award-winning Hellblade series since 2017, delivering Senua's Sacrifice and Senua's Saga since then. Today at the 2026 Xbox Games Showcase, the studio had a brand-new installment announcement featuring Senua again, but this time, she is in a version of purgatory, and the focus is on the action. Simply named Senua, this new entry is described as a "full-on action-adventure" experience, delivering an expanded focus on combat, puzzle-solving, and freedom of exploration. The developer says that it is keeping the same high production values and storytelling features of the previous games while giving what players have been asking for in the gameplay department. The entirety of Ninja Theory is now working on Senua, giving the project much more manpower than ever before, while also letting the team draw on its action roots from Devil May Cry and prior titles. However, the studio also confirmed that its previously announced Project Mara horror experience is no longer in development. Alongside snappier traversal moves, Senua will be able to take stealth and direct combat routes. She has access to her own sword, plus any enemy weapons as well, with dual wielding also being an option for most dropped melee swords, axes, and other weapons. Outside of melee combat, Senua will be able to use special abilities that let her alter the reality around her. The world is said to be about twice the size of Hellblade 2. While this won't be an open-world experience, the linear story will let players explore their surroundings further than before. The story of Senua will be set after the events of previous Hellblade titles, with our protagonist being stuck in her own version of Purgatory. The series' well-explored psychosis themes will return as well. "She’s trapped between life and death on a quest to reach the afterlife and be reunited with the ones that she’s loved and lost," adds the studio. "Her belief is that by healing the wounds of her life, she can find the peace that is the key that unlocks the gate to the afterlife." Senua is releasing on Xbox Series X|S, PC, and PlayStation 5 sometime in 2027.
  • Recent Achievements

    • Proficient
      Eric Biran went up a rank
      Proficient
    • Dedicated
      Conjor earned a badge
      Dedicated
    • Week One Done
      Windows Guy earned a badge
      Week One Done
    • Dedicated
      Mark Spruce earned a badge
      Dedicated
    • Collaborator
      conkir earned a badge
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      492
    2. 2
      PsYcHoKiLLa
      248
    3. 3
      Steven P.
      72
    4. 4
      +Edouard
      68
    5. 5
      ATLien_0
      67
  • Tell a friend

    Love Neowin? Tell a friend!