diff --git a/css/compliance-legacy-compatibility.css b/css/compliance-legacy-compatibility.css
index ae2cea2da141d37fdb585bf7205fbeb8504771e8..44fb44fc633ddf59c0860d629b6b2c198c8582f3 100644
--- a/css/compliance-legacy-compatibility.css
+++ b/css/compliance-legacy-compatibility.css
@@ -314,7 +314,7 @@ div.highlight {
margin-left: 9px;
margin-right: 9px;
}
- body.subsite-pdbe div#local-masthead {
+ body.subsite-pdbe div.masthead {
background: #d8e5d8 url(/sites/ebi.ac.uk/themes/custom/ebicompliance/images/PDBe-banner_mono.png) top right no-repeat !important;
}
body.subsite-pdbe div#local-title h1, body.subsite-pdbe div#local-title p, body.subsite-pdbe div#local-title a {
@@ -329,10 +329,10 @@ div.highlight {
-moz-hyphens: auto;
hyphens: auto;
}
- body.subsite-ega #local-masthead, body.subsite-ega.section-about #local-masthead, body.subsite-ega.front #local-masthead {
+ body.subsite-ega .masthead, body.subsite-ega.section-about .masthead, body.subsite-ega.front .masthead {
background: #156765 url(/sites/ebi.ac.uk/themes/custom/ebicompliance/images/EBI_banner_Homepage.jpg) top right no-repeat;
}
- body.subsite-eva #local-masthead, body.subsite-eva.section-about #local-masthead, body.subsite-eva.front #local-masthead {
+ body.subsite-eva .masthead, body.subsite-eva.section-about .masthead, body.subsite-eva.front .masthead {
background: #156765 url(/sites/ebi.ac.uk/themes/custom/ebicompliance/images/EBI_banner_Homepage.jpg) top right no-repeat;
}
.page-industry-private-projects div.caption p {
@@ -714,10 +714,10 @@ div.highlight {
background-color: #bfdcee;
border-bottom: 0px none;
}
- body.subdomain-intranet.front #local-masthead, body.subdomain-intranet #local-masthead {
+ body.subdomain-intranet.front .masthead, body.subdomain-intranet .masthead {
background: #156765 url(/sites/ebi.ac.uk/themes/custom/ebicompliance/images/EBI_banner_Intranet.jpg) top right no-repeat;
}
- body.subdomain-rdf #local-masthead, body.subsite-rdf #local-masthead {
+ body.subdomain-rdf .masthead, body.subsite-rdf .masthead {
background: #60bdc4 url(/sites/ebi.ac.uk/themes/custom/ebicompliance/images/EBI_SERVICES_Banner.jpg) top right no-repeat;
}
div.caption-inner {
@@ -1152,7 +1152,7 @@ div.highlight {
.field-name-field-relatied-stories, .field-name-field-url {
padding: 0 9px;
}
- #local-masthead nav div+div {
+ .masthead nav div+div {
display: none;
}
a.no-underline {
diff --git a/css/ebi-global-drupal.css b/css/ebi-global-drupal.css
index 70589f943e51b2e0f40cf302dbfc4a5cfa6a2ff7..308e382ac75dd25c20f8c0562ace88033bed1aed 100644
--- a/css/ebi-global-drupal.css
+++ b/css/ebi-global-drupal.css
@@ -9,9 +9,9 @@
.button-group li a.button.secondary:hover { background: #333; color: #fff; }
/* Don't underline active tabs, or highligh active trails */
-#local-masthead nav ul li a.active {border-bottom: none;background: #fff;color: #333;}
-#local-masthead ul li.active-trail a.active { background: none; color: #fff; font-weight: 400; border-right: 1px solid #fff; }
-#local-masthead ul li.active a.active { background: #fff; color: #333; font-weight: 600; border-right: none; }
+.masthead nav ul li a.active {border-bottom: none;background: #fff;color: #333;}
+.masthead ul li.active-trail a.active { background: none; color: #fff; font-weight: 400; border-right: 1px solid #fff; }
+.masthead ul li.active a.active { background: #fff; color: #333; font-weight: 600; border-right: none; }
/* Pad top of content */
main.row { margin-top: .5rem; }
diff --git a/css/ebi-global.scss b/css/ebi-global.scss
index 8510f83840efd29644b7045c40190013caa2a189..519c084ce1f9b7a10824b38e6542f8b2305e9fab 100644
--- a/css/ebi-global.scss
+++ b/css/ebi-global.scss
@@ -62,7 +62,7 @@ a.button, a.button:visited { color: $ebi-colour-light; }
/* Colour - defaults to be reset by custom stylesheet
===================================================*/
-div#global-masthead { background-color: #333; }
+div.masthead-black-bar { background-color: #333; }
h1, h2, h3, h4, h5, h6 { color: $body-font-color; }
h4 { color: $ebi-colour-medium-grey; }
@@ -113,19 +113,19 @@ a:active {
nav a,
nav a:hover { border-bottom: none; }
- #local-masthead {
+ .masthead {
// highlight links in the textual area of the local masthead
#local-title .columns a { border-bottom: 1px dotted rgb(255,255,255); }
- #local-masthead #local-title .columns a:hover { border-bottom: none; }
+ .masthead #local-title .columns a:hover { border-bottom: none; }
}
/* Global menu styling */
- #local-masthead nav ul#global-nav.menu li { border-right: none; }
+ .masthead nav ul#global-nav.menu li { border-right: none; }
/* Mobile logo */
@media screen and (max-width: 40em) {
- #local-masthead nav ul#global-nav.menu li.home { display: none; }
- #local-masthead nav ul#global-nav.menu li.home-mobile a {
+ .masthead nav ul#global-nav.menu li.home { display: none; }
+ .masthead nav ul#global-nav.menu li.home-mobile a {
display: block;
height: 50px;
width: 67px;
@@ -136,13 +136,13 @@ a:active {
}
}
@media screen and (min-width: 40em) {
- #local-masthead nav ul#global-nav.menu li.home-mobile { display: none; }
+ .masthead nav ul#global-nav.menu li.home-mobile { display: none; }
}
- /* Disable global-masthead search when told */
- body.no-global-search #global-masthead ul#global-nav li.search { display: none; }
+ /* Disable masthead-black-bar search when told */
+ body.no-global-search .masthead-black-bar ul#global-nav li.search { display: none; }
- #global-masthead {
+ .masthead-black-bar {
ul#global-nav li a:hover,
ul#global-nav li a:active,
ul#global-nav li a:focus,
@@ -223,7 +223,7 @@ a:active {
}
- header .masthead {
+ header .masthead-inner {
padding-top: 2.5rem;
color: #fff;
}
@@ -237,7 +237,7 @@ a:active {
color: #fff;
}
- // END #local-masthead
+ // END .masthead
/* EMBL Dropdwon styles */
#embl-dropdown {
@@ -264,26 +264,26 @@ a:active {
/* Local masthead secondary links on mobile */
@media screen and (max-width: 39.9375em) {
- #local-masthead ul.menu.dropdown.float-right {
+ .masthead ul.menu.dropdown.float-right {
/* clear: both;
position: relative;
height: 0;*/
}
- #local-masthead ul.menu.dropdown.float-right > li {
+ .masthead ul.menu.dropdown.float-right > li {
margin-bottom: -50px;
}
- #local-masthead ul.menu.dropdown.float-right a {
+ .masthead ul.menu.dropdown.float-right a {
/*color: $ebi-colour-dark-grey;*/
}
- body #local-masthead ul.menu.dropdown.float-right > .has-submenu.is-down-arrow > a::after {
+ body .masthead ul.menu.dropdown.float-right > .has-submenu.is-down-arrow > a::after {
/* border-color: $ebi-colour-dark-grey transparent transparent;*/
}
- #local-masthead nav ul#global-nav.menu li { float: none; display: inline-block; }
- #local-masthead nav ul#global-nav.menu li.home-mobile { float: left; }
+ .masthead nav ul#global-nav.menu li { float: none; display: inline-block; }
+ .masthead nav ul#global-nav.menu li.home-mobile { float: left; }
ul#global-nav { text-align: right; }
@@ -310,7 +310,7 @@ a:active {
}
/* Local menu styling */
- #local-masthead {
+ .masthead {
background-repeat: no-repeat;
background-position: 100% 82%;
background-size: cover;
@@ -336,7 +336,7 @@ a:active {
nav { font-size: .9rem; clear: both; }
- .masthead nav i { line-height: .9em; font-size: .8em; margin-top: -3px; }
+ .masthead-inner nav i { line-height: .9em; font-size: .8em; margin-top: -3px; }
nav ul.menu li { border-right: 1px solid $ebi-colour-light; float: left;
margin-left: 0; /* compliance compatibility */
}
@@ -348,14 +348,14 @@ a:active {
div#local-title { margin-bottom: 1rem; }
- #local-masthead.meta-background-image {
+ .masthead.meta-background-image {
background-position: 100% 100%;
background-size: initial;
}
/* tweak sticky behaviour */
- div#local-masthead { width: 100%; position: static; -webkit-transform: none; transform: none; }
- div#local-masthead.sticky.is-stuck { position: fixed; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
+ div.masthead { width: 100%; position: static; -webkit-transform: none; transform: none; }
+ div.masthead.sticky.is-stuck { position: fixed; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
input#local-searchbox,
@@ -368,14 +368,14 @@ a:active {
#content {
padding: 0.5rem 0 1.5rem;
}
- body.section-about #local-masthead {
+ body.section-about .masthead {
background-color: $ebi-colour-petrol;
}
- body.section-industry #local-masthead {
+ body.section-industry .masthead {
background-color: $ebi-colour-industry;
}
body.section-research {
- #local-masthead {
+ .masthead {
background-color: $ebi-colour-light-green;
}
#local-title h1,
@@ -384,10 +384,10 @@ a:active {
color: #FFF;
}
}
- body.section-services #local-masthead {
+ body.section-services .masthead {
background-color: $ebi-colour-services;
}
- body.section-training #local-masthead {
+ body.section-training .masthead {
background-color: $ebi-colour-training;
}
body.section-training #local-title {
@@ -397,7 +397,7 @@ a:active {
color: #222;
}
}
- body.section-home #local-masthead {
+ body.section-home .masthead {
background-color: $ebi-colour-petrol;
}
@@ -542,7 +542,7 @@ a:active {
@media screen and (max-width: 53em) {
.embl-selector .button { width: 0px; padding-right:0; overflow: hidden;}
.embl-selector .button:after { display: none; }
- #local-masthead nav ul#global-nav.menu li a { padding-right: .5rem; padding-left: .5rem;}
+ .masthead nav ul#global-nav.menu li a { padding-right: .5rem; padding-left: .5rem;}
}
@@ -892,8 +892,8 @@ a.more:after {
@media print {
a, a:visited { border-bottom: none; }
#skip-to,
- #global-masthead nav,
- #local-masthead nav,
+ .masthead-black-bar nav,
+ .masthead nav,
form#local-search,
#global-footer,
#search_ebi,
diff --git a/css/theme-ebi-industry.css b/css/theme-ebi-industry.css
index a15c1a5f665fd0960b3ebef08d546d44e13f48d9..b7c2ad23fae7fa2c1c79a6ef283fd0202347da5c 100644
--- a/css/theme-ebi-industry.css
+++ b/css/theme-ebi-industry.css
@@ -43,9 +43,9 @@ a.tag:hover { color: #fff; }
color: #fff;
background: #666; }
-div#local-masthead { background-color: rgb(0,134,180); }
+div.masthead { background-color: rgb(0,134,180); }
/* Menu hover triangle colour */
-#local-masthead nav ul#global-nav.menu li a:hover:after { border-bottom-color: rgb(0,134,180); }
+.masthead nav ul#global-nav.menu li a:hover:after { border-bottom-color: rgb(0,134,180); }
/* end */
diff --git a/css/theme-ebi-research.css b/css/theme-ebi-research.css
index e3803b00282f9ad0ef8d719ad37555d68a6c074a..3dd28bddb24bcfb9f2e11c3a435ad9faff4f3e81 100644
--- a/css/theme-ebi-research.css
+++ b/css/theme-ebi-research.css
@@ -43,6 +43,6 @@ a.tag:hover { color: #fff; }
color: #fff;
background: #666; }
-div#local-masthead { background-color: rgb(109,171,73); }
+div.masthead { background-color: rgb(109,171,73); }
/* end */
diff --git a/css/theme-ebi-services-about.css b/css/theme-ebi-services-about.css
index e28be0ae38189cd62fd6ba23c782ef46ca5a8097..3a87144c9c896e578bbf986fc96c92315e876c7e 100644
--- a/css/theme-ebi-services-about.css
+++ b/css/theme-ebi-services-about.css
@@ -43,6 +43,6 @@ a.tag:hover { color: #fff; }
color: #fff;
background: #666; }
-div#local-masthead { background-color: rgb(56,145,152); }
+div.masthead { background-color: rgb(56,145,152); }
/* end */
diff --git a/css/theme-ebi-training.css b/css/theme-ebi-training.css
index 97e9f6381f0a7dcd5f3b58fc8481a619d9b1260e..b4e0ec0e110a216c16f5c9e577012bc545c8f8d7 100644
--- a/css/theme-ebi-training.css
+++ b/css/theme-ebi-training.css
@@ -44,7 +44,7 @@ a.tag:hover { color: #fff; }
color: #fff;
background: #666; }
-div#local-masthead { background-color: rgb(233,180,0); }
+div.masthead { background-color: rgb(233,180,0); }
body main.row { margin-top: 1.5rem; }
body .form-checkboxes .form-item,
diff --git a/css/theme-embl-petrol.css b/css/theme-embl-petrol.css
index 49a2784a7e0b3f32f21cb3863ac2478f6532a90f..8c915e4fb35a5cb471fbfa839d1592c29af4168a 100644
--- a/css/theme-embl-petrol.css
+++ b/css/theme-embl-petrol.css
@@ -43,6 +43,6 @@ a.tag:hover { color: #fff; }
color: #fff;
background: #666; }
-div#local-masthead { background-color: rgb(0,124,130); }
+div.masthead { background-color: rgb(0,124,130); }
/* end */
diff --git a/css/theme-light.css b/css/theme-light.css
index 6a041021f78d1dbcaa19de4d02a5569b79bd00b6..4782f8fc1e7fbb8f271117e07cd42c8d8ee7eadd 100644
--- a/css/theme-light.css
+++ b/css/theme-light.css
@@ -2,7 +2,7 @@
Colour palette: Light
This theme is based off theme-embl-petrol.css but notably adds the section:
"white on light masthead stlying"
- to allow for a local-masthead menu that is dark text on white.
+ to allow for a masthead menu that is dark text on white.
For more background, see: https://github.com/ebiwd/EBI-Framework/issues/34
*/
@@ -48,13 +48,13 @@ a.tag:hover { color: #fff; }
color: #fff;
background: #666; }
-div#local-masthead {background-color: #eee;}
+div.masthead {background-color: #eee;}
/* white on light masthead stlying */
-#local-masthead nav ul.menu li { border-right-color: #EEE; }
-#local-masthead h1, #local-masthead h4, #local-masthead p, #local-masthead a,
-#local-masthead .masthead .menu > li > a { color: #666; }
-#local-masthead .masthead .menu > li > a:hover { color: rgb(0,124,130); }
-#local-masthead .masthead .menu > li.active-trail > a { background: rgb(0,124,130);; color: #fff }
+.masthead nav ul.menu li { border-right-color: #EEE; }
+.masthead h1, .masthead h4, .masthead p, .masthead a,
+.masthead .masthead-inner .menu > li > a { color: #666; }
+.masthead .masthead-inner .menu > li > a:hover { color: rgb(0,124,130); }
+.masthead .masthead-inner .menu > li.active-trail > a { background: rgb(0,124,130);; color: #fff }
/* end */
diff --git a/css/theme-pdbe-green.css b/css/theme-pdbe-green.css
index c20fbe0803f5f05cd6d8e642585eccf73d884ec9..78780da9a5cb2390ce5648ec7062b34a29fd489a 100644
--- a/css/theme-pdbe-green.css
+++ b/css/theme-pdbe-green.css
@@ -43,6 +43,6 @@ a.tag:hover { color: #fff; }
color: #fff;
background: #666; }
-div#local-masthead { background-color: rgb(116,179,96); }
+div.masthead { background-color: rgb(116,179,96); }
/* end */
diff --git a/css/theme-template.css b/css/theme-template.css
index 9aa5f48a743ef4fff95479354b94e7a268c05d7e..cf30113ea1185b71fecfb8fd30457f3cf0122e12 100644
--- a/css/theme-template.css
+++ b/css/theme-template.css
@@ -44,6 +44,6 @@ a.tag:hover { color: #fff; }
color: #fff;
background: #666; }
-div#local-masthead { background-color: rgb(0,124,130); }
+div.masthead { background-color: rgb(0,124,130); }
/* end */
diff --git a/js/injectEBIFramework.js b/js/injectEBIFramework.js
index d6cd4f9ea9499ac2061d7cfbd1413207f5b0b325..4c9a0c2f5da8e706cd4bd8772610814d5fc4cf10 100644
--- a/js/injectEBIFramework.js
+++ b/js/injectEBIFramework.js
@@ -114,9 +114,9 @@ function injectEBIFramework() {
'</ul>' +
'</div>' +
'<div>' +
- '<div id="local-masthead">' +
+ '<div id="masthead" class="masthead">' +
'<header>' +
- '<div id="global-masthead" class="clearfix">' +
+ '<div id="masthead-black-bar" class="clearfix masthead-black-bar">' +
'<!--This has to be one line and no newline characters-->' +
'<a href="//www.ebi.ac.uk/" title="Go to the EMBL-EBI homepage"><span class="ebi-logo"></span></a>' +
'<nav>' +
@@ -139,7 +139,7 @@ function injectEBIFramework() {
'<div class="input-group-button">' +
'<input type="submit" name="submit" value="Search" class="button">' +
'<input type="hidden" name="db" value="allebi" checked="checked">' +
- '<input type="hidden" name="requestFrom" value="global-masthead" checked="checked">' +
+ '<input type="hidden" name="requestFrom" value="masthead-black-bar" checked="checked">' +
'</div>' +
'</div>' +
'</fieldset>' +
@@ -154,7 +154,7 @@ function injectEBIFramework() {
'</div>' +
'</nav>' +
'</div>' +
- // '<div class="masthead row">' +
+ // '<div class="masthead-inner row">' +
// '<!-- local-title -->' +
// '<div class="columns medium-7" id="local-title">' +
// '<h1><a href="//ebiwd.github.io/EBI-Pattern-library" title="Back to EBI Pattern library homepage">EMBL Weekly news dashbaord</a></h1>' +