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

XF 1.5 Remove Arrow Span on Tags

Discussion in 'Styling and Customization Questions' started by Amaury, Aug 20, 2015.

  1. Amaury

    Amaury Well-Known Member

    How can I remove the arrow span so the left side looks the same as the right side?

    KHF Tags.PNG
     
  2. Arty

    Arty Well-Known Member

    Its not arrow span, its pseudo element after tag and tag's left border radius that you need to change.

    To remove dot remove
    Code:
    .tagList .tag:after
    To add border radius change border-*-right-radius to border-radius in
    Code:
    .tagList .tag
     
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    I got the first one done, but I'm not finding border-*-right-radius.
     
  4. Arty

    Arty Well-Known Member

    In public.css in rules for .tagList .tag:
    Code:
      border: 1px solid {xen:property primaryLighter};
       border-left: none;
       border-radius: 4px;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
    
    Remove border-left, border-top-left-radius and border-bottom-left-radius
     
    Amaury likes this.
  5. Amaury

    Amaury Well-Known Member

    Thanks, Arty!

    That's progress, but the arrows are still there:

    KHF Tags 2.PNG
     
  6. Arty

    Arty Well-Known Member

    Add display:none to .arrow
    Also make padding on left/right the same for .tag
     
    Amaury likes this.
  7. Amaury

    Amaury Well-Known Member

    There! :)

    Just to stay organized, I moved my edits to EXTRA.css, and I now have this:

    Code:
    .tagList .tag {
        border-left: 1px solid @secondaryLighter;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .tagList .tag:after {
        display: none;
    }
    
    .tagList .tag .arrow {
        display: none;
    }
    KHF Tags 3.PNG
     
    Skylined likes this.

Share This Page