Account services

The tool ribbon

We call the banner you see at the top on every Eionet website the tool ribbon. It contains generic tools for the page. The links to the left go to other of EEA's networks. The links to the right are diverse operations, such as login, search, print, toggle fullscreen. The developer of the website has some freedom to choose the operations that are meaningful for that site. There are no <img> tags here. All the icons you see are CSS backgrounds. If you want to provide your own the dimensions must be 16x16 pixel. A tool is an <a> with <span> around the text. If you want to show an icon with the text, you just set left padding to 18px, and a non-repeating background image. If you want to show only an icon, then it is a little trickier. We use the Fahrner Image Replacement (FIR), and the <span> is used to remove the display of the text. The <a> must have a title attribute. It will be shown as a tooltip if the user hovers over the link, and when FIR is used, this is what a blind user will hear.

Example

<a id="printlink" title="Print this page"
      href="javascript:this.print();"><span>Print</span></a>

Predefined tools

eealink
Shows the EEA logo
loginlink
Shows an icon with an arrow pointing into an opening.
logoutlink
Shows an icon with an arrow pointing out of an opening.
printlink
Shows an icon of a printer. The link must point to the javascript method this.print()
rsslink
Shows an icon of RSS syndication
skiplink
Does not show anything on a screen-based webbrowser, but is used by handheld devices to skip the navigation and go directly to the content of the page. Must be the first link of the leftside tools.
fullscreenlink
Shows an icon of the fullscreen toggle. The actual icon depends on whether the page is in full screen mode or not.
pagehelplink
Shows an icon of a question mark