Custom chevereto theme guide part 1

Today we’re going to learn how to customize the default chevereto theme “Peafowl”

First off we are going to start out with a clean installation of the latest version to date. 3.11.1 and then make our custom chevereto theme work stick even if there is an update.

clean chevereto

Chevereto is hard to work with at the current state when it comes to custom chevereto theme, but luckily the creator has given us some tools to avoid a theme reset on an update. What I’m talking about is overrides. Overrides is when you dupe a file and the system prioritize that file instead of the original one. If we look in the folder structure, we can see multiple overrides folders here and there.

Let’s start by doing some basic stuff. In this guide we will make a clean and simple front-page, making your site easy to look at and fast for loading. We’ll try to keep this custom chevereto theme under 500kb in size.

Overrides

Locate the “Peafowl” folder under “app -> themes” and then move into the “views” folder. Make a copy of the index.php file and place the copy in “overrides->views” folder. Now, if the site is in production I recommend renaming the index.php to “c_index.php” or something else that doesn’t exist. This is because we don’t want to have our changes reflect in real time before it’s been done.

Editing the index.php

Once the index.php has been copied over and renamed, open the renamed index.php in a text editor. We strongly recommend using notepad++ with integrated SFTP plugin.

When in notepad++ locate the following code on line 11 to 22 and remove it completely. Doing this will remove the background image.

 

<div id="home-cover-slideshow">
  <?php
    $i = 0;
    foreach(CHV\getSetting('homepage_cover_images_shuffled') as $k => $v) {
      if($i > 1 && is_mobile_device()) break;
  ?>
  <div class="home-cover-img" data-src="<?php echo $v['url']; ?>"></div>
  <?php
      $i++;
    }
  ?>
</div>

The homepage is now clean with no background image.

no background chevereto

 

Pro Tip: Depending on what background color you choose, you should also change the custom chevereto theme tone at dashboard -> settings -> theme -> Tone -> “light/dark”. The same with “Top bar color” to match your homepage style.

 

Change the front page background color

Changing the color of the background is easy. Go to admin dashboard -> settings -> theme and scroll down to the “Custom CSS” field and add this:

 

#home-cover {
    background-color: #333;
}

Change the color hex “#333” to any desired color you’d like. Google has a neat tool for this, by googling “hex color” you can find the right color and copy/paste the hex code with ease.

 

Pro Tip: Once you have your colors set, remember to style your buttons colors from the admin dashboard so it matches the rest of the styling. This can be done from the dashboard -> settings -> theme “main color” (remember the google hex thing?)

 

Changing the “About” menu to an icon item.

Find “header.php” in the “Peafowl” folder and copy it to “overrides” and open it up with notepad++

Locate line 535 containing

<span class="top-btn-text"><span class="icon icon-info tablet-hide laptop-hide desktop-hide"></span><span class="text phone-hide phablet-hide"><?php _se('About'); ?></span><span class="arrow-down"></span></span>

(version 3.11.1) and replace the line with this one;

<span class="top-btn-text"><span class="icon icon-ellipsis"></span></span>

It should now look like this if you did it right.

changing chevereto menu item

Personally, I think this looks better since the “About” menu in most cases contain a lot more than just about pages. For other icons see the IcoMoon Demo and replace the icon name in the code.

 

If you renamed your “index.php” remember to rename it back to “index.php” (inside overrides -> views)

 

Thank you for reading and following this custom chevereto theme guide, we have done some basics, and now we know how to customize the colors and some icons.  In the follow-up guide part 2, we will strip the title and paragraph section and replace it with content from the upload box.

 

PART 2

 

 

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *