Good day people,
I am looking for a solution to add an ad skyscraper on the right side of the forum.
I found some code that I had to put in the header and footer which was working but it pushes the forum to the left, it is making it smaller.
I want the ad to appear in the white unused space?
how can I manage to do that?
Index template:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
<div style="width:70%; float:left">
{$forums}
{$boardstats}
</div>
<div style="width:30%; float:right">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Heading</strong></td>
</tr>
<tr>
<td>
Your ad goes here.
</td>
</tr>
</table>
<br />
</div>
<div class="clear"></div>
<dl class="forum_legend smalltext">
<dt><span class="forum_status forum_on" title="{$lang->new_posts}"></span></dt>
<dd>{$lang->new_posts}</dd>
<dt><span class="forum_status forum_off" title="{$lang->no_new_posts}"></span></dt>
<dd>{$lang->no_new_posts}</dd>
<dt><span class="forum_status forum_offlock" title="{$lang->forum_locked}"></span></dt>
<dd>{$lang->forum_locked}</dd>
<dt><span class="forum_status forum_offlink" title="{$lang->forum_redirect}"></span></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}
</body>
</html>
Thanks for your reply!
I added a Image to let you see what is happening;
How can I get the add to stick on the right side against de forum subjects?
And also: I cannot make the ad place at the right side of the forum subjects in the middle, it is either above the forum or below, how do I do that?
Thanks!
Can you post the contents of your index template. I tested this last night on a default theme and it did line up properly..
(2016-07-06, 08:03 AM)Ashley1 Wrote: [ -> ]Can you post the contents of your index template. I tested this last night on a default theme and it did line up properly..
<html>
<head>
<!-- Site optimized with MySEO 1.0 -->
{$seo_index}
<!-- Site optimized with MySEO 1.0 -->
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
<div style="text-align: center;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Advertentie Forum 1 -->
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-4405765982773173" data-ad-slot="9645182446"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<br />
<div style="width:90%; float:left">
{$forums}
</div>
<div style="width:5%; float:right">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Ads</strong></td>
</tr>
<tr>
<td>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LinksVerticaal -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-4405765982773173"
data-ad-slot="7697413249"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
</tr>
</table>
<br />
</div>
<div style="text-align: center;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ad3 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-4405765982773173"
data-ad-slot="3899668845"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</br>
{$boardstats}
{$footer}
</body>
</html>
Thanks, See the result now with my image. I forgot to also put this code in: <div style="width:90%; float:left">
But now it is pushing my forum to the left, the forum is getting smaller in Width.
And also need to get the skyscraper to the center of the right side, so more down.
Check the percentages - they must add up to 100%. I originally gave 70 / 30. If you're 90, make sure the other div has 10%. You can add text-align: center; to the 2nd div where the add is.
On the img tag you can try:
img {
vertical-align: middle;
}
This the code now:
<div style="width:90%; float:left">
{$forums}
</div>
<div style="width:10%; float:right">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Ads</strong></td>
</tr>
<tr>
<td>
<div style="text-align: center;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LinksVerticaal -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-4405765982773173"
data-ad-slot="7697413249"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
In the image is the outcome.
I circled the edges to let you see what I mean with "pushing the forum to the left"
Can I solve this problem?
And, I can not seem to center the ad.
The code you gave me is that CSS code or do I need to add it in the Index, and were?
Sorry for all the questions but I am kind of new to this.
Can you post the whole index template as you have it now?
<html>
<head>
<!-- Site optimized with MySEO 1.0 -->
{$seo_index}
<!-- Site optimized with MySEO 1.0 -->
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Advertentie Forum 1 -->
<div style="text-align: center;"><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-4405765982773173" data-ad-slot="9645182446"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<br />
<div style="width:90%; float:left">
{$forums}
</div>
<div style="width:10%; float:right">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Ads</strong></td>
</tr>
<tr>
<td>
<div style="text-align: center;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LinksVerticaal -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-4405765982773173"
data-ad-slot="7697413249"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
</tr>
</table>
<br />
</div>
<div style="text-align: center;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ad3 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-4405765982773173"
data-ad-slot="3899668845"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</br>
{$boardstats}
{$footer}
</body>
</html>
You have a missing </div>. Try it like this:
<html>
<head>
<!-- Site optimized with MySEO 1.0 -->
{$seo_index}
<!-- Site optimized with MySEO 1.0 -->
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Advertentie Forum 1 -->
<div style="text-align: center;"><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-4405765982773173" data-ad-slot="9645182446"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<br />
<div style="width:90%; float:left">
{$forums}
</div>
<div style="width:10%; float:right">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Ads</strong></td>
</tr>
<tr>
<td>
<div style="text-align: center;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LinksVerticaal -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-4405765982773173"
data-ad-slot="7697413249"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
</div>
</tr>
</table>
<br />
</div>
<div style="text-align: center;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ad3 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-4405765982773173"
data-ad-slot="3899668845"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</br>
{$boardstats}
{$footer}
</body>
</html>
Vertical-align you need to put on an image tag, and it's not clear where that image is with your ad script.