How do you change the width of the container size of the default Protostar template that comes with Joomla 3.3.6

Question

The default (container) width of the protostar template is set for 960px, in the default responsive Static layout. I need the protostar template to remain in the responsive Static layout, yet with the width of 1150px, in the responsive Static layout.

How do I change the fixed (container) width (960px to 1150px) in the responsive Static layout, of the default protostar template?

I understand, I may need to create a new css file and possibly add to another file.

If you can tell me all of the necessary steps, in order to change the fixed width from 960px to 1150px, staying in the responsive Static layout of the default protostar template, it would be really Very Much Appreciated!

Thank You Very Much

Answer 1

The width is set it the file templates/protostar/css/template.css, as Dmitry pointed out, but because the Protostar template is part of core Joomla, any changes might be gone when you update Joomla.

First, create a copy of the template (if you haven't done it already). Instructions can be found here. Use any name you like, but avoid spaces and special characters.

Personally I find the Protostar template.css file a bit messy (almost 7500 lines of code). I think it's better to create a new file for your CSS overrides. Call it whatever you like (I use custom.css), and place it in the templates/YOURTEMPLATENAME/css/.

Now edit the file templates/YOURTEMPLATENAME/index.php. Just before the closing </head> tag (aprox. line 121), add the following code:

<?php
  $doc->addStyleSheet(JUri::base() . 'templates/' . $this->template . '/css/custom.css', $type = 'text/css', $media = 'screen,projection');
?>

This should load your CSS file after everything else. Add any changes to this file.

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1130px;
}
.span12 {
width: 1130px;
}
.offset12 {
margin-left: 1170px;
}
.container {
max-width: 1150px;
}

Edit: Since Joomla 3.5.0 you can create a custom CSS file at /templates/protostar/css/user.css which will be loaded automatically and won't be overwritten by future updates to the template.

Answer 2

You should change the templates/protostar/css/template.css:

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.span12 {
width: 940px;
}
.offset12 {
margin-left: 980px;
}
.container {
max-width: 960px;
}

But it is possible that these changes will be overwritten on next update. I advice you to copy the Protostar template and make the changes you need.

Edit: Since Joomla 3.5.0 you can create a custom CSS file at /templates/protostar/css/user.css which will be loaded automatically and won't be overwritten by future updates to the template.