Chevereto custom theme guide part 2

Welcome to part 2 of Chevereto custom theme guide.

In part 1 we managed to customize our chevereto theme and established a system which will withstand updates. Today we’re going deeper and replacing the main page content with content from the upload box.

 

Replacing homepage content

We need two files for this part, “index.php” (/overrides/views/) and “anywhere_upload.php” (/app/themes/Peafowl/snippets/)

Open both files, using notepadd++ so you have easy access to both of them.

In “anywhere_upload.php” copy line 16 to 88.

Find and locate the following code in “index.php” from line 13 to 29 and replace it with the copied code.

    <?php CHV\Render\show_banner('home_before_title', (function_exists('get_list') ? get_list()->sfw : TRUE)); ?>

    <h1><?php echo CHV\getSetting('homepage_title_html') ?: _s('Upload and share your images.'); ?></h1>
    <p class="c20 center-box text-align-center phone-hide phablet-hide"><?php echo CHV\getSetting('homepage_paragraph_html') ?: _s('Drag and drop anywhere you want and start uploading your images now. %s limit. Direct image links, BBCode and HTML thumbnails.', G\format_bytes(G\get_bytes(CHV\getSetting('upload_max_filesize_mb').'MB'))); ?></p>
    <div class="home-buttons">
      <?php
        $homepage_cta = [
          '<a',
          CHV\getSetting('homepage_cta_fn') == 'cta-upload' ? 'data-trigger="anywhere-upload-input"' : 'href="'.CHV\getSetting('homepage_cta_fn_extra').'"',
          (CHV\getSetting('homepage_cta_fn') == 'cta-upload' and !CHV\getSetting('guest_uploads')) ? 'data-login-needed="true"' : NULL,
          'class="btn btn-big ' . CHV\getSetting('homepage_cta_color') . (CHV\getSetting('homepage_cta_outline') ? ' outline' : NULL) . '">' . (CHV\getSetting('homepage_cta_html') ?: _s('Start uploading')) . '</a>'
        ];
        echo join(' ', $homepage_cta)
      ?>
    </div>

    <?php CHV\Render\show_banner('home_after_cta', (function_exists('get_list') ? get_list()->sfw : TRUE)); ?>

Save changes. Notepadd++ with FTP plugin will automatically update your server files. If you don’t have this, upload and replace the edited “index.php” to your /overrides/views folder.

 

 

If everything was done right, this should be the current result:

 

custom chevereto theme

 

Change icon above the text

From part 1 we showed you where to find the IconMoon demo, chevereto is using this for all the icons you see on the website. All we need to do is change the icon title to the preferred icon.

In “index.php” find “icon-download2” on line 16 (again /overrides/views/) do not edit the index.php inside the original “views” folder. 

<span class="icon icon-download2 cursor-pointer" data-trigger="anywhere-upload-input"></span>

Replace “icon-download2” with another icon, eg; “icon-download” – any icon will work so pick one you think looks best. Remember to save and upload for changes to apply.

 

Replace paragraph text “Drag and drop or paste…”

If you want to keep the original paragraph we need to insert some of the old code we deleted from “index.php”

Doing this, you’ll still be able to make custom changes from the dashboard. If you want to keep this as is, any changes that are done from the admin dashboard won’t apply.

Replace line 17 in “index.php” with this code

<h1 class="content text-align-center phone-hide phablet-hide desktop-hide tablet-hide laptop-hide" style="font-size:44px;border-bottom: 3px solid rgba(64, 146, 198, 0.55);font-weight:400;">free image hosting — upload</h1>
<div class="heading device-mobile--hide" style="font-size:1.2em;margin:20px 0;"><a data-trigger="anywhere-upload-input"><?php echo CHV\getSetting('homepage_paragraph_html') ?: _s('Drag and drop anywhere you want and start uploading your images now. %s limit. Direct image links, BBCode and HTML thumbnails.', G\format_bytes(G\get_bytes(CHV\getSetting('upload_max_filesize_mb').'MB'))); ?></a></div>

This will make it look like this

custom chevereto theme part 2

 

This is it for part 2. If you have any questions don’t hesitate to ask. In part 3, we will show you how to add a footer bar with an image counter.

 

PART 3

 

Please follow and like us:

Leave a Reply

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