X
Tap here to go to the mobile version of the site.

Support Forum

Css won't change browser style

Posted

I followed these instructions:

In Firefox browser, type about:profiles in url bar. Under the profile that is in use. Click Open Folder on the Root Directory row. If that folder does not have a chrome folder, create a folder, name it chrome. In the chrome folder, create a file named userChrome.css

Then I put in the code, but nothing has changed.

Here's the code. If someone can look at it for me, that would be great. I didn't make it, but it seems to work for everyone else who uses it.

:root {
 --tab-curve-width: 30px;
 --tabs-border: transparent !important;
}

.tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox {
 padding-inline-start: 10px !important;
}

/* To be able to see the top border of the tab */
.tab-stack {
 margin-top: 2px !important;
}

/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar {
 padding-inline-start: 15px !important;
}

#tabbrowser-tabs{
 margin-left:-15px;
}

.titlebar-placeholder {
 border: none !important;
}

.titlebar-spacer {
 border: none !important;
}

/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
 border: none !important;
}

/* Windows 7 specific */
@media (-moz-os-version: windows-win7) {
 .tabbrowser-tab {
  background-color: transparent !important;
  border: none !important;
 }

 @media (-moz-windows-default-theme) {
  .tabbrowser-tab:not(:-moz-lwtheme) {
   background-color: transparent !important;
   border: none !important;
  }
 }
}

.tabbrowser-tab > .tab-stack > .tab-background {
  background-image: none !important;
  -moz-box-orient: horizontal !important;
  background-color: transparent !important;
  margin-top: 1px !important;
}

.tab-background[selected="true"] {
 border: none !important;
}

.tab-background {
 pointer-events: none !important;
}

.tab-line {
 display: none !important;
}

.tab-bottom-line {
 display: none !important;
}

/* Match height of new tab button (right svg) on hover */
.tabs-newtab-button {
 margin: 0 !important;
}

/* overlap the tab curves */
.tab-background {
 -moz-margin-end: -15px !important;
 -moz-margin-start: -15px !important;
}

/* Remove blue animation on tab on page load complete */
.tab-loading-burst {
 display: none !important;
}

/* Begin tab background customizations */
.tab-background[selected="true"]::before {
 border: none !important;
 content: "" !important;
 width: 30px !important;
 min-height: 30px !important;
 display: -moz-box !important;
 background-repeat: no-repeat !important;
}

.tab-background[selected="true"]::after {
 border: none !important;
 content: "" !important;
 width: 30px !important;
 min-height: 30px !important;
 display: -moz-box !important;
 background-repeat: no-repeat !important;
}

.tab-background[selected="true"] > spacer {
 margin-top: 0px !important;
}

#new-tab-button,
.tabs-newtab-button {
 width: calc(36px + 30px) !important;
 margin-inline-start: -15px !important;
 margin-top: 1px !important;
}

/* Tab hover customizations */
.close-icon:hover {
 border-radius: 50% !important;
}

/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
 display: -moz-box !important;
 background-repeat: no-repeat !important;
 content: "" !important;
 width: 30px !important;
 max-height: 30px !important;
 background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
 display: -moz-box !important;
 background-repeat: no-repeat !important;
 content: "" !important;
 width: 30px !important;
 max-height: 30px !important;
 background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
 margin-top: 0px !important;
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
.tabs-newtab-button:hover,
.tabs-newtab-button:hover::before,
.tabs-newtab-button:hover::after {
 background-color: transparent !important;
}

/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover {
 background-position: 0px 2px, 30px 4px , 36px 2px !important;
 background-repeat: no-repeat !important;
 background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}

.tabs-newtab-button:hover > .toolbarbutton-icon {
 background: none !important;
 background-color: transparent !important;
}

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
 -moz-box-ordinal-group: 1 !important;
 box-shadow: non !important;
}

/* Color specific customizations */
:root {
 --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

 --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

 --background-selected-middle:
 linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
 linear-gradient(
 transparent
 2px,
 rgb(50, 50, 52) 2px,
 rgb(50, 50, 52)
 ),
 none !important;

 --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

 --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

 --background-hover-middle:
 linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
 linear-gradient(
 transparent
 2px,
 rgba(255,255,255,.1) 2px,
 rgba(255,255,255,.1)
 ),
 none;

 --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath
I followed these instructions: In Firefox browser, type about:profiles in url bar. Under the profile that is in use. Click Open Folder on the Root Directory row. If that folder does not have a chrome folder, create a folder, name it chrome. In the chrome folder, create a file named userChrome.css Then I put in the code, but nothing has changed. Here's the code. If someone can look at it for me, that would be great. I didn't make it, but it seems to work for everyone else who uses it. <pre><nowiki>:root { --tab-curve-width: 30px; --tabs-border: transparent !important; } .tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox { padding-inline-start: 10px !important; } /* To be able to see the top border of the tab */ .tab-stack { margin-top: 2px !important; } /* When the window is maximized, the first pinned tab is properly displayed. */ #TabsToolbar { padding-inline-start: 15px !important; } #tabbrowser-tabs{ margin-left:-15px; } .titlebar-placeholder { border: none !important; } .titlebar-spacer { border: none !important; } /* Remove unneeded styles from Photon */ .tabbrowser-tab::before, .tabbrowser-tab::after { border: none !important; } /* Windows 7 specific */ @media (-moz-os-version: windows-win7) { .tabbrowser-tab { background-color: transparent !important; border: none !important; } @media (-moz-windows-default-theme) { .tabbrowser-tab:not(:-moz-lwtheme) { background-color: transparent !important; border: none !important; } } } .tabbrowser-tab > .tab-stack > .tab-background { background-image: none !important; -moz-box-orient: horizontal !important; background-color: transparent !important; margin-top: 1px !important; } .tab-background[selected="true"] { border: none !important; } .tab-background { pointer-events: none !important; } .tab-line { display: none !important; } .tab-bottom-line { display: none !important; } /* Match height of new tab button (right svg) on hover */ .tabs-newtab-button { margin: 0 !important; } /* overlap the tab curves */ .tab-background { -moz-margin-end: -15px !important; -moz-margin-start: -15px !important; } /* Remove blue animation on tab on page load complete */ .tab-loading-burst { display: none !important; } /* Begin tab background customizations */ .tab-background[selected="true"]::before { border: none !important; content: "" !important; width: 30px !important; min-height: 30px !important; display: -moz-box !important; background-repeat: no-repeat !important; } .tab-background[selected="true"]::after { border: none !important; content: "" !important; width: 30px !important; min-height: 30px !important; display: -moz-box !important; background-repeat: no-repeat !important; } .tab-background[selected="true"] > spacer { margin-top: 0px !important; } #new-tab-button, .tabs-newtab-button { width: calc(36px + 30px) !important; margin-inline-start: -15px !important; margin-top: 1px !important; } /* Tab hover customizations */ .close-icon:hover { border-radius: 50% !important; } /* Regular tabs */ .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before { display: -moz-box !important; background-repeat: no-repeat !important; content: "" !important; width: 30px !important; max-height: 30px !important; background-color: transparent !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after { display: -moz-box !important; background-repeat: no-repeat !important; content: "" !important; width: 30px !important; max-height: 30px !important; background-color: transparent !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer { margin-top: 0px !important; } #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover, .tabs-newtab-button:hover::before, .tabs-newtab-button:hover::after { background-color: transparent !important; } /* New tab hover customizations */ .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover { background-position: 0px 2px, 30px 4px , 36px 2px !important; background-repeat: no-repeat !important; background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important; } .tabs-newtab-button:hover > .toolbarbutton-icon { background: none !important; background-color: transparent !important; } /* Tab bar below Navigation & Bookmarks Toolbars */ #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; box-shadow: non !important; } /* Color specific customizations */ :root { --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --background-selected-middle: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgb(50, 50, 52) 2px, rgb(50, 50, 52) ), none !important; --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --background-hover-middle: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgba(255,255,255,.1) 2px, rgba(255,255,255,.1) ), none; --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath</nowiki></pre>

Modified by cor-el

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

More Information

davidspriggs 3 solutions 67 answers

To troubleshoot whether your new CSS is loading correctly, you can right -click > View Source on the page. Look for the links to your CSS and grid files. You should be able to follow those links and view the changed CSS. If you don't see that changed CSS when you click on the source links, you know it is a linking problem.

What are you seeing on your screen right now? and what changes did yo make from previous to now that you're trying to see reflected?

I also see that on your .btn class, the background image is tecture.png, and I would change that to texture.png. does thisd hjelp?? david

To troubleshoot whether your new CSS is loading correctly, you can right -click > View Source on the page. Look for the links to your CSS and grid files. You should be able to follow those links and view the changed CSS. If you don't see that changed CSS when you click on the source links, you know it is a linking problem. What are you seeing on your screen right now? and what changes did yo make from previous to now that you're trying to see reflected? I also see that on your .btn class, the background image is tecture.png, and I would change that to texture.png. does thisd hjelp?? david
cor-el
  • Top 10 Contributor
  • Moderator
17575 solutions 158975 answers

Did you make sure that the userChrome.css file doesn't have a hidden .css or .txt file extension (userChrome.css.css or userChrome.css.txt) if nothing in the file is working?

You may have to add the default @namespace line at the start of the file.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
Did you make sure that the userChrome.css file doesn't have a hidden .css or .txt file extension (userChrome.css.css or userChrome.css.txt) if nothing in the file is working? You may have to add the default @namespace line at the start of the file. <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */</nowiki></pre>

Question owner

cor-el said

Did you make sure that the userChrome.css file doesn't have a hidden .css or .txt file extension (userChrome.css.css or userChrome.css.txt) if nothing in the file is working? You may have to add the default @namespace line at the start of the file.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

Yes, I made sure there is no hidden file extension. I double checked last night before I posted, as well, just to make sure. I will try the namespace thing. Is /*only needed once*/ part of the code?

''cor-el [[#answer-1211839|said]]'' <blockquote> Did you make sure that the userChrome.css file doesn't have a hidden .css or .txt file extension (userChrome.css.css or userChrome.css.txt) if nothing in the file is working? You may have to add the default @namespace line at the start of the file. <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */</nowiki></pre> </blockquote> Yes, I made sure there is no hidden file extension. I double checked last night before I posted, as well, just to make sure. I will try the namespace thing. Is /*only needed once*/ part of the code?

Question owner

davidspriggs said

To troubleshoot whether your new CSS is loading correctly, you can right -click > View Source on the page. Look for the links to your CSS and grid files. You should be able to follow those links and view the changed CSS. If you don't see that changed CSS when you click on the source links, you know it is a linking problem. What are you seeing on your screen right now? and what changes did yo make from previous to now that you're trying to see reflected? I also see that on your .btn class, the background image is tecture.png, and I would change that to texture.png. does thisd hjelp?? david

Well, I'm trying to go from the normal pre-installed Firefox browser look to a customized browser look. So I'm not changing anything as just adding the CSS to a blank file to make the changes.

Would I click View Source on the userChrome.css file?

''davidspriggs [[#answer-1211832|said]]'' <blockquote> To troubleshoot whether your new CSS is loading correctly, you can right -click > View Source on the page. Look for the links to your CSS and grid files. You should be able to follow those links and view the changed CSS. If you don't see that changed CSS when you click on the source links, you know it is a linking problem. What are you seeing on your screen right now? and what changes did yo make from previous to now that you're trying to see reflected? I also see that on your .btn class, the background image is tecture.png, and I would change that to texture.png. does thisd hjelp?? david </blockquote> Well, I'm trying to go from the normal pre-installed Firefox browser look to a customized browser look. So I'm not changing anything as just adding the CSS to a blank file to make the changes. Would I click View Source on the userChrome.css file?

Modified by maya.

WestEnd 60 solutions 5387 answers

Just curious besides programming a custom userChrome.css is there one that matches close to what your doing? You could use that as reference as well.

Just curious besides programming a custom userChrome.css is there one that matches close to what your doing? You could use that as reference as well.
cor-el
  • Top 10 Contributor
  • Moderator
17575 solutions 158975 answers

Note that the posted code is incomplete because it exceeds the allowed maximum, so we can't test it.

You can upload the file and post a link if this data is too big to put in a reply.

Note that the posted code is incomplete because it exceeds the allowed maximum, so we can't test it. You can upload the file and post a link if this data is too big to put in a reply. *https://pastebin.com/
jscher2000
  • Top 10 Contributor
8792 solutions 71903 answers

It doesn't affect the functionality, but I suggest adding a comment in your CSS showing where you downloaded it from in case you need to go back for updates or support. For example, you might be using this one or a variation on it:

/* From:
   https://github.com/wilfredwee/photon-australis/blob/master/userChrome-dark.css
*/
It doesn't affect the functionality, but I suggest adding a comment in your CSS showing where you downloaded it from in case you need to go back for updates or support. For example, you might be using this one or a variation on it: <pre>/* From: https://github.com/wilfredwee/photon-australis/blob/master/userChrome-dark.css */ </pre>

Question owner

WestEnd said

Just curious besides programming a custom userChrome.css is there one that matches close to what your doing? You could use that as reference as well.

I don't know anything about coding, so this is a pre-done one by someone on Github, but he won't answer any of my questions.

''WestEnd [[#answer-1212073|said]]'' <blockquote> Just curious besides programming a custom userChrome.css is there one that matches close to what your doing? You could use that as reference as well. </blockquote> I don't know anything about coding, so this is a pre-done one by someone on Github, but he won't answer any of my questions.

Question owner

cor-el said

Note that the posted code is incomplete because it exceeds the allowed maximum, so we can't test it. You can upload the file and post a link if this data is too big to put in a reply.

This is actually the complete code. It wouldn't let me post until I had the right amount of characters, so I took the characters out of my question, but left the code complete.

Is it missing something?

''cor-el [[#answer-1212075|said]]'' <blockquote> Note that the posted code is incomplete because it exceeds the allowed maximum, so we can't test it. You can upload the file and post a link if this data is too big to put in a reply. *https://pastebin.com/ </blockquote> This is actually the complete code. It wouldn't let me post until I had the right amount of characters, so I took the characters out of my question, but left the code complete. Is it missing something?
cor-el
  • Top 10 Contributor
  • Moderator
17575 solutions 158975 answers

Yes, there is data missing. See the last rule (--newtab-hover) that doesn't have a valid SVG definition that ends with </svg>. You can compare this with the CSS rule further u (--svg-hover-after). I actually added the last 'h' and removed some white space when I edited the question to avoid breaking the code.

 --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath
Yes, there is data missing. See the last rule (--newtab-hover) that doesn't have a valid SVG definition that ends with &lt;/svg&gt;. You can compare this with the CSS rule further u (--svg-hover-after). I actually added the last 'h' and removed some white space when I edited the question to avoid breaking the code. <pre><nowiki> --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath</nowiki></pre>
jscher2000
  • Top 10 Contributor
8792 solutions 71903 answers

You can use the steps here to double-check your setup of the userChrome.css file: https://www.userchrome.org/how-create-userchrome-css.html

You can use the steps here to double-check your setup of the userChrome.css file: https://www.userchrome.org/how-create-userchrome-css.html
the-edmeister
  • Top 25 Contributor
  • Moderator
5411 solutions 40303 answers

maya. said

I followed these instructions: In Firefox browser, type about:profiles in url bar. Under the profile that is in use. Click Open Folder on the Root Directory row. If that folder does not have a chrome folder, create a folder, name it chrome. In the chrome folder, create a file named userChrome.css Then I put in the code, but nothing has changed.

Are you closing Firefox before creating the chrome folder and adding your userChrome.css file?

AFAIK, when Firefox is running it won't accept changes or additions to the Profile.

''maya. [[#question-1255554|said]]'' <blockquote> I followed these instructions: In Firefox browser, type about:profiles in url bar. Under the profile that is in use. Click Open Folder on the Root Directory row. If that folder does not have a chrome folder, create a folder, name it chrome. In the chrome folder, create a file named userChrome.css Then I put in the code, but nothing has changed. </blockquote> Are you closing Firefox before creating the '''chrome''' folder and adding your '''userChrome.css''' file? AFAIK, when Firefox is running it won't accept changes or additions to the Profile.
cor-el
  • Top 10 Contributor
  • Moderator
17575 solutions 158975 answers

It doesn't really matter if you create the chrome folder and userChrome.css file while Firefox is running because Firefox only reads these files. These files are additional files and Firefox will pick up changes on the next start. If it doesn't work then there is either a problem with the file name (possible extra file extensions) or with the file format (not plain text) or the file is corrupted.

The missing default @namespace line at the start also can cause problems.

It doesn't really matter if you create the chrome folder and userChrome.css file while Firefox is running because Firefox only reads these files. These files are additional files and Firefox will pick up changes on the next start. If it doesn't work then there is either a problem with the file name (possible extra file extensions) or with the file format (not plain text) or the file is corrupted. The missing default @namespace line at the start also can cause problems. * @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

Question owner

Unfortunately, none of these solutions solved the issue. Does anyone have any other CSS codes that does the same as the one I'm trying to do that I can try and that you know work?

Unfortunately, none of these solutions solved the issue. Does anyone have any other CSS codes that does the same as the one I'm trying to do that I can try and that you know work?
jscher2000
  • Top 10 Contributor
8792 solutions 71903 answers

Hi maya., are any rules in your userChrome.css file working? If you need a tester file, you can use the buttons below the large blue box on this page to download a userChrome.css file:

https://www.userchrome.org/download-userchrome-css.html

All that example rule does is turn off the blue swipe across the tab that appears when a page finishes loading. Does it work on yours?

If it doesn't work, please review the placement of your chrome folder by checking against the steps here:

https://www.userchrome.org/how-create-userchrome-css.html

Hi maya., are any rules in your userChrome.css file working? If you need a tester file, you can use the buttons below the large blue box on this page to download a userChrome.css file: https://www.userchrome.org/download-userchrome-css.html All that example rule does is turn off the blue swipe across the tab that appears when a page finishes loading. Does it work on yours? If it doesn't work, please review the placement of your chrome folder by checking against the steps here: https://www.userchrome.org/how-create-userchrome-css.html