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

Select every alternate post.

Discussion in 'Styling and Customization Questions' started by madshark, May 31, 2011.

  1. madshark

    madshark Member

    Is there any way for me to use a conditional and select every other post in xenforo?

    i.e In VB I used the code

    PHP:
    <vb:if condition="$post['postcount'] % 2 == 0">


    From here I could for example specify two different css declarations and style alternate posts in different colours.

    Thank You
     
  2. Forsaken

    Forsaken Well-Known Member

    You can do that purely with CSS:

    Code:
    .messageList .message:nth-child(even)
    {
    background-color:#e0e0e0;
    }
    
     
  3. madshark

    madshark Member


    oh! so if I just slot in a new css slot with the
    Code:
    .messageList .message:nth-child(even)
    and declare what ever I want in there it would work?
     
  4. madshark

    madshark Member

    Heck that does work. But I got a little too excited. What I want to achieve is a little more complex or Im just stupid. Either way...

    What I'm trying here is essentially to move the .messageUserInfo box to the right on alternates. Now I can have a second message_user_info.css with the styling to accommodate the shift to the right. But how would I plug that into the .messageList .message:nth-child(even) so that it can be utilized? :S

    Any inputs would be appreciated.
     
  5. Forsaken

    Forsaken Well-Known Member

    Code:
    .messageList .message:nth-child(even) .messageUserInfo
    {
    float:right;
    }
    
    You'll have to modify things to fit what you have in mind, and change the margin for message content to margin-right:140px; but it should work the way you want with that.
     
    Jake Bunce and madshark like this.
  6. madshark

    madshark Member

    I am stupid ><

    I tried it with

    Code:
    .messageList .messageUserInfo .message:nth-child(even) 


    And no wonder it didn't work. And this is too cool. Well I've styled everything except the .messageUserBlock .arrow bit is it possible to flip it? :/

    Thanks you so much Forsaken!
     
  7. Forsaken

    Forsaken Well-Known Member

    I can try playing with it tomorrow but I have to attempt to get some sleep as I have to start doing interviews for work tomorrow.
     
  8. madshark

    madshark Member

    Thats fine Im in absolutely no rush. It looks fine unless you look closely the arrows pointing somewhere else lol. Im so confused as to how they did the arrows theres no image file so :S oh well.Im going to break more coding and try to figure it out in the mean time. Thanks again. Sleep Well.
     
  9. Wuebit

    Wuebit Well-Known Member

    Got an image of what your trying to do?
     
  10. madshark

    madshark Member

    You know the little arrow next to the userinfo block that points at the message? Like on this message near the top of my avatar? I basically want to flip it to point to the left instead of the right.

    I just learnt that those little guys could now be done purely with css. But Im still trying to figure out how :S lol. I know that its done using some sort of border manipulation the issues is I don't know how the heck you'd change the values to flip it.

    I suspect the code for that arrow is found in the message_user_info.css

    Code:
    .messageUserBlock .arrow
            {
                position: absolute;
                top: 10px;
                right: -10px;
    
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
    
                border: 10px solid transparent;
                border-left-color: @messageUserBlock.border-color;
                border-right: none;
    
                /* Hide from IE6 */
                _display: none;
            }
    
                .messageUserBlock .arrow span
                {
                    position: absolute;
                    top: -10px;
                    left: -11px;
    
                    display: block;
                    width: 0px;
                    height: 0px;
                    line-height: 0px;
    
                    border: 10px solid transparent;
                    border-left-color: @messageAvatarHolder.background-color;
                    border-right: none;
                }
     
  11. Wuebit

    Wuebit Well-Known Member

    Like this?

    HTML:
    .messageUserBlock .arrow
            {
                position: absolute;
                top: 10px;
                left: -10px;
    
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
    
                border: 10px solid transparent;
                border-left-color: @messageUserBlock.border-color;
                border-right: none;
    
                /* Hide from IE6 */
                _display: none;
            }
    
                .messageUserBlock .arrow span
                {
                    position: absolute;
                    top: -10px;
                    right: -11px;
    
                    display: block;
                    width: 0px;
                    height: 0px;
                    line-height: 0px;
    
                    border: 10px solid transparent;
                    border-right-color: @messageAvatarHolder.background-color;
                    border-left: none;
                }
     
  12. madshark

    madshark Member

    I take it you only swapped out the right and left here ?

    Code:
    border-left-color: @messageUserBlock.border-color;
    border-right: none;
    I actually tried that but only with the arrow class not the span. Just ran it through with the span class included. But still no go. Arrow still points > thatawaya need it thisaway < lol I should probably get some sleep too clearly these arrows are making me loose my mind.

    But lol was there anything else you changed in the code?

    Im just plugging in the changes to the message.css and not the whole css @ message_users_info.css

    Code:
    .messageList .message:nth-child(even) .messageUserBlock .arrow
    {
    [B]left[/B]: -10px; /*changed to left to move arrow from right of avatar to left side*/
    
    border: 10px solid transparent;
    border-left-color: @messageUserBlock.border-color;
    border-right: none;
    
    }
    
    .messageList .message:nth-child(even) .messageUserBlock .arrow span
    {
    
    border: 10px solid transparent;
    border-left-color: @messageUserBlock.border-color;
    border-right: none;
    
    }
    Thank you for your time
     
  13. Wuebit

    Wuebit Well-Known Member

    Ah yea I see what you mean I'll have a play on my dev site :)
     
  14. madshark

    madshark Member

    I just realized that you actually gave me the code to move the arrow. I did that already Let me see if this can be clearer

    |
    |> Thats what it is like now
    |

    I need it like this <|

    What we changed in the code does this >|

    Ok I take it thats clear now :S Hopefully
     
  15. Forsaken

    Forsaken Well-Known Member

    Code:
    .messageList .message:nth-child(even) .messageUserInfo
    {
    float:right !important;
    }
    .messageList .message:nth-child(even) .messageInfo
    {
    margin-right:140px !important;
    margin-left:0 !important;
    }
    .messageList .message:nth-child(even) .messageUserBlock .arrow
    {
    left:-10px !important;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg) !important; /* IE 9 */
    -moz-transform:rotate(180deg) !important; /* Firefox */
    -webkit-transform:rotate(180deg) !important; /* Safari and Chrome */
    -o-transform:rotate(180deg) !important; /* Opera */
    }
    
    Should work.

    You'll probably want to flip the new indicator for new posts for even childs to the left as well, or else it'll look odd.
     

    Attached Files:

    Jake Bunce, xIsabel38 and madshark like this.
  16. madshark

    madshark Member

    Well whoda thunk theres a rotate css as well :O you learn something new everyday yup that works flawlessly. Although my initial attempts to move it minus the rotate code like this >| gave me another idea which Im going to try.

    Yikes yes thanks for the reminder about the new marker.

    Thank You Forsaken much appreciated.
     
  17. xIsabel38

    xIsabel38 Well-Known Member

    Thank you for this because this partially helped with something I am requesting as well. Do you happen to know how to make the borders more rounded and less blocky?
    Here's my thread with some images on what I'm trying to achieve.
     
  18. Forsaken

    Forsaken Well-Known Member

    You'll need to mess around with border-radius the border properties.

    http://www.css3.info/preview/rounded-border/

    It can be done through the style property system (Style Properties -> Message Layout -> User Info Container and Style Properties -> Message Layout -> Message Container).

    You'll probably need to play with it quite a bit to get it how you would like, but adding the border and border radius will be easy enough.
     
    xIsabel38 and Jake Bunce like this.
  19. xIsabel38

    xIsabel38 Well-Known Member

    Is it crazy to say that as a non-coder/programmer and someone that knows nothing about CSS let alone CSS3, that I think I actually understand what that all means. I think I might actualy be comfortable going into the code and doing this myself. Thanks so much for the assistance!
     
  20. Forsaken

    Forsaken Well-Known Member

    If you need help, PC me and I can see what I can do, just can't say when I'll respond as I don't visit here all that frequently now, and only to follow/check-up on things.
     

Share This Page