Skip to content
Snippets Groups Projects
Commit 291988d8 authored by khawkins98's avatar khawkins98
Browse files

ELIXIR banner: Add options for white background, CDR logo

parent 1e44b3d5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
images/logos/ELIXIR/elixir-cdr.gif 0 → 100644
+ 0
− 0
View file @ 291988d8
images/logos/ELIXIR/elixir-cdr.gif

2.09 KiB

js/elixirBanner.js
+ 11
− 4
View file @ 291988d8
......@@ -7,8 +7,10 @@ function elixirBanner() {
var defaultName = 'This',
defaultDescription = 'This is part of the ELIXIR distributed infrastructure for life-science information.',
basicStylingForNonfoundationSites = '',
defaultLogo = 'https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.2/images/logos/assorted/elixir_kitemark-60px.png',
defaultLink = 'https://www.elixir-europe.org/about-us/why-needed',
defaultColor = 'blue'; // options: orange, grey, green, blue
defaultTextColor = '#fff',
defaultColor = 'blue'; // options: orange, grey, green, blue, none
if (typeof divElixirBanner.dataset.color !== "undefined") {
defaultColor = divElixirBanner.dataset.color;
......@@ -16,10 +18,15 @@ function elixirBanner() {
defaultColor = (defaultColor == 'grey' ? 'rgb(77,77,72)' : defaultColor);
defaultColor = (defaultColor == 'green' ? 'rgb(190,191,50)' : defaultColor);
defaultColor = (defaultColor == 'blue' ? 'rgb(79,138,156)' : defaultColor);
defaultColor = (defaultColor == 'none' ? 'transparent' : defaultColor);
defaultTextColor = (defaultColor == 'transparent' ? '#222' : defaultTextColor); // grey text if background is none
}
if (typeof divElixirBanner.dataset.name !== "undefined") {
defaultName = divElixirBanner.dataset.name;
}
if (divElixirBanner.dataset.useCdrLogo == "true") {
defaultLogo = 'https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/ELIXIR/elixir-cdr.gif';
}
if (typeof divElixirBanner.dataset.description !== "undefined") {
defaultDescription = divElixirBanner.dataset.description;
}
......@@ -78,20 +85,20 @@ function elixirBanner() {
.elixir-ribbon a,
.elixir-ribbon a:active,
.elixir-ribbon a:hover {
color: #fff;
color: `+defaultTextColor+`;
text-decoration: none;
}
.elixir-ribbon a:hover {
opacity: .8;
}
.elixir-ribbon .readmore {
border-bottom: 1px dotted #fff;
border-bottom: 1px dotted `+defaultTextColor+`;
}
.elixir-ribbon h5 {
margin: 0;
}
.elixir-ribbon .elixir-logo-kite {
background: 80% 58% url("https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/assorted/elixir_kitemark-60px.png") no-repeat;
background: 80% 58% url("`+defaultLogo+`") no-repeat;
position: relative;
top: -5px;
margin: 0 1rem -.5rem 0;
......
js/elixirBanner.min.js
+ 1
− 1
View file @ 291988d8
function elixirBanner(){try{var divElixirBanner=document.getElementById("elixir-banner");if(divElixirBanner){var defaultName="This",defaultDescription="This is part of the ELIXIR distributed infrastructure for life-science information.",basicStylingForNonfoundationSites="",defaultLink="https://www.elixir-europe.org/about-us/why-needed",defaultColor="blue";void 0!==divElixirBanner.dataset.color&&(defaultColor="blue"==(defaultColor="green"==(defaultColor="grey"==(defaultColor="orange"==(defaultColor=divElixirBanner.dataset.color)?"rgb(244,125,32)":defaultColor)?"rgb(77,77,72)":defaultColor)?"rgb(190,191,50)":defaultColor)?"rgb(79,138,156)":defaultColor),void 0!==divElixirBanner.dataset.name&&(defaultName=divElixirBanner.dataset.name),void 0!==divElixirBanner.dataset.description&&(defaultDescription=divElixirBanner.dataset.description),void 0!==divElixirBanner.dataset.moreInformationLink&&(defaultLink=divElixirBanner.dataset.moreInformationLink),"true"===divElixirBanner.dataset.useBasicStyles&&(basicStylingForNonfoundationSites="\n .elixir-ribbon {\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n\n .elixir-ribbon .row {\n max-width: 1200px;\n margin: 0 auto 1rem;\n }\n\n .elixir-ribbon .row::before,\n .elixir-ribbon .row::after {\n display: table;\n content: ' ';\n }\n\n .elixir-ribbon h5 {\n font-size: 1.3rem;\n }\n ");var html='\n <div id="elixir-ribbon" class="elixir-ribbon">\n <div class="row">\n <a href="'+defaultLink+'">\n <div class="elixir-logo-kite"></div>\n <h5>\n <span class="elixir-banner-name">'+defaultName+'</span> is part of the ELIXIR infrastructure\n </h5>\n <div id="elixir-banner-info">\n <small>\n <span class="elixir-banner-description">'+defaultDescription+'</span>\n <span class="readmore">Learn more &#8250;</span>\n </small>\n </div>\n </a>\n </div>\n </div>\n\n <style>\n .elixir-ribbon {\n padding: 1rem 0;\n background-color: '+defaultColor+";\n }\n "+basicStylingForNonfoundationSites+'\n .elixir-ribbon,\n .elixir-ribbon h5,\n .elixir-ribbon a,\n .elixir-ribbon a:active,\n .elixir-ribbon a:hover {\n color: #fff;\n text-decoration: none;\n }\n .elixir-ribbon a:hover {\n opacity: .8;\n }\n .elixir-ribbon .readmore {\n border-bottom: 1px dotted #fff;\n }\n .elixir-ribbon h5 {\n margin: 0;\n }\n .elixir-ribbon .elixir-logo-kite {\n background: 80% 58% url("https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/assorted/elixir_kitemark-60px.png") no-repeat;\n position: relative;\n top: -5px;\n margin: 0 1rem -.5rem 0;\n height: 60px;\n width: 60px;\n display: inline-block;\n float: left;\n }\n </style>\n ';divElixirBanner.innerHTML=html}}catch(err){console.log(err)}}elixirBanner();
\ No newline at end of file
function elixirBanner(){try{var divElixirBanner=document.getElementById("elixir-banner");if(divElixirBanner){var defaultName="This",defaultDescription="This is part of the ELIXIR distributed infrastructure for life-science information.",basicStylingForNonfoundationSites="",defaultLogo="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.2/images/logos/assorted/elixir_kitemark-60px.png",defaultLink="https://www.elixir-europe.org/about-us/why-needed",defaultTextColor="#fff",defaultColor="blue";void 0!==divElixirBanner.dataset.color&&(defaultTextColor="transparent"==(defaultColor="none"==(defaultColor="blue"==(defaultColor="green"==(defaultColor="grey"==(defaultColor="orange"==(defaultColor=divElixirBanner.dataset.color)?"rgb(244,125,32)":defaultColor)?"rgb(77,77,72)":defaultColor)?"rgb(190,191,50)":defaultColor)?"rgb(79,138,156)":defaultColor)?"transparent":defaultColor)?"#222":defaultTextColor),void 0!==divElixirBanner.dataset.name&&(defaultName=divElixirBanner.dataset.name),"true"==divElixirBanner.dataset.useCdrLogo&&(defaultLogo="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/ELIXIR/elixir-cdr.gif"),void 0!==divElixirBanner.dataset.description&&(defaultDescription=divElixirBanner.dataset.description),void 0!==divElixirBanner.dataset.moreInformationLink&&(defaultLink=divElixirBanner.dataset.moreInformationLink),"true"===divElixirBanner.dataset.useBasicStyles&&(basicStylingForNonfoundationSites="\n .elixir-ribbon {\n font-family: Helvetica, Arial, FreeSans, 'Liberation Sans', sans-serif;\n }\n\n .elixir-ribbon .row {\n max-width: 1200px;\n margin: 0 auto 1rem;\n }\n\n .elixir-ribbon .row::before,\n .elixir-ribbon .row::after {\n display: table;\n content: ' ';\n }\n\n .elixir-ribbon h5 {\n font-size: 1.3rem;\n }\n ");var html='\n <div id="elixir-ribbon" class="elixir-ribbon">\n <div class="row">\n <a href="'+defaultLink+'">\n <div class="elixir-logo-kite"></div>\n <h5>\n <span class="elixir-banner-name">'+defaultName+'</span> is part of the ELIXIR infrastructure\n </h5>\n <div id="elixir-banner-info">\n <small>\n <span class="elixir-banner-description">'+defaultDescription+'</span>\n <span class="readmore">Learn more &#8250;</span>\n </small>\n </div>\n </a>\n </div>\n </div>\n\n <style>\n .elixir-ribbon {\n padding: 1rem 0;\n background-color: '+defaultColor+";\n }\n "+basicStylingForNonfoundationSites+"\n .elixir-ribbon,\n .elixir-ribbon h5,\n .elixir-ribbon a,\n .elixir-ribbon a:active,\n .elixir-ribbon a:hover {\n color: "+defaultTextColor+";\n text-decoration: none;\n }\n .elixir-ribbon a:hover {\n opacity: .8;\n }\n .elixir-ribbon .readmore {\n border-bottom: 1px dotted "+defaultTextColor+';\n }\n .elixir-ribbon h5 {\n margin: 0;\n }\n .elixir-ribbon .elixir-logo-kite {\n background: 80% 58% url("'+defaultLogo+'") no-repeat;\n position: relative;\n top: -5px;\n margin: 0 1rem -.5rem 0;\n height: 60px;\n width: 60px;\n display: inline-block;\n float: left;\n }\n </style>\n ';divElixirBanner.innerHTML=html}}catch(err){console.log(err)}}elixirBanner();
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment