Daniweb Style First Post To Accomodate Advertisements

TheBigK

Well-known member
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.webp
 
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:
 
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;
}
 
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).
 
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?
 
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. :|
 
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.
 
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.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
Top Bottom