Guide to CSS Used on mshsvt.org

These are the CSS classes that have been added to the “Additional CSS” feature under Appearance-Customize.

CSS that Works “Under the Hood”

Controls the appearance of the Main Navigation Menu

.main-navigation a {
text-decoration: underline;
}

.main-navigation a:hover {
text-decoration: none;
}

.main-navigation a:active{
text-decoration: none;
}

These add space above the three Header levels when using anchor links. Without the space the content is partially obscured by the Secondary Navigation Menu.

h1[id] {
scroll-margin-top: 500px;
}

h2[id] {
scroll-margin-top: 200px;
}

h3[id] {
scroll-margin-top: 200px;
}

These control the styling of the Secondary Navigation Menus at the top of each page.

.secondary-navigation {
position: -webkit-sticky;
position: sticky;
top: 7rem;
height: 5rem;
margin-bottom: 1em;
padding-top: 1.5em;
}

body .secondary-navigation .main-nav ul li[class=”current-menu-“] > a:hover, body .secondary-navigation .main-nav ul li[class=”current-menu-“].sfHover > a {
color: #A43D23;
text-decoration:none;
}

.secondary-navigation ul {
background-color: #F5F2EA !important;
text-decoration:underline;
}

These control the styling of Envira captions and links within them.

.envira-caption {
font-size: 1em !important;
color: #000 !important;
opacity: 1 !important;
font-weight: 500 !important;
text-align: left !important;
}
.envira-caption a {
font-size: 1em !important;
color: #000 !important;
opacity: 1 !important;
font-weight: 500 !important;
text-decoration:underline;
}

.envira-caption a:hover {
font-size: 1em !important;
color: #A43D23 !important;
opacity: 1 !important;
font-weight: 500 !important;
text-decoration:none;
}

These correct an issue with the default buttons when a PDF is added with a File Block, such as the latest issue of the Newsletter.

.wp-block-file__button,
.wp-block-file__button:visited {
background-color: #01605A;
color: #ffffff !important;
border-radius: 0;
padding: 0.5em 1.5em 0.6em 1.5em;
}

.wp-block-file__button:hover,
.wp-block-file__button:active,
.wp-block-file__button:focus {
background-color: #000;
color: #ffffff;
}

CSS Classes Users can Add Under the Advance Tab

These override the default styling for links when white text is used against a dark background, such as in the Fat Footer. If a user wishes to add links over a dark background, the need to add “whitelink” to the “ADDITIONAL CSS CLASS(ES)” box under the Advanced tap for that block.

.whitelink a {
color: #ffffff;
text-decoration: underline;
}
.whitelink a:visited {
color: #ffffff;
text-decoration: underline;
}
.whitelink a:hover {
color: #EEE3B2;
text-decoration: none;
}
.whitelink a:focus{
color: #DBDd40;
text-decoration: underline;
}

This works with WordPress blocks that are don’t have the controls of the GenerateBlocks elements. It closes the gap between an above and below element. Add “lessbottom” to the “ADDITIONAL CSS CLASS(ES)” box under the Advanced tap for that block.

.lessbottom {
margin-bottom: 0!important;
}

This works with WordPress blocks that are don’t have the controls of the GenerateBlocks elements. It will make a background color 40% transparent. Add “transparent” to the “ADDITIONAL CSS CLASS(ES)” box under the Advanced tap for that block.

.transparent {
background: hsla(0, 0%, 0%, 0.4);
}