XF 1.2 Need to put an arrow on messageContent

[Matthew Hawley]

I am not good with arrows...never got one. Can anyone help?

 

[Steve F]

http://cssarrowplease.com/

 

[Matthew Hawley]

http://cssarrowplease.com/

Didn't work.

.message .messageContent:after, .message .messageContent:before
{
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.message .messageContent:after
{
    border-color: rgba(236, 237, 238, 0);
    border-right-color: #ecedee;
    border-width: 30px;
    margin-top: -30px;
}
.message .messagecontent:before
{
    border-color: rgba(209, 212, 214, 0);
    border-right-color: #d1d4d6;
    border-width: 36px;
    margin-top: -36px;
}

 

[Steve F]

Hmm, I remember having a problem using pseudo before.

You can use the existing messageUserInfo arrow to do this also. Just have to change where it sits and CSS.

http://gamerexit.com/threads/happy-thanksgiving.1737/

Just check out the CSS I used there.

 

[Matthew Hawley]

I really need this....last part of the puzzle.

 

[Matthew Hawley]

@Steve F Okay I sort of got it working. I had to put position:relative on .messageInfo. There is a slight problem.

It seems that the height of the post is affecting the top: ;

I want it to be here

 

[Matthew Hawley]

Anyone?

 

[Shelley]

Not sure this will even work on your layout but I did the following (it's going to need additional work for other browsers for the colouring.

 .message .messageUserBlock .arrow {
 transform: rotate(180deg);
 right: -17px;
 -moz-border-left-colors: #b2b2b2;
}
 .message .messageUserBlock .arrow span { left: -11px; -moz-border-left-colors: #cecece;}
.message .messageContent {border: 1px solid #b2b2b2; border-radius: 5px; background-color: #cecece;}

 

[Matthew Hawley]

Not sure this will even work on your layout but I did the following (it's going to need additional work for other browsers for the colouring.

.message .messageUserBlock .arrow {
transform: rotate(180deg);
right: -17px;
-moz-border-left-colors: #b2b2b2;
}
.message .messageUserBlock .arrow span { left: -11px; -moz-border-left-colors: #cecece;}
.message .messageContent {border: 1px solid #b2b2b2; border-radius: 5px; background-color: #cecece;}

View attachment 62103

Didn't work...maybe because I have all the message user info background stuff cleared.

 

[Shelley]

Didn't work...maybe because I have all the message user info background stuff cleared.

I'll be honest it may need adjusting and adapting to your needs but you have likely something overriding the css above. But it's there to play with and tinker around to your needs.