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

Discussion in 'Styling and Customization Questions' started by Matthew Hawley, Nov 29, 2013.

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    [​IMG]
    I am not good with arrows...never got one. Can anyone help? :)
     
  2. Steve F

    Steve F Well-Known Member

  3. Matthew Hawley

    Matthew Hawley Well-Known Member

    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;
    }
     
  4. Steve F

    Steve F Well-Known Member

  5. Matthew Hawley

    Matthew Hawley Well-Known Member

    I really need this....last part of the puzzle.
     
  6. Matthew Hawley

    Matthew Hawley Well-Known Member

    @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: ;
    [​IMG]

    I want it to be here

    [​IMG]
     
  7. Matthew Hawley

    Matthew Hawley Well-Known Member

  8. Shelley

    Shelley Well-Known Member

    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 likes this.
  9. Matthew Hawley

    Matthew Hawley Well-Known Member

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

    Shelley Well-Known Member

    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.
     
    Adam Howard and Steve F like this.

Share This Page