I want to know is there a way to increase the default width of the columns in magento default theme, version 1.8.1? If so, where do i access this information and how do i update it? I know that by default we have 2 column with right bar.
Magento – increase the width of the column layout on default magento theme
columndefaultlayout
Related Solutions
Just follow my answer on this recent thread.
Basically you need to create a structural block that should come just below the content section, but just above the footer section. This way structural block will appear after the content section, which is in 2 column right bar section.
Please note, instead of 2-column-left.phtml
that I have used in that answer, you need to call the structural block inside 2-column-right.phtml
.
Hope that helps
Edit
It seems that the provided link is not working now. So I am now responsible to add a full solution here. Thanks for my friend @DavidManners to notify me. :-)
Basically we need to add a structural block in between content section and footer section. For this create a local.xml
file and add this layout update.
File : app/design/frotend/<package>/<theme>/layout/local.xml
<layout>
<default>
<reference name="root">
<block type="core/text_list" name="block.after.content" as="after_content" translate="label">
<label>Sub Content Area</label>
</block>
</reference>
</default>
</layout>
By putting this content, we just added a new structural block inside root
block. Here root block is what page layout block
. It determines which layout a page holds. So the template file corresponding to root
block vary depend upon the layout we need. Suppose if we need a 2 column right
layout, then what we need to do is set the correpsponding template to this block. It would be done like this.
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>
Now I assume your page is 2 column right
layout, then in that case, you need to add this content by manually editing the file.
File : app/design/frontend/<package>/<theme>/template/page/2columns-right.phtml
<div class="main-container col2-right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
<div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>
</div>
</div>
<!-- here comes our custom content -->
<div><?php echo $this->getChildHtml('after_content') ?> </div>
Here we are calling our block after_content
manually. The position at which the block is calling is very important here. It should be in between the (content, right
) blocks and footer
block. This way our block will get a full-page-width
access.
However the manual addition I have shown above should do in a custom theme. Dont do this in base/default
theme. Always use a package theme other than base/default
for better extendability. Additionally, if you need to include this block in every page layout, then you need to repeat the second operation in every other page layout template files. ie phtml files that comes inside app/design/frontend/<package>/<theme>/template/page/
directory.
If you remove 'type' => 'number'
from the array then you will be able to change the width.
Best Answer
You can adjust the width in the stylesheets:-
Just adjust the percentages to the width you want them to occupy.
Alternatively, rather than modifying the width of the columns in the
2-column-left
,2-column-right
or3-columns
layouts, you could create your own custom layout...