SPIP 1.9.2
How do I change the appearance of my links ?
On the internet, hypertext links are traditionally recognised and presented in blue underlined text. But you’ve almost certainly noticed that this presentation varies from one site to another. You can easily change this default presentation style of your links using CSS. Here’s a standard example :
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}- This "a" applies to every link that is displayed on your web page, that is, anything that is coded with the <a> tag, without exception, regardless of whether they have class attributes or not. In the example above, the links are displayed in green without any "decoration" : that is, they are not underlined as they would normally be by default.
- Several other states are available for hypertext links by specifying one of the "pseudo classes" (:hover, :visited, etc.). So "a:hover" only concerns the appearance of links when the user "hovers" their mouse over the link. In the example above, links will become red and underlined whenever a user passes their mouse cursor over the link.
Note that the CSS recommendation CSS 2 indicates that, in order to be sure that styling code rule a:hover is effective, it must be placed after the others.
SPIP hypertext links
You can differentiate graphically between two specific types of link, being those that are internal to your site and those that link to external sites. This is accomplished by specifying definitions for each style, which we recommend that you customise to your own taste:
- a.spip_in applies to links that are internal to your website. For example:
The link [->article2433] generates an internal link to article 2433 of your site, thus: SPIP and Style Sheets (CSS)
- a.spip_out applies to links that are external to your website. For example :
The link
[uZine->http://www.uzine.net]displays the external link in this way: uZine
- a.spip_url applies to URL addresses that are converted into hypertext links. For example:
The link [->http://www.uzine.net] displays the address of the URL and creates a hypertext link: http://www.uzine.net
- a.spip_glossaire applies to links to an external glossary (currently the online encyclopedia Wikipedia). For example:
The link [?SPIP] generates the following kind of link: SPIP
How not to confuse yourself
Note that for any given hypertext link, several style definitions can or may apply. For example, suppose you specify the following style rules:
a {
color: green;
text-decoration: underline;
}
a.spip_in {
color: orange;
}Internal links (assigned the spip_in class) are coloured orange, but they also inherit the underlining specified by <a>. Any other links, including those not generated by SPIP, will display in green and underlined.
It’s important to note a fundamental property on style sheets at this point: graphical styles are applied in sequence from the most generic to the most specific. This allows you specify a general behaviour for elements and only modify the characteristics for a smaller subset of elements. This cascading inheritance is what gives such great strength to the use of stylesheets in general.
Displaying the current active link
From SPIP
1.7.1 onwards, you can also change the appearance of the current link amongst a list of links (as in a menu of articles in the same rubrique/section) that makes it easily visible to the user which page they are currently visiting. The stylesheet rule used to specify such "current" links is : .on. See article: «Highlighting an item in a list» for more details on this.