Responsive layout for Yoo Inspire Joomla template

In this article you will find informations how to create responsive layout for Yoo Inspire Joomla! template. It can be also applied to other Yoo templates with Warp 6.2+ with small modifications in CSS and JavaScript depending on modules positions. Test this site to see how responsive layout works. All changes where tested on Yoo Inspire 1.0.4 Demo Package for Joomla 2.5 with Warp Framework 6.3.1 - 6.4.3.

Test instructions

To test responsive layout you can view the site in mobile devices. But there is also simpler method - just resize Browser window. While you will be changing window width the layout would respond and would adopt to available surface.

Compatible templates

If you have one of following Yoo templates for Joomla! (1.5, 2.5, 3) then you can make changes described in this article to have responsive layout. A few Users had confirmed that it is also working with Wordpress.

Warp version

Go to template configuration and check on the right below toolbar buttons version of Warp Framework if it is at least 6.2. If you have older version then download latest version of your template or free Master template with Warp 6.x and update only warp folder. Make sure that you have downloaded template for your Joomla because Warp from Joomla 3 would not work with Joomla 2.5.

Configuration options

Edit file: templates/yoo_inspire/config.xml on line 126 and add option for enabling Responsive layout and change default value to 25 and description for sidebars width which now will be in % instead of px.

<field name="Layout" type="separator" />
<field name="responsive" type="radio" default="1" label="Responsive Layout" description="Enable responsive layout.">
    <option value="0">No</option>
    <option value="1">Yes</option>
</field>
<field name="template_width" type="text" size="10" default="980" label="Template Width" description="Set the template width in pixel." class="short" />
<field name="sidebar-a_width" type="text" size="10" default="25" label="Sidebar A Width" description="Set the Sidebar A width in percent." class="short" />
<field name="sidebar-b_width" type="text" size="10" default="25" label="Sidebar B Width" description="Set the Sidebar B width in percent." class="short" />

Other Yoo templates

This code is universal and will work for all templates.

 

Template initialization

Edit file: templates/yoo_inspire/layouts/template.config.php
Add new CSS file: responsive.css on line 85 before print.css

$this['asset']->addFile('css', 'css:responsive.css');
$this['asset']->addFile('css', 'css:print.css');

Add new JavaScript file: responsive.js on line 122 after warp.js

$this['asset']->addFile('js', 'js:warp.js');
$this['asset']->addFile('js', 'js:responsive.js');

 
Replace PHP code from line 9: // generate css for layout
to line 61: // generate css for dropdown menu
with following code:

// generate css for layout
$css[] = sprintf('.wrapper { max-width: %dpx; }', $this['config']->get('template_width'));

// generate css for 3-column-layout
$sidebar_a       = '';
$sidebar_b       = '';
$maininner_width = 100;
$sidebar_a_width = intval($this['config']->get('sidebar-a_width'));
$sidebar_b_width = intval($this['config']->get('sidebar-b_width'));
$sidebar_classes = '';
$rtl             = $this['config']->get('direction') == 'rtl';
$body_config     = array();

// set widths
if ($this['modules']->count('sidebar-a')) {
    $sidebar_a = $this['config']->get('sidebar-a'); 
    $maininner_width -= $sidebar_a_width;
    $css[] = sprintf('#sidebar-a { width: %d%%; }', $sidebar_a_width);
}

if ($this['modules']->count('sidebar-b')) {
    $sidebar_b = $this['config']->get('sidebar-b'); 
    $maininner_width -= $sidebar_b_width;
    $css[] = sprintf('#sidebar-b { width: %d%%; }', $sidebar_b_width);
}

$css[] = sprintf('#maininner { width: %d%%; }', $maininner_width);

// all sidebars right
if (($sidebar_a == 'right' OR !$sidebar_a) AND ($sidebar_b == 'right' OR !$sidebar_b)) {
    $sidebar_classes .= ($sidebar_a) ? 'sidebar-a-right ' : '';
    $sidebar_classes .= ($sidebar_b) ? 'sidebar-b-right ' : '';

// all sidebars left
} else if (($sidebar_a == 'left' OR !$sidebar_a) AND ($sidebar_b == 'left' OR !$sidebar_b)) {
    $sidebar_classes .= ($sidebar_a) ? 'sidebar-a-left ' : '';
    $sidebar_classes .= ($sidebar_b) ? 'sidebar-b-left ' : '';
    $css[] = sprintf('#maininner { float: %s; }', $rtl ? 'left' : 'right');

// sidebar-a left and sidebar-b right
} else if ($sidebar_a == 'left') {
    $sidebar_classes .= 'sidebar-a-left sidebar-b-right ';
    $css[] = '#maininner, #sidebar-a { position: relative; }';
    $css[] = sprintf('#maininner { %s: %d%%; }', $rtl ? 'right' : 'left', $sidebar_a_width);
    $css[] = sprintf('#sidebar-a { %s: -%d%%; }', $rtl ? 'right' : 'left', $maininner_width);

// sidebar-b left and sidebar-a right
} else if ($sidebar_b == 'left') {
    $sidebar_classes .= 'sidebar-a-right sidebar-b-left ';
    $css[] = '#maininner, #sidebar-a, #sidebar-b { position: relative; }';
    $css[] = sprintf('#maininner, #sidebar-a { %s: %d%%; }', $rtl ? 'right' : 'left', $sidebar_b_width);
    $css[] = sprintf('#sidebar-b { %s: -%d%%; }', $rtl ? 'right' : 'left', $maininner_width + $sidebar_a_width);
}

// number of sidebars
if ($sidebar_a AND $sidebar_b) {
    $sidebar_classes .= 'sidebars-2 ';
} elseif ($sidebar_a OR $sidebar_b) {
    $sidebar_classes .= 'sidebars-1 ';
}
// generate css for dropdown menu

Other Yoo templates

This PHP code and all changes are universal and should work for all templates.

 

JavaScript

Edit file: templates/yoo_inspire/js/template.js

Remove following code from line 18 - 19:

// Fix Browser Rounding
$('.grid-block').matchWidth('.grid-h');

and from line 24 - 38:

// Match height of div tags
var matchHeight = function(){
    $('#top-a .grid-h').matchHeight('.deepest');
    $('#top-b .grid-h').matchHeight('.deepest');
    $('#bottom-a .grid-h').matchHeight('.deepest');
    $('#bottom-b .grid-h').matchHeight('.deepest');
    $('#bottom-c .grid-h').matchHeight('.deepest');
    $('#innertop .grid-h').matchHeight('.deepest');
    $('#innerbottom .grid-h').matchHeight('.deepest');
    $('#maininner, #sidebar-a, #sidebar-b').matchHeight();
};

matchHeight();

$(window).bind("load", matchHeight);

 
Before closing tag: })(jQuery); add following code:

$.onMediaQuery('(min-width: 960px)', {
    init: function() {
        if (!this.supported) this.matches = true;
    },
    valid: function() {
        $.matchWidth('grid-block', '.grid-block', '.grid-h').match();
        $.matchHeight('main', '#maininner, #sidebar-a, #sidebar-b').match();
        $.matchHeight('top-a', '#top-a .grid-h', '.deepest').match();
        $.matchHeight('top-b', '#top-b .grid-h', '.deepest').match();
        $.matchHeight('bottom-a', '#bottom-a .grid-h', '.deepest').match();
        $.matchHeight('bottom-b', '#bottom-b .grid-h', '.deepest').match();
        $.matchHeight('bottom-c', '#bottom-c .grid-h', '.deepest').match();
        $.matchHeight('innertop', '#innertop .grid-h', '.deepest').match();
        $.matchHeight('innerbottom', '#innerbottom .grid-h', '.deepest').match();
    },
    invalid: function() {
        $.matchWidth('grid-block').remove();
        $.matchHeight('main').remove();
        $.matchHeight('top-a').remove();
        $.matchHeight('top-b').remove();
        $.matchHeight('bottom-a').remove();
        $.matchHeight('bottom-b').remove();
        $.matchHeight('bottom-c').remove();
        $.matchHeight('innertop').remove();
        $.matchHeight('innerbottom').remove();
    }
});

var pairs = [];

$.onMediaQuery('(min-width: 480px) and (max-width: 959px)', {
    valid: function() {
        $.matchHeight('sidebars', '.sidebars-2 #sidebar-a, .sidebars-2 #sidebar-b').match();
        pairs = [];
        $.each(['.sidebars-1 #sidebar-a > .grid-box', '.sidebars-1 #sidebar-b > .grid-box', '#top-a .grid-h', '#top-b .grid-h', '#bottom-a .grid-h', '#bottom-b .grid-h', '#bottom-c .grid-h', '#innertop .grid-h', '#innerbottom .grid-h'], function(i, selector) {
            for (var i = 0, elms = $(selector), len = parseInt(elms.length / 2); i < len; i++) {
                var id = 'pair-' + pairs.length;
                $.matchHeight(id, [elms.get(i * 2), elms.get(i * 2 + 1)], '.deepest').match();
                pairs.push(id);
            }
        });
    },
    invalid: function() {
        $.matchHeight('sidebars').remove();
        $.each(pairs, function() { $.matchHeight(this).remove(); });
    }
});

$.onMediaQuery('(max-width: 767px)', {
    valid: function() {
        var header = $('#header-responsive');
        if (!header.length) {
            header = $('<div id="header-responsive"/>').prependTo('#header');
            $('#logo').clone().removeAttr('id').addClass('logo').appendTo(header);
            $('.searchbox').first().clone().removeAttr('id').appendTo(header);
            $('#menu').responsiveMenu().next().addClass('menu-responsive').appendTo(header);
        }
    }
});

Other Yoo templates

This JavaScript code and all changes are universal and should work for all templates. You can remove bottom-c in three places of this code if there isn't such module position in your template.

 

CSS

Create new file: templates/yoo_inspire/css/responsive.css with following content:

/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (https://www.yootheme.com/license) */

@import url(../warp/css/responsive.css);

/* Searchbox colors for Yoo Inspire */
#header-responsive .searchbox input { color: #666; }
#header-responsive .searchbox input:-moz-placeholder,
.searchbox input::-webkit-input-placeholder,
.searchbox input.placeholder { color: #333; }

/* Breakpoints
----------------------------------------------------------------------------------------------------*/

/* All except large Screens */
@media (max-width: 1220px) {

}

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {

    /* Modules */
    #sidebar-a .grid-v:first-child > .mod-line:before,
    #sidebar-b .grid-v:first-child > .mod-line:before { display: block; }
}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {

}

/* Only Tablets (Portrait) and Phones (Landscape) */
@media (min-width: 480px) and (max-width: 959px) {

    /* Layout */
    #menubar #search { display: none; }
    
    .sidebars-1 #sidebar-a:before,
    .sidebars-1 #sidebar-b:before,
    .sidebars-2 #sidebar-b:before { display: none; }

    /* Modules */
    .grid-h:not(.width33):nth-child(odd) > .mod-line:before { display: none; }

    .grid-h.width25:first-child > .mod-line:before {
        display: block;
        top: auto;
        bottom: -20px;
        left: 0;
        right: 0;
        width: 200%;
        padding: 0 20px;
        border-width: 1px 0 0 0;
    }
}

/* Only Phones */
@media (max-width: 767px) {

    #header { border-bottom-width: 0; }

    #toolbar,
    #headerbar,
    #logo,
    #menu,
    #menubar,
    #breadcrumbs,
    #totop-scroller { display: none; }
}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {

}

/* Only Phones (Portrait) */
@media (max-width: 479px) {

    /* Layout */
    #sidebar-a:before,
    #sidebar-b:before { display: none; }

    /* Modules */
    .grid-h .mod-line:before {
        display: block;
        top: -20px;
        bottom: auto;
        left: 0;
        right: 0;
        border-top-width: 1px;
    }

    /* System */
    #system .items .item,
    #system .items .item:first-child {
        margin-top: 12px;
        padding-top: 18px;
        border-top-width: 1px;
    }

    #system .items :first-child .item:first-child {
        margin-top: 0;
        padding-top: 0;
        border-width: 0;
    }

    #system .items .leading .item {
        margin-bottom: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

Other Yoo templates

This CSS code is universal and should work for all templates. Only remove at the beginning of file custom styles for Inspire template.

 

Demo CSS

If you are using demo styles from templates/yoo_inspire/css/custom.css then make following changes.

Add declaration for responsive logo on line 7:

#logo .custom-logo, #header-responsive .custom-logo {
	width: 140px;
	height: 75px;
	background: url(../../../images/yootheme/logo.png) 0 0 no-repeat;
}

Change declarations for Slideshow with screen background on line 26 and 33:

.screen { 
	max-width: 460px;
	max-height: 340px;
	background: url(../../../images/yootheme/home_screen.png) 0 0 no-repeat;
	background-size: 100% 100%;
}
.screen .wk-slideshow-default { 
	padding: 3.5% 6.5% 21%;
}

Change declarations for Widgetkit Twitter module on line 39 and 45:

#bottom-a .wk-twitter-single {
	margin-top: 15px;
	padding: 30px 13% 0 20%;
	border-top: 1px solid #e7e7e7;
}
#bottom-a .wk-twitter-single.image { background-position: 13% 32px; }

Profiles

Check also all files: templates/yoo_inspire/styles/.../css/custom.css with styles for profiles. If in those files is not included main file: @import url(../../../css/custom.css); or above declarations are overridden then make appropriate changes.

Other Yoo templates

This CSS code is for Yoo Inspire template but declaration for responsive logo might be required also for other templates.

 

Settings

After making all changes go to your template configuration and enable Responsive Layout for default profile and set Sidebars Width to: 25. Do the same for all other profiles where those setting are overridden.

If your configuration panel is blank then you have make a mistake in config.xml file.

 
In frontpage profile change Sidebar A Width to: 40

Disable mobile theme.

If you have enabled Compression in template settings then you have to clear Joomla cache.
Go to Site > Maintenance > Clear Cache and select on list template and Delete it.

CSS Helper Classes

In Warp 6 there is CSS class size-auto to achieve fluid images, videos and objects. There are also useful classes to hide content on specific devices: hidden-desktop, hidden-tablet and hidden-phone.

Widgetkit

If your are using custom styles of Widgetkit design for your template then you have to make it responsive. Download latest Widgetkit bonus styles. Edit style.css file for each widget for your template. Open also style.css file from other template which is responsive and copy code from the end of file which starts with comment /* Responsive --- */ and paste it to your template style.css file. Remember to change in this code the name of CSS classes to match others in this file: .wk-slideset-xxx, .wk-slideshow-xxx.

Other Joomla Extensions

Responsive template would not work in 100% if you have some Joomla Components or Modules that do not have fluid layout. Each extensions should set width of HTML elements in percent's instead of pixels. If you have a component which have main DIV container set to e.g. 700px then it would not be responsive because it would not adopt to current width of template which would be changing for different devices.

Template update

If you have made changes in your template to make it responsive and now in template settings panel you see notice about new version of Warp Theme Framework then do not update your template. Download new ZIP file with your template or free Master template with Warp 6.x and upload by FTP only warp folder. If there is a notice about new template version then you will have to update template through Joomla installer and make once again all changes.