Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Css won't change browser style

  • 15 replies
  • 1 has this problem
  • 12 views
  • Last reply by jscher2000

more options

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

Modified by cor-el

All Replies (15)

more options

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

more options

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 */
more options

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?

more options

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?

Modified by maya.

more options

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.

more options

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.

more options

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
*/
more options

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.

more options

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?

more options

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
more options

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

more options

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.

more options

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.

more options

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?

more options

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