Folder V2 - 1


Give your Folder V2 feature 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):


__________________________________________________________________________________

/*Folder*/
/*Use Layout 1 in module setting*/
/*Put other features in main folder only*/
/*Show cover and upload cover image in module setting*/
/*Untick on Show title option*/
/*Use Card design*/
/*Allow line return in titles and subtitles*/
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll ng-include:nth-child(3) > div.list.card {
  box-shadow: none;
    margin: 0;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card {
  box-shadow: none;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a {
  margin: 0;
  border-bottom: 1px #eee solid;
  height: 80px;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a:last-child {
  border-bottom: 0px !important;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a:before {
  content: "";
    background-image: url(https://i.imgur.com/y1Yg2An.png);
    background-size: cover;
    height: 20px;
    width: 20px;
    position: absolute;
    right: 0;
    top: 32px;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a > img {
  top: 24px;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a > h2 {
  color: black;
    letter-spacing: 1px;
  text-align: left;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a:nth-child(1) > h2:after {
  content: "View our upcoming events";
    display: block;
  padding-top: 3px;
  font-size: 14px;
    width: 100%;
  font-size: 10pt;
    position: relative;
    color: #777;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a:nth-child(2) > h2:after {
  content: "Schedule a meeting";
    display: block;
  padding-top: 3px;
  width: 100%;
  font-size: 10pt;
    position: relative;
    color: #777;
}
/*Copy and paste below this line if you have more than 3 features under main folder and change nth-child(3) to nth-child(4), nth-child(5) and so on*/
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a:nth-child(3) > h2:after {
  content: "Book a table now";
    display: block;
  padding-top: 3px;
width: 100%;
  font-size: 10pt;
    position: relative;
    color: #777;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a:nth-child(4) > h2:after {
  content: "Get in touch";
    display: block;
  padding-top: 3px;
width: 100%;
  font-size: 10pt;
    position: relative;
    color: #777;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a:nth-child(5) > h2:after {
  content: "Local jobs";
    display: block;
  padding-top: 3px;
width: 100%;
  font-size: 10pt;
    position: relative;
    color: #777;
}
ion-view.module-folder2.folder2-layout1.pane.has-background-image ion-content div.scroll > div.list.card > a:nth-child(6) > h2:after {
  content: "Members-only area";
    display: block;
  padding-top: 3px;
width: 100%;
  font-size: 10pt;
    position: relative;
    color: #777;
}

__________________________________________________________________________________


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.