It may be that you wish to have a wider content area or wider columns on the left and right. Following are some suggestions on how you might approach this. Let's look at what the default settings are in the index.php and the template.css for the Protostar Template.

Default Protostar settings for the left, center and right columns

Left Column - position-8

If you have the Protostar Template as your Front End template and you place a module into position-8, it will appear in the left hand column. Below is a snippet from the index.php that places this position-8 module in the #sidebar div and assigns it the class .span3

<div id="sidebar" class="span3">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>

Right Column - position-7

For a module placed into position-7, this is the code in index.php for that position:

<div id="aside" class="span3">
    <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>

Template.css styling for .span3

The template.css then styles .span3 with this width (for wide screen monitors).

.row-fluid .span3 {
    width: 23.4043%;
}

Default settings for the center column

The main content and modules placed into position-3 and position-2 are put into the webpage in index.php with the following lines:

<main id="content" role="main" class="<?php echo $span;?>">
    <!-- Begin Content -->
        <jdoc:include type="modules" name="position-3" style="xhtml" />
        <jdoc:include type="message" />
        <jdoc:include type="component" />
        <jdoc:include type="modules" name="position-2" style="none" />
    <!-- End Content -->
</main>

The <main> element will be assigned a class of .span6 if there are modules on the left and right. The <main> element will be assigned a class of .span9 if only one of the columns has modules placed into it. The <main> element will be assigned a class of .span12 if neither of the right or left columns have modules assigned. This is done in the <?php ... ?> section of the index.php file. With a series of if and elseif statements, the file tests for which positions have been assigned and sets the value of the variable $span accordingly. This php code assumes that both position-7 and position-8 will be assigned a class of .span3.

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
    $span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span9";
}
else
{
    $span = "span12";
}

Following are the styles for these span classes in template.css

.row-fluid .span6 {
    width: 100%;
}

.row-fluid .span9 {
    width: 48.9362%;
}

.row-fluid .span12 {
    width: 100%;
}

How to modify the default settings for the .span classes in Protostar

There are several possible approaches to modifying these default settings to customize your website. You can change the percentages of the widths for these span classes in your overriding custom stylesheet. You can edit the index.php so that it assigns wider or more narrow .span classes to the right and left column.

Changing the .span classes for the left and right columns to .span2 and adjust the center area

Create a backup of your index.php in Protostar before making any changes to the original file. Open the index.php in a text editor.

You will need to adjust the <?php ... ?> if statement to give the center column a proper .span class.

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span8";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
    $span = "span10";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span10";
}
else
{
    $span = "span12";
}

Next you need to change the lines for position-8 and position-7 to have a class of .span2

<div id="sidebar" class="span2">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>

<div id="aside" class="span2">
    <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>

Save your index.php in your Protostar directory on the hosting server. Open up your site in a web browser. The left and right columns should be more narrow and the center area should be wider. There may be other styling that you need to adjust to narrow down the content within these modules.

Change for span2 on the left and span4 on the right

The same concept would apply if you wanted to have a more narrow column on the left and a wider column on the right, except you would have to be more creative with the php if statement in index.php. 

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
    $span = "span8";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span10";
}
else
{
    $span = "span12";
}

<div id="sidebar" class="span2">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>

<div id="aside" class="span4">
    <!-- Begin Right Sidebar -->
    <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>


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.