Trying to learn userChrome.css.....

[Gubbio]

1 - For example, I'd like to have a RED active Tab with White Text. (Or any other combination I choose.) (I'm not using any Themes.)

I've been looking at examples online, and I can't find anything that completely addresses the "foreground/background colors" that I am familiar with from other coding.

If I use this code (found online):

/* Change Color of Active tab */
tab{
-moz-appearance: none !important; }

tab[selected="true"] {
background-color: rgb(255,0,0) !important;
color: red !important; }

I get what appears to be a red square tab BEHIND the default gray rounded-corner tab. But, the TEXT is also red. WHY? I didn't address "foreground" at all.

If I change the phrase "background-color" in the above example to "foreground-color," the red box (behind the tab) goes away, and I have red text. That makes sense. But, that's not exactly what I am after.

2 - What do these brackets do { }?

3 - What is this "!important;" thing? Is it just a comment? Or, is it necessary for the script to run?

4- When do you use "rgb" as opposed to "Hex #000000" ? I've seen both examples.

5 - I'd like to understand the syntax, and not just copy examples.


Finally, Off Topic: I don't find FF 29 such an abomination or difficult to use, and no one hates change more than I do. I don't understand what all the bitching has been about.

Sorry if this is too many questions.

Thanks,
-Mike

[Grumpus]

You may need this CSS information
This from the Knowledge Base might also help UserChrome element names/IDsThere's some information in Wikipedia for Stylish.

[Gingerbread Man]

But, the TEXT is also red. WHY? I didn't address "foreground" at all.

Because you used color: red !important, natch. Color refers to text color; there's no such thing as foreground-color. If you'd used Stylish instead of userChrome.css, you would've noticed that your code isn't valid. Plus, you'd have autocomplete which saves you some typing, and styles would applied without having to restart Firefox.
https://addons.mozilla.org/firefox/addon/stylish/

To change the color of the curved Australis tabs, see the following post on userstyles.org. Change the values of the linear-gradient properties as you see fit.
https://forum.userstyles.org/discussion/comment/81835#Comment_81835

CSS stands for Cascading Style Sheets. A style is not a script. "Script" refers to things like JavaScript, either on web pages or in user scripts (there are other scripting languages besides that).

Code: Select all

/* Change Color of Active tab */
tab{
-moz-appearance: none !important; }

• The first line at the top is a comment.
• Everything else below that is a rule.
• { -moz-appearance: none !important; } is a declaration.
• tab is a selector.
• -moz-appearance is a property.
• none is a property value.
• !important is a keyword that overrides existing declarations. See CSS Specificity | MDN.

You can specify a color using a named color, RGB value, HSL value, or hex value. Personal preference is the only thing that determines which one you use.
http://www.w3schools.com/HTML/html_colornames.asp
https://developer.mozilla.org/docs/Web/CSS/color_value

If you want to know more, use one of the many learning resources on the web.
Introduction to CSS | HTML Source
CSS | MDN

And since you're going to tinker with the user interface, install DOM Inspector and Element Inspector. The latter is optional, but it takes the hassle out of selecting elements that are behind menus that can't be activated with the keyboard.
https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
https://addons.mozilla.org/firefox/addon/element-inspector/

[Gubbio]

Gingerbread Man,

Thanks for your input. It's a lot to digest.....

[Frank Lion]

Gingerbread Man,

Thanks for your input. It's a lot to digest.....

You might find this a little easier to follow - viewtopic.php?f=7&t=2777255

After the first page or so, it is specifically designed for people trying to learn userChrome.css code stuff.

[Gingerbread Man]

Sorry if this is too many questions.

It's a lot to digest.....

When you ask a lot of questions, you tend to get a lot of answers

You're welcome.

[patrickjdempsey]

If I use this code (found online):

/* Change Color of Active tab */
tab{
-moz-appearance: none !important; }

tab[selected="true"] {
background-color: rgb(255,0,0) !important;
color: red !important; }

Unfortunately for you, that code has been passing around for about a decade and has pretty much *never* been correct. I don't get why it's still being passed around or why it hasn't been deleted a long long long time ago.

[GONeill]

I've seen lots of posts about how to change things with userChrome.css and thought to myself "How did they know that was the ID?" With the DOM inspector you can see what is in the web page area of the screen but not the main control areas (tabs, panels etc).
The trick is to open the browser within the browser and then inspect that. Open a new tab and go to:

chrome://browser/content/browser.xul

Now you can find the IDs and classes of everything!

[Frank Lion]

Now you can find the IDs and classes of everything!

Not with the Firefox built-in 'Dom Inspector, mainly because it is utter crap. This extension, however, is how it is done - viewtopic.php?p=13274933#p13274933

Finally, Off Topic: I don't find FF 29 such an abomination or difficult to use, and no one hates change more than I do. I don't understand what all the bitching has been about

Well, the 'bitching' by visually impaired people has been because they can't see the toolbar buttons and cannot use text readers because the text has been removed. Then there has been 'bitching' by people with muscle/nervous disorders who have been unable to click the 14 x 14 pixels Reload and Stop buttons, due to tremor, etc.

Other people have other problems with it. The reason you don't understand what all the bitching has been about, is that you are assuming that all Firefox users are identical clones of you. Certainly sounds like you never got around to reading this - viewtopic.php?f=38&t=2824649

REMOVED:

* Small icons mode for toolbar buttons
* Text-only mode for toolbar buttons
* Icons-and-text mode for toolbar buttons
* Addons toolbar
* Custom toolbars
* Bookmarks / History sidebar buttons
* Firefox menu button
* Separators / Spaces / Flexible Spaces
* Activity Indicator (Throbber)

LOCKED:

* Back/Forward/Urlbar/Stop/Reload locked into group on the Navigator toolbar
* New Menu button locked onto end of Navigator toolbar
* All tabs button locked onto end of Tabs toolbar
* Cut / Copy / Paste locked into movable group
* Tabs toolbar locked on top and always visible
* Navigator toolbar locked as always visible

[Gubbio]

I'M SO CONFUSED !

[Gingerbread Man]

The trick is to open the browser within the browser and then inspect that.

I find it simpler to use File → Inspect Chrome Document and then use the "Find a node to inspect by clicking on it" button on the toolbar. And even simpler than that is Element Inspector: just hold down Shift and right-click an element.

I'M SO CONFUSED !

You wanted to change the colors of the tabs in Firefox 29. That's the second paragraph of my previous post. You can ignore everything else, if you're not as interested in learning CSS as you thought you were.

[Gubbio]

I'M SO CONFUSED !

You wanted to change the colors of the tabs in Firefox 29. That's the second paragraph of my previous post. You can ignore everything else, if you're not as interested in learning CSS as you thought you were.

Thanks again, but this is over my head. I looked at your second paragraph again, and I can't even decipher what info I need. I don't know what I'm looking at; don't know where to start; it's all gibberish to me.

[Gingerbread Man]

Code: Select all

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*
Code source:
https://forum.userstyles.org/discussion/comment/81835#Comment_81835
*/

.tabbrowser-tab[selected=true] {
  color: white !important;
}

.tab-background,.tab-background-middle {
  background-color: transparent !important;
}

.tab-background .tab-background-middle[selected=true] {
  background-image:url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
linear-gradient(transparent,transparent 2px,red 2px,red)!important;
  background-size: auto 100% !important;
}

.tab-background-start[selected=true]::before {
  clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start) !important;
}

.tab-background-end[selected=true]::before{
  clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end) !important;
}

.tab-background .tab-background-start[selected=true]::before,
.tab-background .tab-background-end[selected=true]::before {
  content: "" !important;
  display: -moz-box !important;
  background-color: transparent !important;
  background-image:url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),linear-gradient(transparent,transparent 2px,red 2px,red 2px,red 3px,red 3px,red 4px,red 4px,red) !important;
}

[Gubbio]

[code]@namespace url(http://www.mozilla.org/keymaster/gateke ... s.only.xul).......

Gingerbread Man,

WOW! I copied your code into my .css file, and it worked! I haven't the vaguest idea how or why. All that coding for that one little change?

Forget about the curved tabs; I was looking for something as simple as "foreground (or text) and background."

I did some "Basic" years ago and also used to make some pretty complicated Batch Files (with color), so I'm familiar with the idea of coding; turning things on and off.

But, how in the hell do you learn this stuff ? !!!

Thanks again. When (if) my mind clears, I'll study your code.