• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Daniweb Style First Post To Accomodate Advertisements

TheBigK

Well-known member
#1
I like the way Daniweb has modified the first post to accomodate the 300x250 px advertisement. I wish to know whether we can do the same in XF. I'm sure lot of XF owners would benefit from it.

Here's how it looks -

Screen Shot 2012-01-15 at 2.29.38 PM.png
 

TheBigK

Well-known member
#2
I've been trying to look at the message list - but can't figure out how exactly can I shrink the width of first message by 300px from right to accomodate the advertisement box. o_O

Even the firebug isn't helping me! :censored:
 

Forsaken

Well-known member
#4
Add this to the message template, below the <li> tag:

Code:
<xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 0">
<div class="right_block">
<!-- Ad code here -->
</div>
</xen:if>
Add this to the extra.css template:

Code:
.messageList .message:first-child .messageInfo.primaryContent { margin-right: 310px; }

.messageList .message:first-child .right_block
{ 
float:right; 
height:250px !important;
width:300px !important;
}
 

Forsaken

Well-known member
#6
Add this to the end of class="" in the <li> tag in the message template:

Code:
{xen:if '{$post.position} % {$xenOptions.messagesPerPage} == 1', indent}
Add this below the <li> tag in the message template:

Code:
<xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 1">
<div class="right_block">
<!-- Ad code here -->
</div>
</xen:if>
Add this to the extra.css template:

Code:
.messageList .message.indent .messageInfo.primaryConent { margin-right: 310px; }
.messageList .message.indent .right_block
{
float:right;
height:250px !important;
width: 300px !important;
}
Can't do this one with CSS as it isn't supported by nearly every version of IE (Including IE8).
 

Forsaken

Well-known member
#8
If you need to change the position of the ad, just change the # at the end of the conditional (2 is the 3rd post, while 3 is the 4th post).
 

TheBigK

Well-known member
#9
This is excellent! Thanks a *LOT* forsaken!

I wish to show the advertisement only to our guests and not to our our logged in members. I tried adding -

<xen:if is="!{$visitor.user_id}">
</xen:if>

around the code you suggested for message template. But what it does is - create a blank rectangular space for the logged in members (removes the ads, but keeps the box as it is). How can I fix it?

Plus, is there a way to make the text in longer posts wrap around this box we've created?
 

TheBigK

Well-known member
#10
Okay, after some trial and error, I've found out that following line of code is creating problem:-


.messageList .message.indent .messageInfo.primaryConent { margin-right: 310px; }
If I wrap the concerned 'div' in <xen:if> tag, it does not change the width. :|
 

Forsaken

Well-known member
#11
Code:
{xen:if '{$post.position} % {$xenOptions.messagesPerPage} == 1 AND !{$visitor.user_id}', indent}
Code:
<xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 1 AND !{$visitor.user_id}">
<div class="right_block">
<!-- Ad code here -->
</div>
</xen:if>
Code:
<xen:if is="!{$visitor.user_id}">
 
.messageList .message.indent .messageInfo.primaryConent { margin-right: 310px; }
.messageList .message.indent .right_block
{
float:right;
height:250px !important;
width: 300px !important;
}
 
</xen:if>
Try that instead, I don't have time to test it right now though.
 

TheBigK

Well-known member
#13
Okay tried it using instructions in #6. But it just made the ad push to left somewhere in the limbo between first and second post.
 
F

Floris

Guest
#19
I sometimes wonder why the talented people in this community can't fix a small css problem.

:D
You know html5/css3/js is client side right? You can therefor view the source. On Safari for example (and Chrome) you can right click > inspect element, and then hover with the mouse over the structure on the left to identify what code is where visually. Clicking on it puts focus on it, and you get the rendered css on the right of it in a column.