Joomla Templates Club 406,261 posts

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#144029

Q. How can I change the template to have three columns?: left (with modules), middle (with main information) and right with modules.

A. Please try with my guider:

+ Open templates/ja_topaz/index.php file, at about line 152, find following code section:


<!-- CONTENT -->

<div id="ja-mainbody">

<div id="ja-pathway">
<strong>You are here: </strong><jdoc:include type="module" name="breadcrumbs" />
</div>

<jdoc:include type="message" />

<div id="ja-current-content" class="clearfix">
<jdoc:include type="component" />
</div>

<?php if ( $this->countModules('ja-news') ) { ?>
<!-- JA NEWS -->
<div id="ja-news">
<jdoc:include type="modules" name="ja-news" style="jamodule" />
</div>
<!-- //JA NEWS -->
<?php } ?>

<?php
$spotlight = array ('user5','user6','user7');
$botsl = $tmpTools->calSpotlight ($spotlight,$tmpTools->isOP()?100:99.5);
if( $botsl ) {
?>
<!-- BOTTOM SPOTLIGHT-->
<div id="ja-botsl">
<div class="inner clearfix">

<?php if( $this->countModules('user5') ) {?>
<div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
<jdoc:include type="modules" name="user5" style="jamodule" />
</div>
<?php } ?>

<?php if( $this->countModules('user6') ) {?>
<div class="ja-box<?php echo $botsl['user6']['class']; ?>" style="width: <?php echo $botsl['user6']['width']; ?>;">
<jdoc:include type="modules" name="user6" style="jamodule" />
</div>
<?php } ?>

<?php if( $this->countModules('user7') ) {?>
<div class="ja-box<?php echo $botsl['user7']['class']; ?>" style="width: <?php echo $botsl['user7']['width']; ?>;">
<jdoc:include type="modules" name="user7" style="jamodule" />
</div>
<?php } ?>

</div></div>
<!-- //BOTTOM SPOTLIGHT 2 -->
<?php } ?>

</div>
<!-- //CONTENT -->

<?php if ( $ja_left || $ja_right ) { ?>
<!-- RIGHT COLUMN -->
<div id="ja-colwrap">
<div class="ja-innerpad">

<?php if ($hasSubnav) : ?>
<div id="ja-subnav" class="moduletable_menu">
<h3 class="clearfix"><span class="right-bg clearfix"><span class="left-bg">On this page</span></span></h3>
<div class="ja-boxct-wrap"><div class="ja-box-ct">
<?php if ($jamenu) $jamenu->genMenu (1,1); ?>
</div></div>
</div>
<?php endif; ?>

<jdoc:include type="modules" name="left" style="jamodule" />
<jdoc:include type="modules" name="right" style="jamodule" />
</div></div>
<!-- //RIGHT COLUMN -->
<?php } ?>


and change to:


<div id="ja-left">
<jdoc:include type="modules" name="left" style="jamodule" />
</div>
<!-- CONTENT -->

<div id="ja-mainbody">

<div id="ja-pathway">
<strong>You are here: </strong><jdoc:include type="module" name="breadcrumbs" />
</div>

<jdoc:include type="message" />

<div id="ja-current-content" class="clearfix">
<jdoc:include type="component" />
</div>

<?php if ( $this->countModules('ja-news') ) { ?>
<!-- JA NEWS -->
<div id="ja-news">
<jdoc:include type="modules" name="ja-news" style="jamodule" />
</div>
<!-- //JA NEWS -->
<?php } ?>

<?php
$spotlight = array ('user5','user6','user7');
$botsl = $tmpTools->calSpotlight ($spotlight,$tmpTools->isOP()?100:99.5);
if( $botsl ) {
?>
<!-- BOTTOM SPOTLIGHT-->
<div id="ja-botsl">
<div class="inner clearfix">

<?php if( $this->countModules('user5') ) {?>
<div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
<jdoc:include type="modules" name="user5" style="jamodule" />
</div>
<?php } ?>

<?php if( $this->countModules('user6') ) {?>
<div class="ja-box<?php echo $botsl['user6']['class']; ?>" style="width: <?php echo $botsl['user6']['width']; ?>;">
<jdoc:include type="modules" name="user6" style="jamodule" />
</div>
<?php } ?>

<?php if( $this->countModules('user7') ) {?>
<div class="ja-box<?php echo $botsl['user7']['class']; ?>" style="width: <?php echo $botsl['user7']['width']; ?>;">
<jdoc:include type="modules" name="user7" style="jamodule" />
</div>
<?php } ?>

</div></div>
<!-- //BOTTOM SPOTLIGHT 2 -->
<?php } ?>

</div>
<!-- //CONTENT -->

<?php if ( $ja_left || $ja_right ) { ?>
<!-- RIGHT COLUMN -->
<div id="ja-colwrap">
<div class="ja-innerpad">

<?php if ($hasSubnav) : ?>
<div id="ja-subnav" class="moduletable_menu">
<h3 class="clearfix"><span class="right-bg clearfix"><span class="left-bg">On this page</span></span></h3>
<div class="ja-boxct-wrap"><div class="ja-box-ct">
<?php if ($jamenu) $jamenu->genMenu (1,1); ?>
</div></div>
</div>
<?php endif; ?>
<jdoc:include type="modules" name="right" style="jamodule" />
</div></div>
<!-- //RIGHT COLUMN -->
<?php } ?>


+ Open templates/ja_topaz/css/template.css file, add following code at the end of file:


#ja-left {
width: 20%;
float: left;
}

In this file, at about line 690, find following code section:

#ja-mainbody {
float: left;
width: 75%;
}

and change to:

#ja-mainbody {
float: left;
width: 55%;
}

Hope it helps.

[mig Friend migJoin date: June 2006Posts: 9Downloads:0Uploads:0 Thanks: 2]

#318030

I’m very interested in this template with a left column. I have carefully (I think) followed the instructions above, but my left column appears above the breadcrumbs (You are here) and above the content. Could you please check that everything is OK?
I attach a picture to illustrate what I am saying
(EDITED: I’ve just checked that Mozilla Firefox 3.0.14 is the only browser of those I have that displays the column incorrectly. IExplorer 8, Safari 4.2.0 and Google Chrome 3.0.195.21 display the left column in the correct position)

[sagitar6387 Friend sagitar6387Join date: August 2009Posts: 22Downloads:0Uploads:7]

#323459

After I did as you instructed, the modules I added to left position also shows up in right position.
It seems me origional template put “left” and “right” both at the RIGHT side..So how do I make the modules show up only in the real LEFT side ?
Thnaks.

[sagitar6387 Friend sagitar6387Join date: August 2009Posts: 22Downloads:0Uploads:7]

#323460

I forgot to remove the left position so that’s why I see modules posted on right columns as well.
But here comes the new questions. Three columns made the origional template too tight because the template is only around 970 pixels wide. Can we expand the template horisontally that not wasting so much empty space at both sides ?

Thanks.

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#324665

Hi sagitar6387

This layout is the default of template. as your idea, you have to change to a lot of code.

I am sorry for not being of much help in the case.

[Author]

Posts