Georgia Lou Studios

Welcome to the Help Center!

Customize Hero Header | Piper + Paige

Follow

You can customize the follow elements for the Hero Header in this theme:

  1. Hero header size
  2. Overlay text alignment
  3. Button Text

 

Edit Hero Header Size

  1. Go to the Theme page on the Blogger Dashboard.
  2. Click on the Edit HTML button.eh1.png
  3. The code editor window will open.
  4. Click anywhere in the code box.
  5. Press the Control + F or Command + F keys to open the Search box at the top right corner of the code box.
  6. Search for the following: w1920-h667-c
  7. Hit Enter to search.
  8. You will find the following string of code:
    //Hero Header resize script
    $(document).ready(function(){$("#hero img",$(this)).each(function(){var src=$(this).attr("src").replace('/s1600/','/w1920-h667-c/');$(this).attr("src",src)})});
    /*]]>*/
  9. The w1920-h667-c piece specifies the width and height of the Hero Background. w1920 is the width. h667 is the height.
  10. We DO NOT recommend changing the width setting. You can change the height setting. Units are in pixels. Smaller number for a shorter hero header. Larger number for taller header.
  11. Once you change the code, click the Save theme button.

 

Change Overlay Alignment

By alignments, we mean center, left or right align the text of the hero header overlay.

  1. On the Blogger Dashboard, go to the Theme page.
  2. Click on the Customize button.eh3.png
  3. The Template Designer will open.
  4. Click on the Advanced options.
  5. Scroll to the bottom of the list until you find the Add CSS box.eh4.png
  6. To center align the text overlay, copy and paste the following code into the Add CSS box.
  7. CENTER CODE:
    .hero-overlay {
    	width: 100%;
    	text-align: center;
    }
  8. To right align the text overlay, copy and paste the following code into the Add CSS box.
  9. RIGHT ALIGN CODE:
    .hero-overlay {
            right: 0;
            width: 50%;
    }
  10. To hide the overlay:
  11. HIDE OVERLAY CODE:
    .hero-overlay {
    display: none;
    }
  12. Click the Apply to blog button to save changes.

 

Edit Button Text

  1. Go to the Theme page on the Blogger Dashboard.
  2. Click on the Edit HTML button.eh1.png
  3. The code editor window will open.
  4. Click anywhere in the code box.
  5. Press the Control + F or Command + F keys to open the Search box at the top right corner of the code box.
  6. Search for: Click here to sign up!
  7. Hit the Enter key to search.
  8. You will find the following line of code:
    <a expr:href='data:link' id='hero-button'>Click here to sign up!</a>
  9. Edit the text to your liking.
  10. Click the Save theme button to save your changes.
Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk