McKenzie Clarke

QUICK GUIDE

In this page you'll see how you can modify the colors of your custom code, and how to apply the same style to another block inside an index page in the Healthy is Hot site.

 

Top summary block

When creating another Grid Summary Block, keep in mind that whichever Metadata you select as Secondary Metadata is the one that will appear inside the label.

 

HOW TO APPLY THE CODE TO ANOTHER BLOCK

To apply the custom code to another Grid Summary Block inside a specific index section of the site:

1. Look for the URL slug of the page inside the index and copy it. When using indexes, that becomes the ID of your page. As an example, we'll be using the /goddess URL slug

Where to find the url slug.jpg

2. Go the Custom CSS window (Design > Custom CSS) and look for the annotation that says

/*SUMMARY BLOCK WITH CATEGORY LABEL - Plugin by Thirty Eight Visuals*/

3. Right below it, you'll see the ID of the index section where the code is currently being applied along with the class of the GRID summary block:

#latest-posts .sqs-gallery-design-autogrid {

4. All you have to do is add a coma after the ID, paste in the additional page ID where you want to implement the changes (i.e. the URL slug you just copied with a # sign in front) and copy/paste the same block class right after it, like so:

#latest-posts .sqs-gallery-design-autogrid, #goddess .sqs-gallery-design-autogrid {

5. That's it!

 

HOW TO EDIT THE CODE

1. Inside the Custom CSS window, look for:

/*SUMMARY BLOCK WITH CATEGORY LABEL - Plugin by Thirty Eight Visuals*/

2. Then, you can look for the following declarations and edit its values:

/*To customize category labels*/
.summary-metadata.summary-metadata--secondary {
  position: absolute;
  background: #C9E3E3; /*changes label bg color*/
  border: 2px solid #fff; /*changes label border size and color*/
  border-bottom: none;
  padding: 5px 20px;
  width: 70%; /*changes label width*/
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.summary-metadata.summary-metadata--secondary a {
  color: #616A6A; /*changes label text color*/
  text-transform: uppercase; /*to remove uppercase set as none*/
  font-size: 0.9em; /*to use same size as body text set as 1em*/
}

 

Trending section

For this block, keep in mind that any h1 you add to the same section, where the code is being applied, will take the style of the Trending title.

 

HOW TO APPLY THE CODE TO ANOTHER BLOCK

To apply the custom code to another List Summary Block inside a specific index section of the site:

1. Look for the URL slug of the page inside the index and copy it.

2. Go the Custom CSS window (Design > Custom CSS) and look for the annotation that says

/*TRENDING SECTION SUMMARY BLOCK*/

3. Right below it, you'll see the ID of the index section where the code is currently being applied along with the class of the LIST summary block:

#trending .sqs-gallery-design-list {

4. All you have to do is add a coma after the ID, paste in the additional page ID where you want to implement the changes (i.e. the URL slug you just copied with a # sign in front) and copy/paste the same block class right after it, like so:

#trending .sqs-gallery-design-list, #goddess .sqs-gallery-design-list {

5. That's it!

 

HOW TO EDIT THE CODE

1. Inside the Custom CSS window, look for:

/*TRENDING SECTION SUMMARY BLOCK*/

2. Then, you can look for the following declarations and edit its values:

  .summary-item {
    background: rgba(201, 227, 227, 0); /*changes the background of each of the posts listed*/
    padding: 20px;
    margin-bottom: 0px !important;
    border-bottom: 2px solid #fff;
    transition: background 0.5s;
  }
  .summary-item:hover {
    background: rgba(201, 227, 227, 1); /*to change the background of each of the posts listed on mouseover*/
  }
  .active-one {
    background: rgba(201, 227, 227, 1) !important; /*to change the background of of the post listed once its clicked*/
    border-bottom: 2px solid rgba(59,59,59,.65) !important; /*to change the border color of the post listed once its clicked*/
  }

And also these ones:

  .sqs-gallery-design-list {
    background: #e8f4f4; /*to change the bg color of the entire box*/
  } 
  h1 {
    background: #e8f4f4; /*changes the bg color of the box holding the title*/
    padding: 20px;
    margin-bottom: -30px;
  }

 

Styled carousel block

HOW TO APPLY THE CODE TO ANOTHER BLOCK

To apply the custom code to another Carousel Summary Block inside a specific index section of the site:

1. Look for the URL slug of the page inside the index and copy it.

2. Go the Custom CSS window (Design > Custom CSS) and look for the annotation that says

/*STYLED CAROUSEL BLOCK - Plugin by Thirty Eight Visuals*/

3. Right below it, you'll see the ID of the index section where the code is currently being applied along with the class of the CAROUSEL summary block:

#categories .sqs-gallery-design-carousel {

4. All you have to do is add a coma after the ID, paste in the additional page ID where you want to implement the changes (i.e. the URL slug you just copied with a # sign in front) and copy/paste the same block class right after it, like so:

#categories .sqs-gallery-design-carousel, #goddess .sqs-gallery-design-carousel {

5. That's it!

 

HOW TO EDIT THE CODE

1. Inside the Custom CSS window, look for:

/*STYLED CAROUSEL BLOCK - Plugin by Thirty Eight Visuals*/

2. Then, you can look for the following declarations and edit its values:

  .sqs-gallery-meta-container {
    border: 1px solid #bad6d6; /*changes the size and color of the box's border*/
    min-height: 135px; /*to adjust the height of the boxes so they align better*/
    padding: 20px;
    word-wrap: break-word;
    transition: background 1s;
  }
  .sqs-gallery-meta-container:hover {
    background: #bad6d6; /*changes the color of the bg on mouseover*/
  }
  .sqs-gallery-meta-container:hover .summary-title a,
  .sqs-gallery-meta-container:hover p,
  .sqs-gallery-meta-container:hover .summary-metadata time,
  .sqs-gallery-meta-container:hover .summary-metadata span a,
  .sqs-gallery-meta-container:hover .summary-read-more-link {
    color: #fff !important; /*changes the color of the text when the bg changes color*/
  }

 

SUPPORT & CUSTOMIZATION

Get in touch if you have any issues with the code/instructions, or if you'd like to request specific plugin customizations (a customization service quote may apply).