Side Navigation

CSS to Target Different Elements


To be added to the sites.css


Template width to 1500px

@media screen and (min-width:1200px) {

  .rows-1200 .dmRespDesignRow, .rows-1200 .dmRespRow:not(.fullBleedMode) .dmRespColsWrapper { max-width: 1500px }

}


Class to bold the link styles.


*#dm div.dmNewParagraph a,

*#dm div.dmCustomHtml a,

*#dm div.dmBlockElement a,

*#dm div.dmCustomWidget a { text-decoration: none !important; font-weight: 700 !important; -webkit-transition: color 0.4s ease-in !important; -o-transition: color 0.4s ease-in !important; outline: 0 !important; }


*#dm div.dmCustomHtml a:hover,

*#dm div.dmNewParagraph a:hover, 

*#dm div.dmBlockElement a:hover,

*#dm div.dmCustomWidget a:hover { text-decoration: none !important; font-weight: 700 !important; }


Add this below as an addition if you need a link colour in a HTML widget.

*#dm div.dmCustomHtml a

*#dm div.dmCustomHtml a:hover


Breadcrumbs

#dm nav[aria-label="Breadcrumbs"].dmBlockElement a:visited { color:#ffffff !important; }


Classes to start a line of CSS to target different sizes.

DESKTOP

.dmDesktopBody

TABLET

.dmTabletBody 

MOBILE

.dmMobileBody


Target Header/Footer container class.

HEADER

.dmHeaderContainer

FOOTER

.dmFooterContainer


Target H tags to override.

#dm div.dmLayoutWrapper .dmNewParagraph h1, 

#dm div.dmLayoutWrapper .dmNewParagraph h2, 

#dm div.dmLayoutWrapper .dmNewParagraph h3, 

#dm div.dmLayoutWrapper .dmNewParagraph h4, 

#dm div.dmLayoutWrapper .dmNewParagraph h5, 

#dm div.dmLayoutWrapper .dmNewParagraph h6 { font-weight:300; }


CSS class to target inside the editor.

body.bodyInsideD1


Fix accordion padding (expandable useful links etc)

.plusMinus .accordion-title { padding:10px 20px !important; }