Our Blog
Read the latest news from Shape5

This tutorial will give instructions for converting a our free Vertex template from Vertex 1 to Vertex 2 with all responsive features. Please note, that if you have heavily modified your template's layout or css we do not recommend performing this upgrade. However, if you have made very minimal edits the edit should be fairly straightforward and easy to do. This will not over-write commonly edited files like template.css or index.php.

You may also simply update to Version 2 by using the upgrade patch, but this will not enable any responsive features, only the instructions below will enable responsive features.

We do not recommend making this change on a live site. Be sure to test offline or in a development area.

Please also note that this will disable your current mobile layout, and enable the responsive mobile layout instead.


1. Complete the full upgrade tutorial, including making a backup, found here:

    http://www.shape5.com/joomla_tutorials.html

2. You will need to make the following changes in the template's index.php file.

    Search for:

    <div id="s5_logo" style="height:<?php echo $s5_logo_height ?>px;width:<?php echo $s5_logo_width ?>px" onclick="window.document.location.href='<?php echo $LiveSiteUrl ?>'"></div>
    
    And change it to:
    
    <img alt="logo"  style="height:<?php echo $s5_logo_height ?>px;width:<?php echo $s5_logo_width ?>px" src="<?php echo $s5_directory_path ?>/images/s5_logo.png" id="s5_logo" onclick="window.document.location.href='<?php echo $LiveSiteUrl ?>'"></img>
    
    
    Also search for:
    
    <div class="s5_wrap">
    <?php require("vertex/includes/vertex_includes_bottom.php"); ?>
    </div>
    
    And change it to:
    
    <?php require("vertex/includes/vertex_includes_bottom.php"); ?>
    
        
3. Download a fresh copy of the Shape5 Vertex template from the Free Templates section here:

    http://www.shape5.com/component/option,com_docman/Itemid,96/task,cat_view/gid,190/

    Extract the zip file and copy the following files over to your installation. Be sure to over-write your existing files:

    templateDetails.xml
    xml/specific.xml
    css/s5_responsive.css
    html/modules.php
    
    Note - s5_responsive.css contains new css to stylize the template at varying screen sizes. If you need to make any modifications this is the best place to add your changes.
    
4. Edit the template.css file and find the #s5_logo section around line 355.

    Remove the following line and save the file:
    
    background:url(../images/s5_logo.png) no-repeat top left;

5. Edit the s5_flex_menu.css file and add the following to the very bottom:

    .s5_sub_wrap_rtl, .s5_sub_wrap_lower_rtl {
        margin-left:7px;
    }

6. Enter the template configuration via the Template Manager in the backend of Joomla and make any modifications to the configuration that you wish, and you're done!