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

منتدى الدعم

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

Quote

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
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17340 solutions 156761 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>
Was this helpful to you?
Quote

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?
Was this helpful to you?
Quote

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.

Was this helpful to you?
Quote
WestEnd
  • Top 25 Contributor
61 solutions 5340 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.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17340 solutions 156761 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/
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8575 solutions 70112 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>
Was this helpful to you?
Quote

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.
Was this helpful to you?
Quote

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?
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17340 solutions 156761 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>
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8575 solutions 70112 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
Was this helpful to you?
Quote
the-edmeister
  • Moderator
5391 solutions 40020 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.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17340 solutions 156761 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 */
Was this helpful to you?
Quote

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?
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8575 solutions 70112 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
Was this helpful to you?
Quote
اطرح سؤالا

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.