Change the style of tab markers: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(fix link)
m (fix: however, [...], though)
Line 10: Line 10:
'''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'''.
'''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 [http://blog.codefront.net/mozilla/unreadtabs/ Unread Tabs] extension, which is based on the code above. However, it won't allow you to define another style for unread tabs, though.
You can also apply this modification by installing the [http://blog.codefront.net/mozilla/unreadtabs/ Unread Tabs] extension, which is based on the code above. It won't allow you to define another style for unread tabs, though.

Revision as of 00:03, 27 February 2005

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 your user configuration files 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.