userChrome

[gitts]

I have this in my userChrome for some tine which i have had no problem with until now
....now I have no color just back yo dull user gray

#home-button {fill: red !important;}
#back-button {fill: Blue !important;}
#forward-button {fill: red !important;}

[RobertJ]

.
FWIW, that code

#back-button {fill: Blue !important;}

works for me. Note it does not fill the button; only colors the arrow.

Have not looked at CSS in a while and don't have time at this moment.

.

[morat]

It works for me in Fx 65.

[gitts]

it stopped working for me

this is my whole file
/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul");

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 80vw !important;
}

#tabbrowser-tabs {
width: 80vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 26
:root #tabbrowser-tabs {
--tab-min-height: 33px !important; /* needs to be the same as above under :root */
--tab-min-width:60px !important;JHJ
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
background-color: var(--toolbar-bgcolor) !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
position: fixed !important;
right: 0 !important;
top: calc(6px + var(--tab-min-height)) !important;
display: block !important;
visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}




.tab-throbber { visibility: hidden !important; }
/* tabs on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-

ordinal-group:10}
/* Search Bar width */
.searchbar-textbox {
max-width: 300px !important;
min-width: 100px !important; }


/* Search Bar width */
.searchbar-textbox {
max-width: 500px !important;
min-width: 300px !important; }

#home-button {fill: red !important;}
#back-button {fill: Blue !important;}
#forward-button {fill: red !important;}


/*
* Make all the default font sizes 13pt:
*/
* {
font-size: 13pt !important
}

[gitts]

also the little throber is back

[RobertJ]

.
Try moving those three lines to the beginning after

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul");

save and restart FF.

.

[gitts]

.
Try moving those three lines to the beginning after

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul");

save and restart FF.

.

thanks for your help Robert that solved my problem all is working fine now

[RobertJ]

.
Since it works I am guessing that somewhere in all that CSS you have in the userChrome.css file there is an syntax error. Depending on the type of error, FF will ignore everything that comes after it.

.

[gitts]

what is a syntax error

[RobertJ]

.
The general syntax looks like this for CSS

Code: Select all

selector {property: value;}

A specific example

Code: Select all

/* THIS BOLDS TEXT ON BOOKMARK TOOLBAR */
#personal-bookmarks .toolbarbutton-text {
      font-weight: bold !important;
      font-size: 115% !important;
}

A syntax error could be leaving out a } or some other typo, a bad selector, invalid property/value, .... FF responds to these differently. I don't know which types of error are ignored by FF or screw up everything below it. I just guess that since moving those lines to the top solved "that" issue there is an error somewhere.

One last thing. With new versions of FF there is sometimes a change in the core CSS that screws up things in userChrome.css that worked before. I'm assuming your CSS was copied from other people and your ability to check the syntax is minimal.

.

[gitts]

thanks fo your help leaving everything alone as all looks good to me