Development Notes

Back to Site 

POST TEMPLATE

Post Templates are used define the layout of the Post Pages which should be plain Classic Edited Posts (not using the Divi builder) – the Featured image is displayed at the top and must be 1920x960px.

HEADER STYLING

The Script below is inserted in the Divi Builder Template (in a Code Module) to detect scrolling and change the CSS ID of the Header Section from pa-header (transparent) to pa-fixed-header. 

<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".pa-header").addClass("pa-fixed-header");
}
else{
jQuery(".pa-header").removeClass("pa-fixed-header");
}
});
});
</script>

Another Code Module in the Header Section styles its background (which by default should have no colour defined).

We go from Transparent to Ginger on Desktop and completely hide Menu on mobile.

<style>
/*set the defautl background color of the header section*/
.pa-header {
background: transparent!important;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}

/*set the background color of the fixed header when scrolling*/
.pa-fixed-header {
background-color: #E89020!important;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
OR on Tablet & Mobile
.pa-fixed-header {
display:none!important;
}
</style>

POST META TEXT

Author and Date is done with Text Modules containing Dynamic text but this isn’t working for the Category so we might need different templates for each category.

SOCIAL MEDIA ICONS

I have added the following code to the Module’s Custom CSS to keep all the icons on one line:

width: 16% !important;
margin: 0 !important;
clear: none !important;

CATEGORY PAGE TEMPLATE

To display the blog posts nicely we have to use CSS Grid

So the Blog module has CSS Class dl-blog-module1 and the following code in the Divi Options CSS will create the grid.

.dl-blog-module1 .et_pb_ajax_pagination_container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width:980px) {
.dl-blog-module1 .et_pb_ajax_pagination_container {
grid-template-columns: repeat(2, 1fr);
}
.dl-blog-module1 .et_pb_ajax_pagination_container>div {
grid-column: span 3;
}
}
media (max-width:600px) {
.dl-blog-module1 .et_pb_ajax_pagination_container {
grid-template-columns: repeat(2, 1fr);
}
.dl-blog-module1 .et_pb_ajax_pagination_container>div {
grid-column: span 2;
}
}
@media (max-width:460px) {
.dl-blog-module1 .et_pb_ajax_pagination_container {
grid-template-columns: repeat(1, 1fr);
}
.dl-blog-module1 .et_pb_ajax_pagination_container>div {
grid-column: span 1;
}
}

Logo Carousel

The CSS to create the scrolling carousel of logos is in the Page Settings >Advanced >Custom CSS
All the images are duplicated so we have a stack of 28 image modules (14 logos)
Changing the number of logos (image modules) will require a change in the code:

:root {
--ds-module-number: 28; 
/*This is the TOTAL number of modules, so if you have 14 logos, this number should be 28*/

Flex Grid on the Careers Page

The Image Grid for the careers page uses Flex-Grid to create the layout. The CSS for the grid layout is in the Page’s Custom CSS (see below).
Pairs of TEXT modules having the same CSS class (e.g myimage4) lie on top of each other. By setting the Opacity of the two modules we can toggle [on hover] which one appears – set in the Filter settings for the two modules.

Background-Module = 0% opacity on hover and Overlay-Module = 100% on hover

.myimage1 {grid-area:myimage1;}
.myimage2 {grid-area:myimage2;}
.myimage3 {grid-area:myimage3;}
.myimage4 {grid-area:myimage4;}
.myimage5 {grid-area:myimage5;}
.myimage6 {grid-area:myimage6;}
.myimage7 {grid-area:myimage7;}
.myimage8 {grid-area:myimage8;}
.dl-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-areas: 
"myimage1 myimage2 myimage2"
"myimage3 myimage2 myimage2"
"myimage4 myimage4 myimage5"
"myimage4 myimage4 myimage6"
;
grid-gap:4px;
}
@media (max-width:767px) {
.dl-grid {
display:grid;
grid-template-columns:1fr ;
grid-template-areas: 
"myimage1"
"myimage2"
"myimage3"
"myimage4"
"myimage5"
"myimage6"
;
grid-gap:4px;
}
}

end