Joomla Templates Club 406,261 posts

[berryc Friend berrycJoin date: January 2008Posts: 29Downloads:0Uploads:0 Thanks: 7]

#129625

Hello,
After reading some other examples on the board, I thought I’d give this a shot…no luck so far.

I’m trying to add a ‘leaderboard’ (728px by 90px) advertising banner ABOVE the current logo and search tools. Very top of the page.

Here’s what I’ve done so far (after backing up of course!)…

1. edited tempate.css and added the following…

#ja-leaderboard {
position: relative;
padding: 5px 0;
text-align: center;
width: 970px;
margin: 0 auto;
clear: both;
}

2. Edited index.php and added the following (my code in RED)

<div id=”ja-headerwrap”>
<div id=”ja-header” class=”clearfix”>
<div id=”ja-leaderboard”>
<?php mosLoadModules(“ldrbrd”); ?>
</div>

3. Created a module position called ‘ldrbrd’

4. assigned a banner to “ldrbrd” position

The banner graphic is inserted into the top of the page (not centered BTW)…but is then covered over by my logo.gif.

The logo.gif has absolute positioning in the default template.css … I’m pretty sure that’s part of the problem. When I change it to relative…it moves out of the way and the banner appears. However, the login/search tools do NOT get pushed down like the logo. Very messed up…so I changed the logo.gif to absolute positioning.

Here’s my site… http://spiritstaging.catholicspiritmedia.com

Thanks for any help…it is greatly appreciated!

-Craig

UPDATE: Thanks folks for all your input! After research that input and looking over a few forums…and finally just looking at the banner code/css in the Teline II template…it’s working!

Step #1 – Added the following to index.php:

<?php if(mosCountModules(‘ldrbrd’)) : ?>
<!– BEGIN: LEADERBOARD –>
<div id=”ja-leaderboard”>
<?php mosLoadModules(‘ldrbrd’, 0); ?>
</div>
<!– END: LEADERBOARD –>
<?php endif; ?>

Step #2 – Added the following to template_css.css:

#ja-leaderboard {
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
overflow: hidden;
width: 100%;
}

#ja-leaderboard table.moduletable {
width: 100%;
}

Step #3 – created new module position ‘ldrbrd’ in Template Manager

Step #4 – assigned banner module to ‘ldrbrd’ position

Voila!

Thanks again folks.

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#253321

What you can do is to change it to this:


<div id="ja-leaderboard">
<?php mosLoadModules("ldrbrd"); ?>
</div>
<div id="ja-headerwrap">
<div id="ja-header" class="clearfix">


And change the css to this:

#ja-leaderboard {
padding: 5px 0;
text-align: center;
width: 100%;
clear: both;
}

1 user says Thank You to Menalto for this useful post

1. berryc

[berryc Friend berrycJoin date: January 2008Posts: 29Downloads:0Uploads:0 Thanks: 7]

#253356

Menalto!
You are great…it’s almost there. Actually, it worked in IE7…but in Firefox, the image isn’t centered.

I tried doing this:

#ja-leaderboard {
display: block;
margin-left: auto;
margin-right: auto;
}

But that didn’t work in either IE7 nor Firefox.

Oh…so close. Any ideas? Very much appreciated Menalto…you do the forum’s and joomlart proud.

Thanks,
Craig

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#253378

Try to add this in the css file:

#ja-leaderboard div.moduletable {
margin: 0 auto;
}

[berryc Friend berrycJoin date: January 2008Posts: 29Downloads:0Uploads:0 Thanks: 7]

#253417

Hi Menalto,
Thanks, but still a no go. I tried adding display: block as well.

Do you think there should be a value for the div.img tag?

Thanks for all of your help and ideas!

-Craig

[mpurvis Friend mpurvisJoin date: May 2006Posts: 2Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#253713

Hello, I wanted a module position at the top of the template so I replaced the old with :

<!-- BEGIN: HEADER -->

<div id="ja-headerwrap">

<div id="ja-box" class="clearfix">

<?php if( $this->countModules('test') ) {?>

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

<?php } ?>

</div>
</div>

<!-- END: HEADER -->

Then added a new module with the position ‘test’ and put my a Simple Image Rotator in the position ( or whatever yoou want) I think this is alot easier myself as you can just keep adding modules…

example at :http:http://www.ausdynamic.com/test

[Author]

Posts