Layout 6 Customisation (Classic CMS)


Give your Layout 6 a stylish, different look!

Please be advised that we are not able to customise or adjust this CSS for you, however the input process is straight forward - please copy and paste the following code at the bottom of the Colours section (at the very bottom of that page):


__________________________________________________________________________________


/*Layout 6*/
ion-view[state="home"] > ion-content {
  background-color: transparent !important;
}
ion-view[state="home"] div#homepage_slider {
  height: 100% !important;
  visibility: visible;
  margin: none !important;
  width: 100% !important;
}
ion-view[state="home"] div.layout.l6 > ion-content {
  width: 100%;
  margin: auto;
  height: 45% !important;
}
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div > a {
  border: none;
    margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
    border-radius: 10px;
}
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(1) > a {
  background-color: white 0.9 !important;
    border: 1px white solid;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 50%;
    float: left;
    background-size: cover !important;
}
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(1) > a,
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(2) > a {
  padding-left: 16px;
  border: 1px #009fe3 solid;
  background-color: #fff 0.9 !important;
}
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(1) > a > img,
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(2) > a > img {
  display: none;
}
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(1) > a > h2,
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(2) > a > h2 {
  text-align: center;
    font-weight: 1000;
    letter-spacing: 1px;
    font-size: 18px;
}
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(n+3) > a > h2 {
    font-weight: 1000;
    letter-spacing: 1px;
    font-size: 18px;
}
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(n+3) > a {
  padding-bottom: 36px;
}
ion-view[state="home"] div.layout.l6 > ion-content div.scroll > div:nth-child(n+3) > a:after {
  content: "";
    display: block;
    width: 100%;
    height: 10px;
    position: absolute;
    background-color: #009fe3;
    bottom: 0px;
    left: 0px;
    background-image: repeating-linear-gradient(45deg, #009fe3, blue);
}
ion-view[state="home"] div#homepage_slider > div.slider-pager.hide {
    display: hidden !important;
    top: 0px;
    height: 30;
    background: transparent !important;
}

__________________________________________________________________________________


NOTES:

Elements in BOLD can be updated.

  1. Colours - you can replace the HEX codes with the required colours. You can use section tags in BOLD see what section CSS element belongs to.
  2. URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs in BOLD.