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

XF 1.4 Select-to-quote

Discussion in 'Styling and Customization Questions' started by RichardKYA, Apr 24, 2015.

  1. RichardKYA

    RichardKYA Well-Known Member

    Hello,

    I'm hoping someone else has done this and knows how to fix it :)

    I've replaced the "reply" phrase and "multi-quote" phrase with icons in the publicControls, but this also removes the phrases from Select-to-quote and leaves the tooltip empty and unfunctional...

    Screen Shot 2015-04-24 at 17.17.27.jpg

    Where/how can I add the phrases/function back to the tooltip?

    Thanks :)
     
  2. Dylan V

    Dylan V Well-Known Member

    Hi,

    You don't have to delete directly the phrases, but you can hide them using CSS. Example if I add a text-indent to:
    Code:
    .message .item
    {
        text-indent: -9999px;
    }
    Result:

    Screenshot_1.png

    To add the icons, I just used the :before pseudo-element attributing it to:
    Code:
    .publicControls .control:before, .privateControls .control:before
    {
        content: "";
        background: YOUR IMAGE LOCATION;
        margin: 4px 7px 0 0;
        height: 16px;
        width: 16px;
        float: left;
    }
     
  3. RichardKYA

    RichardKYA Well-Known Member

    Awesome!

    Thanks for the text-indent tip, I didn't even think of that :)

    I wonder if you can help me something else as well please?

    I've changed the 'like' button to an icon as well, but I can't get it to change to it's active state when it's clicked and vice-versa.

    Screen Shot 2015-04-24 at 19.17.52.jpg
    Screen Shot 2015-04-24 at 19.18.05.jpg
    You can see the like summary appears, but the button doesn't change

    Screen Shot 2015-04-24 at 19.18.17.jpg

    You can see the button has now changed.

    I've tried multiple things, but the result is always the same :confused:

    Any input would be very much appreciated

    Thanks again :)
     
  4. Dylan V

    Dylan V Well-Known Member

    Yes, it's easy to do. "Like" and "Unlike" have their own class, therefore, for example, after you click "Like", "Unlike" button will be displayed:

    ff4997034f4210bfebda6c32fdb36634.gif

    Use this for the "Like" button:
    Code:
    .publicControls .control.like
    {
        YOUR CODE;
    }
    and this for the "Unlike" button:
    Code:
    .publicControls .control.unlike
    {
        YOUR CODE;
    }
    The image above shows that it works perfectly.
     
  5. RichardKYA

    RichardKYA Well-Known Member

    God, I'm such an idiot :ROFLMAO:

    When I created my icons a couple of months ago, I named them "like_button" and "unlike_button" and at the time, I also changed the classes to match, but obviously this messes it up. What a knob hahaha

    I gave up trying to sort it out because I was always left scratching my head, thinking "WHY WON'T YOU WORK!?"

    Hahaha! :rolleyes:

    Thanks dude :)
     
    Dylan V likes this.
  6. Dylan V

    Dylan V Well-Known Member

    :) You're welcome.
     

Share This Page