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

Select every alternate post.

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

Forsaken

Well-known member
#2
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
You can do that purely with CSS:

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

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

Forsaken

Well-known member
#5
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.
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.
 
#6
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!
 

Forsaken

Well-known member
#7
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!
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
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.
 

DarkVodka

Formerly Wuebit
#9
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.
Got an image of what your trying to do?
 
#10
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;
            }
 

DarkVodka

Formerly Wuebit
#11
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.
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
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
 
#14
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
 

Forsaken

Well-known member
#15
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.
 

Attachments

#16
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.
 

Forsaken

Well-known member
#18
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.
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

Well-known member
#19
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.
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!
 

Forsaken

Well-known member
#20
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!
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.