Custom chevereto theme footer bar – part 3

Welcome back! After part 1 and part 2, your site looks more unique than the default Chevereto theme. In this article, we’re going to show you how to add a tiny chevereto footer bar at the bottom of the page. Inside the footer, we’ll add one single line of text containing whatever you want and an image counter. For the sake of this guide, we will implement a standard text.

Adding a footer

Chevereto footer comes with a preconfigured footer file, “sample.footer.php” located in “/app/themes/Peafowl/custom_hooks/”.

Custom hooks is a great thing, what it does is to automatically hook our work right into your website, so by renaming the files correctly and adding some code everything just works, and makes this guide easier for me to do.

You will see some default code here like this

 

<?php if(!defined('access') or !access) die('This file cannot be directly accessed.'); ?>
<?php /* Add your custom PHP/HTML code in this file */ ?>

 

As you can see, it’s saying “Add your custom PHP/HTML code in this file”.

We need to add a few simple lines with inline CSS (styling inside this document) and code.

 

Start by adding CSS on line 3:

 

<style>
footer {
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 400;
}
</style>

Editing the CSS (height, background, font-weight etc) will change how the chevereto footer bar looks.

 

Once we have our styling in place add this code below the closing style tag (</style>)

 

<footer class="footer">
  <?php $stats = CHV\Stat::getTotals(); ?>
    <p>Free image hosting service by: <strong>SITENAME</strong> - <strong style="color:#E84C3D;"> <?php echo $stats['Images'] > 999999 ? $stats['Images'] : number_format($stats['images']); ?> <?php _ne('Image', 'Images Uploaded', $stats['images']); ?> </strong> - Hosted on pure dedicated power - <a href="https://blog.freeimage.host">Visit our blog</a></p>
      <div id="powered-by" class="footer">Footer by<a href="https://freeimage.host" rel="generator">Free image . host</a>free image host</div>
</footer>

 

These lines will add some text followed by an image counter and a “href” (link to another site or internal link) You should edit the text to fit your needs. Colors can be changed where you see the hex color code “#E84C3D” or simply remove the color styling by deleting style=”color:#E84C3D;” inside the strong tag <strong>. Study the lines and make your changes.

When done editing, save this file as “footer.php” inside the “custom_hooks” folder and chevereto footer is complete.

 

This is it for the Custom Chevereto theme series, we have made a simple yet unique theme based on the default “Peafowl” theme. After going through the basics, you have the knowledge and tools to customize it even further. Good luck with your project and please post a comment with your results below!

 

End results after part 1, part 2 and part 3

chevereto custom theme

 

 

Please follow and like us: