Break Points

We now have multiple break points setup on the template

Please keep in mind if you want an element hidden below 1024px, you can just use the hide-desktop-below class

@media (max-width: 768px) {
.hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-above-mobile {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hide-below-desktop {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .hide-desktop {
    display: none !important;
  }
}


@media (max-width: 1200px) {
  .hide-below-large {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .hide-large {
    display: none !important;
  }
}

Wrappers

FTP Location: /public_html/templates/frontend/css/template.css
Example: ad006.staging.adtorqueedge.com/about

There are 3 main wrappers setup by default that can be used and should cover you for most situations.

Generally the top-padding and bottom-padding is all that needs to be edited for the wrappers, try to keep this consistent throughout all your sections. left-padding and right-padding doesn't need to be changed but considered when working out the intital width of your website. For example if the designs with is 1400px, left-padding and right-padding is 50px on desktop so your width is 1500px;

wrapper - Should be the website main width set for content (max-width:1400px)
sml-wrapper - Generally used when there isn't much copy provided or on forms.
lrg-wrapper - Mainly used on homepage sections and Menu/Footer.
full-Wrapper - Used when you want the section to be the full width of the screen

<div class="wrapper"></div>
<div class="sml-wrapper"></div>
<div class="lrg-wrapper"></div>
<div class="full-wrapper"></div>

.wrapper, .sml-wrapper, .lrg-wrapper {
  padding: 40px 30px;
}

.full-wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
}

.wrapper {
  max-width: 1540px;
}

.sml-wrapper {
  max-width: 1000px;
}

.lrg-wrapper {
  max-width: 1900px;
}

/* DESKTOP STYLES
   ========================================================================== */
@media (min-width: 1025px) {

.wrapper, .sml-wrapper, .lrg-wrapper {
  padding: 80px 50px;
}

.full-wrapper {
  padding-top: 80px;
  padding-bottom: 80px;
}

}

Footer Menu Items

Codes to call Footer Menu items

<?php html5blank_nav(); ?>
<?php html5blank_footer(); ?>
<?php html5blank_purchasing(); ?>
<?php html5blank_aftersales(); ?>
<?php html5blank_company(); ?>
<?php html5blank_footer_vehicles(); ?>

Flex Styles

FTP Location: /public_html/templates/frontend/css/basic-styles.css

DEFAULT FLEX STYLES NOT BE EDITED

Flex Styles setup should cover you for almost 90% of tasks, They cover a range of different device sizes, with multiple columns and rows.

The first class that needs to be placed is flex, followed by the device sizes.

Below are the sizes we reference
Mobile (up to 500px)
Tablet (500px - 768px)
Laptop (768px - 1024px)
Desktop (1024px - Above)
XL Desktop (1200px - Above)

Spacing Between Divs
Between each div we have a 20px left padding on mobile and 30px on desktop, this provides a space between each div. To accommodate for this applying to the first div we have margin: -20px on mobile and -30px on desktop applied to the surrounding div. By default, all our templates has box-sizing set to inherit, what this means is the padding is applied to the inside of the div and not on the outside like margin.

Backgound Colour to Sections

When you want to apply a background colour, border or padding to a flex div you should add another div and apply the styling to that. Your code should look like below

<div class="flex d-four-colss">
  <div><div class="flex-block"></div></div>
  <div><div class="flex-block"></div></div>
</div>

Different Sizes

You can add multiple styles to the surrounding div so that your columns will change on different devices, see example Below.

You don't need to add every device. For example, if you want two coloumns from tablet onwards, you can just add "flex t-two-cols" and that will make everything into two coloums from tablet (500px and up).

<div class="flex m-two-cols t-two-cols l-three-cols d-four-cols xl-four-cols">
  <div><a href="#" class="flex-block">link</a></div>
  <div><a href="#" class="flex-block">link</a></div>
  <div><a href="#" class="flex-block">link</a></div>
  <div><a href="#" class="flex-block">link</a></div>
</div>

Padding Bottom

Padding can be add to the bottom of each div if you wish to space them out evenly with "pb-vert" (padding bottom verticle)

<div class="flex m-two-cols t-two-cols pb-vert">
  <div><div class="flex-block"></div></div>
  <div><div class="flex-block"></div></div>
  <div><div class="flex-block"></div></div>
  <div><div class="flex-block"></div></div>
</div>

No Gaps

Sometimes you may not want the gaps between each div, this can easily be removed with the "no-gaps" class.

<div class="flex t-four-cols no-gaps">
  <div><div class="flex-block"></div></div>
  <div><div class="flex-block"></div></div>
  <div><div class="flex-block"></div></div>
  <div><div class="flex-block"></div></div>
</div>

Flex Basic

Sometimes you don't need all the extra code and just want to do a simple display:flex, this can be achieved with m-flex-basic and flex-basic

Below are the sizes we reference
m-flex-basic (up to 500px)
flex-basic (500px - Above)

<div class="m-flex-basic flex-basic">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Equal Height Section

When you need divs to be the same size but the content in the boxes are all different lengths, you can add a DIV surrounding the content in flex and then assign the class="content-fill", this will automatically add height 100% to that section as well as a background colour and padding. This class can be edited as you see fit and is simply there as an example.

<div class="d-three-cols t-two-cols">
  <div><div class="content-fill"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ipsum nisl, semper at aliquam nec, blandit eget sapien. Pellentesque tincidunt cursus elementum. Vestibulum vulputate interdum mi, sed ultricies libero placerat ut.</p></div>
  <div><div class="content-fill"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ipsum nisl, semper at aliquam nec, blandit eget sapien. Pellentesque tincidunt cursus elementum.</p></div>
  <div><div class="content-fill"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ipsum nisl, semper at aliquam nec, blandit eget sapien.</p></div>
</div>

Flex - Positioning Content

Flex is a very powerful thing and you can use it to adjust the positioning of content in an area, below is a few exmaples of css styles you can use.

The below attritubes need to have display: flex for them to work/take affect

justify-content: flex-start - Positions the content at the beginning of sectoin
justify-content: flex-center - Positions the content at the End of sectoin
justify-content: flex-end - Positions the content at the End of sectoin
justify-content: space-between - Evenly spaces all content in the section
align-items :center - Align content vertically.

flex: 1 1 100%; - Evenly spaces all content in the section without gaps

Examples below

All content must have display:flex assinged to the parent div, followed by justify-content:flex-start, etc

Example below of how to setup the HTML & CSS

<div class="flex-start">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-align-items-center {
  display: flex;
  align-items: center;
  height: 100%;
}

justify-content: flex-start

justify-content: center

justify-content: flex-end

justify-content: space-between

align-items: center

Flex: [flex-grow] [flex-shrink] [flex-basis] - Positioning Content

Further to the above positioning stuff, you can also space out elements using flex-grow, flex-shrink, and flex-basis

Below is an example of what we will be using

flex-grow: 1; - Think of this like setting the maximum width
flex-shrink: 1; - Think of this like setting the minimum width
flex-basis: auto; - the ideal size you would like

You can call the above properties by using this short hand
flex: [flex-grow] [flex-shrink] [flex-basis];
The default values generally used are flex: 1 1 auto;

Examples below

So to put this into practive the Parent element will have display:flex and the CHILD element/s will have have flex: 1 1 auto;

Example below of how to setup the HTML & CSS

<div class="display-flex">
  <div class="flex-sizing"></div>
  <div class="flex-sizing"></div>
  <div class="flex-sizing"></div>
  <div class="flex-sizing-bigger"></div>
</div>

.display-flex {
  display: flex;
}

.flex-sizing {
  flex: 1 1 auto;
}

.flex-sizing-bigger {
  flex: 4 1 auto;
}

flex: 1 1 auto; - Evenly Spacing Elements

flex: 2 1 auto; - Having another Elevment be bigger (last class changed)

Lazy Load Images

Lazy Loading images is a great way to save on load speeds and should be implemented on atleast the homepage. Example of how this can be implemented on a image tags and backgrounds below

Image tags

In order to lazy load images you need add loading="lazy"

<img loading="lazy" src="https://helpfulcode.staging.adtorqueedge.com/images/lazyload.png" alt="News">
          

Background Images

In order to lazy load background images you need add the class="lazy" and point to the url with data-bg="".

<div class="lazy" data-bg="url(https://helpfulcode.staging.adtorqueedge.com/images/lazyload.png)">
          

For WordPress sites, don't include "url()"

<div class="lazy" data-bg="https://helpfulcode.staging.adtorqueedge.com/images/lazyload.png">
          

Videos

In order to lazy load a video you need add preload="none" (this won't work for autmatically playing videos, best to avoid doing so except for in banners).

<video 
preload="none" 
muted
autoplay
loop
width="100%" 
playsinline
poster="https://helpfulcode.staging.adtorqueedge.com/images/lazyload.png" >

<source type="video/mp4" src="https://helpfulcode.staging.adtorqueedge.com/images/movie.mp4"/>
</video>

iframes

In order to lazy load an iframe you need add the loading="lazy".

<iframe loading="lazy" src="https://ad006.staging.adtorqueedge.com/" frameborder="0"></iframe>

Button Styles

FTP Location: /public_html/templates/frontend/css/template.css

We have 3 button classes setup and they should pretty much cover you for everything. The bulk code of the button is in the "btn" class which is then followed by one of the below (btn-full can be added to make the button full width)

Below are the button attritubes we have which are mainly colours
btn-primary - Used as a general button and on all forms by default
btn-secondary - Another variation of the btn-primary
btn-outline - Transparent background but has a border
btn-full - Button will become full width of the element

<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-secondary">Button</a>
<a href="#" class="btn btn-outline btn-full">Button</a>

Tabs - Open from another Page

There have been times where we need to open a tab on another page, that would not be the first default opened tab. We can do this with JS and implmenting a delay click.

What this means is the page will load, the JS waits for half a section and then imitates a click on the desired Tab.

The way it references which tab to select is based on 3 things.

TAB - ID - On the tab heading there will be a unique ID, with a word before it. Example of this is below model-suvs

<h3 class="mm-header" id="model-suvs" data-tab="suvs">SUVs </h3>

URL - On the link/Button that directs you to the page. The URL should include the ID or #. So the above example would be /pagename#suvs. Take not of how it doesn't include the word model-

JS - On the page with the tabs you will need to paste the below JS. Notice here how it has model-. This is telling the JS to look for the ID with model- and the # from the url #suvs

<script>
var type = window.location.hash.substr(1);
if(type) {
  setTimeout(function(){
    document.getElementById('model-'+type).click();
  }, 500);
}
</script>

Toggle Open/Close

There has been a lot of times when you need a simple open/cose toggle to happen on the website, for example you have terms and conditions but don't want to display them until someone hits the heading

The below code adds a .show class to both .toggle-header, .toggle-content when the "Click to open me" Text is clicked.

CSS is then used to display the content based on the .show close being added.

If you hit the "Click to open me" text again, the .show class will be removed and the content will be hidden.

<h3 class="toggle-header">Click to open me</h3>
<p class="toggle-content">This is some random text, press "Click to open me" to close this section</p>
          

.toggle-header:hover, .toggle-header.show {
  color: #0043ff;
  cursor: pointer;
}

.toggle-content {
  display: none;
}

.toggle-content.show {
  display: block;
}

<script>
jQuery(function($){ 
  //Toggle Open Close
  $(".toggle-header").on("click", function(){
    $(".toggle-header, .toggle-content").toggleClass("show");
  });
}); 
</script>

Change Select Based on Button

The html below shows an a tag button and an select box.

When the button is pressed it will check the select box options and see if one of those options match the data-location attribute

<a href="#enquire" class="btn btn-primary a-link btn-location" data-location="Cheltenham">Book A Service</a>
<div class="form-group">
  <div class="select-container">
    <select class="select-hide" name="brand" id="brand" required>
      <option value="">Location</option>
      <option value="Cheltenham">Cheltenham</option>
      <option value="Hindmarsh">Hindmarsh</option>
    </select>
  </div>
</div>

<script>
jQuery(function($){ 
  //Click button and change option
  $('.btn-location').on('click',function() {
    var $loc = $(this).attr('data-location');
    $('#brand').val($loc); 
  });

}); 
</script>

Click a location to change the Select value to it.

WordPress SVGs

Line of code to call an SVG on the frontend of Wordpress

<svg class="icon-class"><use xlink:href="/svg/icons.svg#icon-menu"></use></svg>

Custom Block Shortcode PHP

Line of code to use when wanting to call your custom block from a PHP file. For example if you want a content section to appear on all pages just above the footer. You would go into the footer.php and place this code where you wish.

The code between the [ ] is the custom block code you can copy from the right sidebar.

Example code - [content_block slug=career-banner]..

<?php echo do_shortcode( '[content_block slug=career-banner]' ); ?>

Defer jQuery

By default jQuery is loaded in the footer of the site. If you wish to use jQuery inline you can use a script tag with type="module"

Also be sure to add defer to any external scripts you add

<script type="module">jQuery(function($) { // Your code here });<script>

Elfsight

Equal height for elfsight reviews

.es-embed-root .swiper-autoheight .swiper-slide {
    height: 225px;
}

.swiper-slide .es-carousel-layout-item {
    height: 100%;
    background: #fff;
}