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

XF 1.2 Need to put an arrow on messageContent

Matthew Hawley

Well-known member
#3
Didn't work.

Code:
.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;
}
 

Matthew Hawley

Well-known member
#6
@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

 

Shelley

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

Code:
 .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;}
Screenshot_33.png
 

Matthew Hawley

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

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