Change the style of tab markers

From MozillaZine Knowledge Base
Jump to navigationJump to search

Some themes change the style of tab markers on the tab bar. They usually use CSS to do it, and you can add the same CSS to userChrome.css to achieve the same effect ‘permanently’, that is, irrespective of (and overriding) your chosen theme.

For example, adding the following code to userChrome.css will cause the title text of unread tabs opened in the background to appear in italics until that tab is read for the first time.

/* Italicize the title of unread tabs */
#content tab:not([selected]) {
  font-style: italic !important;
}

How it works: The CSS selector causes the style rule to be applied to all tab elements without a selected attribute - which is only the case for a new, unread tab. When the user switches to that tab, it gains selected=true. When another tab is selected, the previous tab's selected attribute is not removed, but changed to false.

You can also apply this modification by installing the Unread Tabs extension, which is based on the code above. It won't allow you to define another style for unread tabs, though.