EBI Framework

Affiliates

Most services require an area to place information and logos from your sponsors/affiliates/collaborators/endorsers. To ensure consistency across EMBL-EBI sites and services we work within the page structure guidance and are mindful that display of these logos and information is consistent and understandable while keeping them visible but not obtrusive to the core reason a user visists a site: to use the service itself.

Our sites often show a number of relationships with outside entities:

Parent organisation

For EMBL-EBI compliant sites the parent organisation (EMBL-EBI) shows in #global-masthead on the right side.

Funders & collaborators

These logos should be placed in the #local-footer, you can see an example in this page's footer.

Endorsement affiliate

This relationshop can be highlighted in one of two places on a website, the top right or the local footer. ELIXIR -- as demonstrated in the top right and banner below -- is an example of an endorsement relationship that applies to some EMBL-EBI services.

Which placement (top right or lower banner) you should use will likely depend on the structure of your service. For services that use the breadcrumb, it may be appropriate for this badge to appear on most pages. If you use the lower banner, you may wish to limit its showing to your service homepage and the about pages.

Not sure if you have an endorsement affiliate?

• The logo will make the user feel reassured about the sustainability and quality of the current site or resource.
• An objective is to promote the a unifying entity.
• When the user clicks on the graphic, they should learn something about what the affiliated organisation is.
• They are quite rare and if you do have an endorsing affiliate, it's unlikely to be more than one.

We also recommend that services have an /about/relationships page. Such as page creates space to explain the nuance of any relationships, while also acting as truth about how the service functions with other parties.

For questions about how best to integrate your relationships, you can reach out to the Web Development team or the Web Guidelines Committee.

ELIXIR Banner

Words on when to use it go here (COMING SOON). For identified EMBL-EBI services that are part of the ELIXIR network, this will be added by default through the footer.js include.

If you need to tweak the apperance, either background colours or to insert your site or service name, you can do so with local CSS:

/* to change the background colour */
.elixir-ribbon { background:   rgb(244,125,32); /* elixir orange */ }
.elixir-ribbon { background:   rgb(77,77,72); /* elixir grey */ }
.elixir-ribbon { background:   rgb(190,191,50); /* elixir green */ }
.elixir-ribbon { background:   rgb(79,138,156); /* elixir blue shade (default) */ }
/* to use a custom name in "*THIS* is part of the ELIXIR infrastructure" */
.elixir-banner-default-name { display: none; }
.elixir-banner-custom-name:before { content: "MY WORDS HERE"; }