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