There may be a situation where you do not wish to have the Protostar template be responsive. This may be because of wide images that you do not want to reduce in size, or 3rd party advertisements or for other reasons.

Removing the responsive styling in Protostar takes more that just setting the Fluid Layout to "Static" in the Template Manager: Edit Style Advanced tab. Even with a "Static" layout, Protostar will still stack the menu items with the class of nav-pills and will stack the sidebar and aside columns for narrow screens. Other @media calls in the template.css for Protostar will change margins, padding and column widths.

You can eliminate most of the responsive styling with a couple of steps. One is to add a link in index.php to a stylesheet that negates most of the responsive styling for narrow screens. The other is to create this stylesheet and add it to your css folder in the Protostar template.

Steps to remove the responsive styling for Protostar

Step 1: Create a safety backup of your current index.php file that is located in the root of the protostar directory under the templates folder. You can do this with an FTP program or your hosting company's file manager.

Step 2: Open up the original index.php in the root of the protostar directory under the templates folder with a text editor. Look for the line

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

Add this line just below:

$doc->addStyleSheet('templates/'.$this->template.'/css/remove-responsive.css');

This will tell Joomla to load the new stylesheet. Since it is loading this stylesheet after the template.css stylesheet, any styles in the stylesheet remove-responsive.css will override the styles in template.css.

Step 3: Open up a blank document in a text editor and save it as remove-responsive.css

Step 4: Add the following lines to this new text document:

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 960px;
    max-width: 960px;
}

@media (max-width: 980px) {
    .header .brand {text-align: left;float: left;}
    .header .nav.pull-right, .header-search {float: right;}
    .nav-pills > li {float: left;}
    [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {width: 23.4043%; }
    .row-fluid .span6 {width: 48.9362%; }
    .row-fluid [class*="span"] {float: left;margin-left: 2.12766%;}
    .row-fluid .span4 {width: 31.9149%}
    .row-fluid .span9 {width: 74.4681% ;}
    .row-fluid .span9 {width: 100% ;}
    .well {padding: 19px;}
}

Step 6: Upload this new document via FTP or your hosting company's file manager to templates/protostar/css/ directory. The template.css file should already be in there.

Step 7: Open up your Joomla site and reduce the size of your browser window. See if the site stays at 960px even when the browser window is reduced. Test the site on a tablet and phone as well.

Special Notes about this process:

This styling is just a starting point. You may find that there are other issues with your site that have responsive styling. Use a diagnostic tool such as Firebug for Firefox to determine the styling. You can add lines to the remove-responsive.css file that negate this additional styling if you need to.

The styles set up in remove-responsive.css set the container to 960px. You can edit this width as you wish.

These styles are only for the Protostar template. 3rd Party templates may have their own special styling applied for a responsive site. 

The @media styling @media (max-width: 980px) will style anything under 98-px wide. This will override the template.css @media styling for any more narrow width.

 

 

 

 

 


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.