MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add Promo Boxes to Hemlock

Please note: This tutorial is specifically for the Hemlock theme.



Some of our themes, like Redwood and Oleander, offer an element called Promo Boxes which are 3 horizontally-aligned hyperlinked images. By default, Hemlock doesn't include this feature, though it is possible to manually insert Promo Boxes onto its post feed/blog page. 

To do so, navigate to Hemlock's WP Dashboard > Appearance > Editor > and open up the file titled "index.php". 

On Line 7, you will see this code:

<div class="container <?php if(get_theme_mod( 'sp_sidebar_home' )) : ?>sp_sidebar<?php endif; ?>">


BELOW this line of code, on blank Line 8, copy and paste the following block of code:

<div class="promo-area">
    
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 1 TITLE</h4>
        </div>
    </div>
    
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 2 TITLE</h4>
        </div>
    </div>
    
    <div class="promo-item" style="background-image:url('YOUR-IMG-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 3 TITLE</h4>
        </div>
    </div>
    
</div>


In this block of code, there are 3 sections.  Each section is related to 1 of the 3 Promo Boxes. 
Please be sure to replace the dummy YOUR-IMAGE-URL-HEREYOUR-LINKING-URL-HERE, and PROMO BOX TITLE text for each section with your own images, links, and text. 

NoteFor linking in an image, we recommend first uploading it to your WordPress Media Library. Once in your library, click the image and a box will pop up with its unique URL. Use this URL to pull in your desired image to the Promo Box.

Be sure to save changes when finished.


Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following code:

/****************************************/
/* Promo Area
/****************************************/
.promo-area {
    overflow:hidden;
    margin-bottom:60px;
}
.promo-item {
    display: table;
    width:293px;
    float:left;
    margin-right:30px;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:16px;
    position:relative;
}
.promo-item:last-child {
    margin-right:0;
}
.promo-overlay {
    height: 100%;
    display: table-cell;   
    vertical-align: middle;   
    text-align:center;
    border:1px solid #fff;
}
.promo-overlay  h4 {
    color:#000;
    line-height:1.5em;
    padding:8px 12px 8px 13px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
    background:#fff;
    display:inline-block;
    max-width:60%;
}
.promo-link {
    position: absolute; 
    height: 100%; 
    width: 100%;
    top: 0;
    left:0;
    z-index: 999999;
    display: block
}

@media only screen and (min-width: 942px) and (max-width: 1170px) {
.promo-item {
    width:293px;
    height:172px;
}}

@media only screen and (min-width: 768px) and (max-width: 960px) {
.promo-item {
    width:230px;
    height:135px;
    margin-right:18px;
}}

@media only screen and (max-width: 767px) {
.promo-item {
    width:100%;
    height:176px;
    margin-bottom:30px;
}}

@media only screen and (min-width: 480px) and (max-width: 768px) {
.promo-item {
    width:100%;
    height:200px;
    margin-bottom:30px;
}
.promo-item:last-child {
    margin-bottom:0;
}}


Save changes to your Custom CSS when finished.