Side Navigation

Delta Setup

DELTA DEMO SITE

SITE.CSS

/* GLOBAL SITE CSS - ADD CSS TO AFFECT THE WHOLE SITE */

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

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

}

*#dm div.dmNewParagraph a,

*#dm div.dmCustomHtml a,

*#dm div.dmBlockElement 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 { color:#333333 !important; text-decoration: none !important; font-weight: 700 !important; }


/* BLOG WIDGET PADDING */


#dm [list-layout=layout4][text-box-padding=true] .postArticle .postText { padding: 30px 30px 0 30px !important; }

#dm [blog-posts-feature-flag=true][text-box-padding=true]:not([list-layout=list_slider]) .postTextContainer .readMore { padding: 15px 30px 30px 30px !important; }


/*ANGLE TOP */

.svgAngleTopR { position: absolute; display: block; width:100%; height: 50px; left:0; top: -1px; }

.svgAngleTopR .shape-fill { fill: #ffffff; } 

.svgAngleTopL { position: absolute; display: block; width:100%; height: 50px; left:0; top: -1px; transform: rotateY(180deg); }

.svgAngleTopL .shape-fill { fill: #ffffff; } 


/* ANGLE BOTTOM */

.svgAngleBtmL { position: absolute; display: block; width:100%; height: 50px; left:0; bottom: -1px; transform: rotate(180deg) rotateY(180deg); }

.svgAngleBtmL .shape-fill { fill: #ffffff; } 

.svgAngleBtmR { position: absolute; display: block; width:100%; height: 50px; left:0; bottom: -1px; transform: rotate(180deg); }

.svgAngleBtmR .shape-fill { fill: #ffffff; } 


/* TOP OF MAP */

div.u_####### .svgAngleTopL .shape-fill { fill: #e92c0c; }


/* HIDE INTERNAL FOOTER */

#dm .dm-layout-home div.u_####### { display:none; }

  • To change the angle colour above the map change the "fill" hex colour under "TOP OF MAP"
  • Update the two instances of "div.u_#######" code above with the map row and the internal footer feature row.

SETTINGS > BODY end HTML

<script src="https://zauaewebmanager.z8.web.core.windows.net/scripts/sliders/bxslider/jquery.bxslider.min.js"></script>



<script>

 $('<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" class="svgAngleTopL" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path></svg>').appendTo('.angleTopL');

 $('<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" class="svgAngleBtmL" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path></svg>').appendTo('.angleBtmL');

 

 $('<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" class="svgAngleTopR" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path></svg>').appendTo('.angleTopR');

 $('<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" class="svgAngleBtmR" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path></svg>').appendTo('.angleBtmR');

</script>


SETTINGS > Head HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"/>