XF 1.2 Need to put an arrow on messageContent

Matthew Hawley

Well-known member
xwm0.png

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

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;
}
 
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.webp
 
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.
 
Back
Top Bottom