spacer
EBIEBI Style TemplatesStatic Style TemplatesEdit/Add Centre Content

Static html Template - Edit/Add Centre Content

If you are using a fixed width template the main body section has a width of 645px.

In the source code of your template look for the following comment tags:

<!-- start contents here -->

Paste your main body content html source code in between these comment tags

<!-- end contents here -->

The following are examples of html code you could use between the comment tags. The styles used in these examples will only work if you use the EBI stylesheets contents.css and userstyles.css. We recommend you make absolute links to the EBI stylesheets on your webpages, so any updates we do will be reflected in your pages.
  1. Main Body Text and Links
  2. Example Breadcrumb Navigation
  3. Example First Top Level Heading
  4. Example Second Sub Level Heading
  5. Example Third Sub Level Heading
  6. Example Fourh Sub Level Heading
  7. Example Publication Listing
  8. Example Edit/Add Tables
  9. Example For Text Bold
  10. Example For Text Red Bold
  11. Example For Text Green Bold Small List
  12. Example For Image / Icon To Right Align
  13. Sequence Formatting
  14. Next/Previous Navigation
  15. Lists/Trees in the Contents
  16. Using Flash
  17. Using jquery



1. Main Body Text and Links

The following examples show the main body text, general default links and small links used on the EBI webisite.

Example 1:

Main body text

Example 2:

General Default Link

Example 3:

General Green Bold Link

To use this General Green Bold Link just add the class name "greenbold" to your anchor (href) tag, for example
<a href="#" class="greenbold">General Green Bold Link</a>

Example 4:

Small Link

To use this Small Link just add the class name "smallgreen" to your anchor (href) tag, for example
<a href="#" class="smallgreen">Small Link</a>


CSS Information on Main Body Text and Links:

Main Body Text
  • font-family: Helvetica, Arial, Verdana, sans-serif
  • font-size: 10pt;
  • colour: hex: #000000;
General Default Link: 'link' and 'visited' attribute
  • color: #006666;
  • text-decoration: underline;
General Default Link: 'hover' and 'active' attribute
  • color: #e33e3e;
  • text-decoration: none;
Small Link: 'link' and 'visited' attribute
  • font-size: 8pt;
  • color: #408c8c;
  • text-decoration: underline;
Small Link: 'hover' and 'active' attribute
  • font-size: 8pt;
  • color: #ff3300;
  • text-decoration: none;
Top


2. Example Breadcrumb Navigation

Always start the page content with a breadcrumb navigation. The first link of the breadcrumb should go to the EBI homepage. The subsequent link hierachy can be implemented as you think appropriate.

Example:

EBILink 2Link 3


The following html code can be cut and paste into your template between the <!-- start contents here --> and <!-- end contents here --> comment tags.


Select All


CSS Information on Breadcrumbs:

Breadcrumb Links: 'link' and 'visited' attribute
  • font-size: 8pt;
  • color: #999999;
  • text-decoration: none;
  • background: url(/inc/images/bread_arrow2.gif)
Breadcrumb Links: 'hover' and 'active' attribute
  • font-size: 8pt;
  • color: # e33e3e;
  • text-decoration: underline;
  • background: url(/inc/images/bread_arrow2.gif)
Top


3.Example First Top Level Heading

Use a <h1></h1> tag for your top level heading on each page.

Example:

Demo - My First Top Level Heading


The following html code can be cut and pasted into your template between the <!-- start contents here --> and <!-- end contents here --> comment tags.


Select All


CSS Information on First Top Level Heading:

First Top Level Heading
  • font-size: 11pt;
  • font-weight: bold;
  • color: #006666;
  • padding: 4px;
  • background: #edf6f5;
  • border: 1px solid #d9dadc;
  • margin: 5px 0px 10px 0px; (top right bottom left)
Top


4. Example Second Sub Level Heading

Use a <h2></h2> tag for your second sub level heading on a page.

Example:

Demo - My Second Sub Level Heading


The following html code can be cut and pasted into your template between the <!-- start contents here --> and <!-- end contents here --> comment tags.


Select All


CSS Information on Second Sub Level Heading:

Second Sub Level Heading
  • font-size: 10pt;
  • color: #1f1f1f;
  • padding: 0;
  • background: #ffffff;
  • border-top: 0px;
  • border-right: 0px;
  • border-left: 0px;
  • border-bottom: 1px solid #d9dadc;
  • margin: 25px 0px 5px 0px; (top right bottom left)
Top


5. Example Third Sub Level Heading

Use a <h3></h3> tag for your third sub level heading on a page.

Example:

Demo - My Third Sub Level Heading


The following html code can be cut and pasted into your template between the <!-- start contents here --> and <!-- end contents here --> comment tags.


Select All


CSS Information on Third Sub Level Heading:

Third Sub Level Heading
  • font-size: 9pt;
  • color: #006666;
  • padding: 0;
  • background: #ffffff;
  • border: 0;
  • margin: 5px 0px 5px 0px; (top right bottom left)
Top


6. Example Fourth Sub Level Heading

Use a <h4></h4> tag for your fourth sub-level heading on a page.

Example:

Demo - My Fourth Sub Level Heading


The following html code can be cut and pasted into your template between the <!-- start contents here --> and <!-- end contents here --> comment tags.


Select All


CSS Information on Fourth Sub Level Heading:

Fourth Sub Level Heading
  • font-size: 9pt;
  • color: #1f1f1f;
  • padding: 0;
  • background: #ffffff;
  • border: 0;
  • margin: 5px 0px 5px 0px; (top right bottom left)
Top


7. Example Publication Listing

Publications should be formatted as follows.

Example:

Labarga A., Pilai S., Valentin F., Anderson M. and Lopez R. (2005)
Web services at the European Bioinformatics Institute.
Nucleic Acids Research 33: 25-28.
abstract full-text HTML full-text PDF

The following html code can be cut and pasted into your template between the <!-- start contents here --> and <!-- end contents here --> comment tags.



Select All


CSS Information on Publications:

Publication Authors
  • font-size: 9pt;
  • font-weight: bold;
  • color: #1f1f1f;
  • padding: 0;
  • background: #ffffff;
  • border: 0;
  • margin: 12px 0px 2px 0px; (top right bottom left)
  • clear: left;
Publication Title
  • font-size: 9pt;
  • font-weight: bold;
  • color: #006666;
  • padding: 0;
  • background: #ffffff;
  • border: 0;
  • margin: 2px 0px 2px 0px; (top right bottom left)
Publication Journal
  • font-size: 9pt;
  • font-style: italic;
  • color: #1f1f1f;
  • padding: 0;
  • background: #ffffff;
  • border: 0;
  • margin: 2px 0px 2px 0px; (top right bottom left)
Publication abstract, full-text HTML and full-text PDF
Links: 'link' and 'visited' attribute
  • font-size: 9pt;
  • color: #999999;
  • text-decoration: none;
  • display: inline;
  • padding-left:0px;
  • padding-right:24px;
  • padding-top:0px;
  • padding-bottom:0px;
  • height: 22px;
  • text-align: left;
  • width: auto;
Publication abstract, full-text HTML and full-text PDF
Links: 'hover' and 'active' attribute
  • font-size: 9pt;
  • color: #e33e3e;
  • text-decoration: underline;
  • display: inline;
  • padding-left:0px;
  • padding-right:24px;
  • padding-top:0px;
  • padding-bottom:0px;
  • height: 22px;
  • text-align: left;
  • width: auto;
Publication abstract Links: 'link' and 'visited' attribute
  • background: url(/inc/images/icon_abstract.gif) top right no-repeat;
Publication abstract Links: 'hover' and 'active' attribute
  • background: url(/inc/images/icon_abstract.gif) top right no-repeat;
Publication full-text HTML Links: 'link' and 'visited' attribute
  • background: url(/inc/images/icon_html.gif) top right no-repeat;
Publication full-text HTML Links: 'hover' and 'active' attribute
  • background: url(/inc/images/icon_html.gif) top right no-repeat;
Publication full-text PDF Links: 'link' and 'visited' attribute
  • background: url(/inc/images/icon_pdf.gif) top right no-repeat;
Publication full-text PDF Links: 'hover' and 'active' attribute
  • background: url(/inc/images/icon_pdf.gif) top right no-repeat;
Top


9. Example For Text Bold

Use <b>Information</b>

Example:

Demo - Information
Top


10. Example For Text Red Bold

Use <span class="red_bold">Successful Outcome of the project</span>

Example:

Demo - Successful Outcome of the project
Top


11. Example For Text Green Bold Small List

Use <ul>
<li><a href="/"><b>LINK TO THE EBI</b></a></li>
<li><a href="/"><b>LINK TO THE EBI</b></a></li>
</ul>

Example:

Top


12. Example For Image / Icon Align Right

Use <img src="/Groups/images/logo_es.gif" alt="External Services" class="grouplogo" />

Example:







Top






13. Sequence Formatting


(a) With a <pre> tag. 

CTCCATGAGGTATTTCTTCACATCCGTGTCCCGGCCCGGCCGCGGGGAGCCCCGCTTCATCGCCGTGGGCTACGTGGACG
ACACGCAGTTCGTGCGGTTCGACAGCGACGCCGCGAGCCAGAAGATGGAGCCGCGGGCGCCGTGGATAGAGCAGGAGGGG

Select All

(b) Without a <pre> tag, i.e. in a <span>

CTCCATGAGGTATTTCTTCACATCCGTGTCCCGGCCCGGCCGCGGGGAGCCCCGCTTCATCGCCGTGGGCTACGTGGACG
ACACGCAGTTCGTGCGGTTCGACAGCGACGCCGCGAGCCAGAAGATGGAGCCGCGGGCGCCGTGGATAGAGCAGGAGGGG

Select All



Top


14. Example of Next/Previous Navigation

Select All
Top

15. Lists/Trees in the Contents


You can use several click to open/close lists in the contents of your page. Lists should have a unique ID and not be the ID used for side menus.


bla bla bla bla...


Select All

15. Using Flash


Click here.




























spacer
spacer