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

    • "Of course the easiest solution is to switch to uBlock Origin Lite if you want to remain on Chrome, as it is MV3-based, but from our experience, uBO Lite does not seem to be as good as the original non-Lite version" In my experience uBlock Origin Lite does the job for normal everday home users. When they kill that we get to watch Firefox and Brave get a boost in user market share.
    • Block by DNS ad blocker! I dare you! I will even layer unlock Origin, on top of my internal DNS, if I need to and I don’t even block ads today (I really should but this type of behavior makes me angry). I suppose I could also just be lazy, and add the flags myself, back to each release (it wouldn’t be that difficult).
    • Wonder what MPs have ties to these privacy/verification/data harvesting companies that are going to step in this time. Last time under the Tories half the cabinet had fingers in the pies, heck even the PM and his wife at the time was working for silicon valley, probably made a fortune.
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow by Sayan Sen For a while now the transition away from Manifest V2 (MV2) to MV3 has been on-going and it looks like it is entering its final phase of deprecation, at least, in the case of Google Chrome. A recent discussion thread in the w3c WebExtensions Community Group GitHub repo has highlighted how the latest and upcoming versions of the most popular browser are expected to be its final releases with support for MV2 extensions. Chromium contributor Andrey Bershanskiy shared details about recent Chromium changes and according to comments from Google engineer Devlin Cronin, Chrome has now started removing the flags that previously controlled MV2 availability. kExtensionManifestV2Disabled, the Chromium feature flag that allowed controlled disabling of MV2 add-ons, is now completely removed, which means you will likely no longer find uBlock Origin in your browser extensions list. He wrote: "The kExtensionManifestV2Disabled feature has been default-enabled for over a year. Remove the feature and the effectively-dead code. ... Any tests that relied on being in the "warning" phase (i.e., with the kExtensionManifestV2Disabled) for their sole behavior testing are removed, since this stage is no longer reachable." Cronin further explained why MV2 extensions are no longer allowed in supported Chrome versions as maintaining the associated functionality indefinitely is no longer possible. He cited growing technical difficulties and implementation complexities as well as security concerns. He wrote: "MV2 extensions are no longer allowed in any supported version of Chrome, and we are removing support for them and the associated functionality. We won't be able to provide / maintain this functionality indefinitely due to the complexity and tech debt, as well as the security risks it entails (we've actually found a number of bugs that are specific to MV2 lately). Of course, other browsers can continue supporting these if they so desire. Unfortunately, we won't be putting code behind a compilation flag ... We won't be removing all the MV2 code wholesale right away, so many of these things will continue working for awhile (but they will go away eventually, and some may go away sooner than others)." What this essentially means is that the tricks and bypasses that were used to keep MV2 extensions like uBlock Origin and others alive will not work any more on Chrome, or at least not for very long. For example the Windows Registry mod that could extend MV2 availability will cease to function after Chromium version 151. Here is a rundown of the changes coming in the final such releases of Chromium releases: Chromium 150 lost ExtensionManifestV2Disabled option Chromium 151 will loose ExtensionManifestV2Unsupported option Chromium 151 will loose ExtensionManifestV2Availability option Chromium 151 will likely loose AllowLegacyMV2Extensions option Other Chromium-based browsers like Opera and Microsoft Edge could soon follow suit too. Although it is not specified, Edge began disabling uBlock Origin back in February, and Opera could also stop the functioning of MV2 add-ons, even though it had committed to support MV2 for longer in October 2024. uBlock Origin developer Raymond Hill (gorhill) apparently stated the following: "For Opera I did submit 1.70.0 rather late, but this was weeks ago. A while ago I received an email from Opera that they plan to abandon MV2-based extension so maybe they are no longer allocating resources for reviewing such extensions." The email which developers like Gorhill mentions was received from Opera last year. Here is what it seemingly said: Hence for now the only Chromium browser that seems to be on-board fully with MV2 support is Brave, and perhaps Vivaldi as well. Meanwhile if you want to ditch Chromium browsers entirely then Mozilla Firefox is an excellent alternative as MV3 and MV2 are both supported. Of course the easiest solution is to switch to uBlock Origin Lite if you want to remain on Chrome, as it is MV3-based, but from our experience, uBO Lite does not seem to be as good as the original non-Lite version. Source: w3C (GitHub repo) As an online publication, Neowin too relies on ads for operating costs and, if you use an ad blocker, we'd appreciate being whitelisted. In addition, we have an ad-free subscription for $28 a year, which is another way to show support!
    • Write to your MP 😄 Like believing in Santa. Total surveillance IS the goal. Wake up.
  • Recent Achievements

    • One Month Later
      mobmobiles earned a badge
      One Month Later
    • 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
  • Popular Contributors

    1. 1
      +primortal
      510
    2. 2
      PsYcHoKiLLa
      219
    3. 3
      ATLien_0
      92
    4. 4
      +Edouard
      90
    5. 5
      Steven P.
      82
  • Tell a friend

    Love Neowin? Tell a friend!