1. 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

Discussion in 'Styling and Customization Questions' started by TheBigK, Jan 15, 2012.

  1. TheBigK

    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.png
     
    Digital Doctor likes this.
  2. TheBigK

    TheBigK Well-Known Member

    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:
     
  3. LPH

    LPH Well-Known Member

    Yes, I've considered this ad position too.
     
  4. Forsaken

    Forsaken Well-Known Member

    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;
    }
    
     
    sgesvn, ekine, Veer and 1 other person like this.
  5. LPH

    LPH Well-Known Member

    Forsaken, what would be changed to have the ad in a second post - if it existed? Nothing would show if a second post didn't exist.
     
    Digital Doctor likes this.
  6. Forsaken

    Forsaken Well-Known Member

    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).
     
    ekine and LPH like this.
  7. LPH

    LPH Well-Known Member

    Thank you.
     
  8. Forsaken

    Forsaken Well-Known Member

    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).
     
  9. TheBigK

    TheBigK Well-Known Member

    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?
     
  10. TheBigK

    TheBigK Well-Known Member

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


    If I wrap the concerned 'div' in <xen:if> tag, it does not change the width. :|
     
  11. Forsaken

    Forsaken Well-Known Member

    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.
     
  12. TheBigK

    TheBigK Well-Known Member

    A little lost - where should I add this -



     
  13. TheBigK

    TheBigK Well-Known Member

    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.
     
  14. TheBigK

    TheBigK Well-Known Member

    Update: I figured out that <xen:if> condition does not really work in the extra.css :(
     
  15. Forsaken

    Forsaken Well-Known Member

    <xen:if> works in CSS, I use it all the time.

    You might have to play around with it however, I just am busy today so can't test it.
     
  16. TheBigK

    TheBigK Well-Known Member

    RobParker, cmeinck and Digital Doctor like this.
  17. Floris

    Floris Guest

    <3 daniweb
     
  18. TheBigK

    TheBigK Well-Known Member

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

    :D
     
  19. Floris

    Floris Guest

    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.

     
    TheBigK likes this.
  20. TheBigK

    TheBigK Well-Known Member

    Okay, master! I'll try. But I've a hunch that I'm going to need some expert help. Will post here soon.
     

Share This Page