Protostar column width adjustment?

[cf1237]

I've worked with this problem before, but it seems that the way Joomla 3.2.3 handles the Bootstrap code has changed a bit, and I can't quite get past it.

Position-8 is where the main left nav lives. It's default width is set in the Protostar template's index.php file to span3.

Position-3 is the main page content. It's default width is set to span6.

I can see where ( I think...) I can change the nav left sidebar width: it's line 167 of the template's index.php file, where I changed it to: <div id="sidebar" class="span2"> However, this override doesn't seem to do anything when I load it in.

I also need to increase the center content width from span6 to span7, just to keep the site's total width working properly. I don't see anywhere in the index.php file to change that - no place I can see where position-3 is assigned a class!

I'm sure this is dead simple, but I can't seem to figure it out.

TIA!

[Zemplate]

Just to be clear, position-3 is a MODULE position. It sits ABOVE the content that is fed in with PHP into <jdoc:include type="component" /> in index.php. position-2 sits below the content area. They all three are located in <div id="content" class="span6"></div> if you are using all three columns in your design.

Code: Select all

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

Positions for the modules are used by the PHP, but they do not show up in the generated HTML nor do they show up in the CSS. You don't style the positions, you style the containing element.

The Protostar template.css defines the width of the three columns within <div class="row-fluid">

<div class="row-fluid">
<div id="sidebar" class="span3"></div>
<div id="content" class="span6"></div>
<div id="aside" class="span3"></div>
</div>

These calls in template.css are controlling the width of the span.3 and span6 within the .row-fluid

.row-fluid .span3 {width: 23.404255317%;}
.row-fluid .span6 {width: 48.936170208%;}

If you change .span6 to make it wider, then you must reduce .span3 accordingly. Remember that .span3 is used for the left and right column. If you just want to target one side or the other, target them like this.

.row-fluid #sidebar.span3 {width: XX%}
.row-fluid #aside.span3 {width: XX%}

[cf1237]

Thanks, excellent explanation.

What I ended up doing was this, in the index.php file:

// Adjusting content width - change main content area from span6 to span7
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span7";
}



// and further down in the same file:

<!-- Begin Sidebar -- changed width to span2 from span3 -->
<div id="sidebar" class="span2">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>

With the right sidebar set to span3, the total = 12, which is the right Bootstrap configuration.

I found this a bit more intuitive than redefining the span classes themsevles in the CSS.

[Zemplate]

Well, if it works for you, that's great. It may well be a better approach.

I liked how you added a note of the changes that you made to index.php for when you upgrade. I learned this lesson just recently - I had gone about making several major changes to the index.php layout in Protostar. I just upgraded from 3.1 to 3.2.3 and lost all sorts of layout changes. I couldn't just replace the index.php with the old one, as the 3.2 version uses a lot more HTML5 and I didn't want to throw that out the window.

There is nothing wrong with modifying the index.php, I am just saying that it is good to make notes as to what and why you did it.

[dteteruk]

Thanks, excellent explanation.

What I ended up doing was this, in the index.php file:

// Adjusting content width - change main content area from span6 to span7
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span7";
}



// and further down in the same file:

<!-- Begin Sidebar -- changed width to span2 from span3 -->
<div id="sidebar" class="span2">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>

With the right sidebar set to span3, the total = 12, which is the right Bootstrap configuration.

I found this a bit more intuitive than redefining the span classes themsevles in the CSS.

Thank you for your advise! It helped me a lot!