Our Blog

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:


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"); ?>
    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:


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

    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 {

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!
Tags: Untagged 
Please Note - The comment system is not for product support. If you are in need of support please post your questions in our support forum boards and someone will be happy to assist you from there.
Thank you!

Free Vertex Template & Theme

Free Joomla Template
Are you new to Shape5 and the Vertex framework? Then download our totally free Vertex Joomla template or Wordpress theme to experience the power of the Vertex framework for yourself! This is the same framework that our club products are built off of.
  • Fully Responsive Layout
  • Integrated Bootstrap Styling
  • Easy To Upgrade Framework
  • Custom Module And Column Widths
  • SEO Optimized Layout
  • Right To Left Support
  • And Many Other Great Features!
Joomla Details:

Live Demo Learn More

Wordpress Details:

Live Demo Learn More

From the Shape 5 Blog

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.