Joomla Templates Club 406,261 posts

[patricmueller Friend patricmuellerJoin date: January 2009Posts: 2Downloads:0Uploads:0 Thanks: 2]

#137511

Hi,

First of, i would like to thank you for your great template, its a beauty…..

I have a question:

Is it possible to put 2 modules In the position “top” beside the ja_newsflash module.
The reason is: i have deleted the topimg.png picure on the left side, so i get more space……
now i would like to use this space wirth a second module (registrationpro) on the left side.

System conf.

Joomla 1.5.9
URL: http://www.sous-sol.info
Modules: ja_newsflash, registrationpro, mod_cblogin
Modifations: i have Deleted the words: you are here:

Thank you for your help.

Best regards

Patric Mueller
Switzerland

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288289

<em>@patricmueller 108311 wrote:</em><blockquote>Hi,

Is it possible to put 2 modules In the position “top” beside the ja_newsflash module.
The reason is: i have deleted the topimg.png picure on the left side, so i get more space……
now i would like to use this space wirth a second module (registrationpro) on the left side.
</blockquote>
Yes that is possible, just give them both the same position. And then you need to see it it all fits. It probably won’t though. You might need to make some adjustments to the template.css. And you need to adjust the index.php as well so you get space where you removed the topimg.png so you can two modules there.

If you edit template.css here:

#ja-topsl .ja-newflash .moduletable {
padding:0 20px 0 400px;
width:500px;
}

and make padding left 10px you will have the banner to the left. 500+20+400 = 920px maximum for three modules . By making the left padding less you have more space in .ja-newsflash.

And then you need to add a box/module next to #ja-topsl .ja-flash .moduletable on the index.php plus add with and height in template.css (make sure the modules have a class or id). Then you have two boxes/modules in your header (div#ja-topsl). Well then you can add one more.

P.S. You can do the opposite as well and keep the banner to the right.

1 user says Thank You to rhand for this useful post

1. patricmueller

[patricmueller Friend patricmuellerJoin date: January 2009Posts: 2Downloads:0Uploads:0 Thanks: 2]

#288296

Hello rhand,

Thank you for your reply, unfortunately this is to complicated for me.
I`m not so good in html and css…….

Thanks anyway.

Best regards

Patric

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288301

Yes, not an easy fix I agree. Well, you can always contact me (PM) to work it out for you. I am a freelance web developer and do things like this for a living.

Cheers,

Rhand

[yellen Friend yellenJoin date: January 2009Posts: 10Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#288544

I did exactly what you are asking for on a website i am making.

If you follow this tutorial you can have two modules on the top position. Simply put module 1 in topsl1 and module 2 in topsl2

Tips before you start
– Read the whole tutorial before starting.
– Save a copy of the 3 files that will be modified in case you want to go back to how it was.
– For each code part you need to modify, you simply click on CRTL + F and lookup the first line of code.
– On each modifications look at the starting section and ending section so that you can copy and paste the whole sections as showed here.
– On Step 2, you can set the size of the two module by changing the width: 60% and width: 40% to what you want.

Step 1
– Go to ./template/
– Open the index.php file, and look for this section:

<!-- BEGIN: TOP SPOTLIGHT -->

<div id="ja-topslwrap">

<div id="ja-topsl" <?php $tmpTools->noBG4IE6();?>>

<div class="ja-newflash" <?php $tmpTools->noBG4IE6();?>>

<jdoc:include type="modules" name="top" style="xhtml" />

</div>

</div>

</div>

<!-- END: TOP SPOTLIGHT -->

– Change to this:

<!-- BEGIN: TOP SPOTLIGHT -->
<?php if( $this->countModules('topsl1') && $this->countModules('topsl2') ) { ?>
<div id="ja-topslwrap">
<div id="ja-topsl" class="clearfix">
<div id="ja-topsl1">
<jdoc:include type="modules" name="topsl1" style="xhtml" />
</div>
<div id="ja-topsl2">
<jdoc:include type="modules" name="topsl2" style="xhtml" />
</div>
</div>
</div>
<?php } ?>
<!-- END: TOP SPOTLIGHT -->

Step 2
– Go to ./template/css/
– Now open you template.css file and look for this section:

/* Top Spotlight */

...lots of lines here

/* Bottom Spotlight */

and replace with this:

/* Top spotlight */
#ja-topslwrap {

background: url(../images/topslwrap-bg.jpg);

}

#ja-topsl {
clear: both;
padding: 0;
height: 181px;
background: url(../images/topsl-bg.png);
overflow: hidden;
}

.narrow #ja-topsl {

background: url(../images/topsl-bg-n.png);

}

#ja-topsl h3,

#ja-topsl div.nftitle

{

padding: 0;

margin: 2px 0 15px;

font-size: 200%;

}

#ja-topsl div.nfcontent {

margin: 10px 0 0 10px;

}

#ja-topsl h3 a,

#ja-topsl h3 a:hover,

#ja-topsl h3 a:active,

#ja-topsl h3 a:focus {

color: #FFFFFF;

text-decoration: none;

}

#ja-topsl div.moduletable {

padding: 0;

margin: 0;

}

#ja-topsl ul {

margin: 0;

padding: 0;

}

#ja-topsl li {

padding-left: 12px;

margin: 0;

background: url(../images/arrow.png) no-repeat 2px 10px;

}

#ja-topsl1 {
float: left;
width: 60%;
overflow: hidden;
}

#ja-topsl2 {
float: right;
width: 40%;
overflow: hidden;
}

#ja-topsl2 div.moduletable h3, #ja-topsl2 div.moduletable h3 span {
background-image: url(../images/h3-bg-d.gif);
}

#ja-topsl2 div.moduletable {
margin: 20px 0 0;
}

/* Bottom Spotlight */

Step 3
– Go to ./template/
– Open the templateDetails.xml file and look for this line:


<position>top</position>

– and change to this:


<position>topsl1</position>
<position>topsl2</position>

Step 4
– click on the thank you button at the end of my reply 🙂

1 user says Thank You to yellen for this useful post

1. shultman

[Author]

Posts