Scheduled Maintenance - On Friday the 25th at 10PM EST we will be making some minor DNS changes to our server. We do not expect there to be any down time on our site, but if after this time our site does not load for you please simply clear your browser cache and restart your machine. - Thank you.
login
Join Now Access Products


Our Blog
Read the latest news from Shape5


14
Jun
2012


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!
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

Become A Fan Of Shape5

Join Our Newsletter

Email:

From the Shape 5 Blog