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

XF 1.2 User-generated links

Discussion in 'Styling and Customization Questions' started by Duck, Aug 3, 2013.

  1. Duck

    Duck Member

    How do I get rid of the shadow under them in "hover" mode?

    Screenshot of link in hover-mode:


    I don't want the shadow (or glow) at all.

    Screenshot of admin panel:


    By default, the background image was:


    I cleared that out & it's still there.

    This is a "child" style. I checked this property for the "parent" style & there is nothing in the code box there either. I don't want to get rid of it in the parent style though, as it's a white style.
  2. Duck

    Duck Member

    I'd also like to get rid of the curved ends on the light green background. I think that would be the "radius" property but as you can see in the screenshot, that property field is also blank.

    Do I have to edit a CSS file?
  3. oman

    oman Well-Known Member

    Could you possibly link to your site. I'll see if I can help.
  4. Duck

    Duck Member


    Style is "Night Theme". It's a work in progress. Lots of stuff I'll soon be asking questions about if I can't figure them out on my own.
  5. Jeremy

    Jeremy Well-Known Member

    Do an ACP search for ugcLinkHover. It is a style property.
  6. Duck

    Duck Member

    It leads me to the same style property I posted a screen-shot for in the first post.

    Here's a screen-shot cropped a little wider showing the path in the upper left.

  7. Jeremy

    Jeremy Well-Known Member

    Add into EXTRA.css:

    .ugc a:hover,
    .ugc a:focus {
      box-shadow: 0px 0px 0px #000000;
    Should work.
    Duck likes this.
  8. Duck

    Duck Member

    Are you talking about adding that to the box in the style preferences editor (screenshot above) where it says "Use this box to enter any additional CSS you would like to include." ?

    I just did that & saved it twice & refreshed twice & the links still have the shadow.
  9. Jeremy

    Jeremy Well-Known Member

    No, copy that code into the EXTRA.css template.
    Duck likes this.
  10. Duck

    Duck Member

    OK I just did an ACP search for EXTRA.css which is something I didn't know existed, ..

    I found a totally blank file & pasted it in there, and now the link shadows are gone. Thanks.

    So, in the future, if I wanted to add just a slight shadow that would actually be a "glow" with the dark theme, something not so boldly vivid as the one I just got rid of, what do those values do?

    box-shadow: 0px 0px 0px #000000

    I know the 6 digits after the # sign is the color code, .. what do the three zeros do? I'm pretty sure the first two are the offsets for X and Y, but what's the third one do?
  11. EQnoble

    EQnoble Well-Known Member

    There is actually four px values you can use:

    box-shadow:10px 10px 10px 10px #000000;
    box-shadow: horixonal vertical blur spread color;

    you can also do:
    box-shadow:10px 10px 10px 10px #000000 inset;
    with inset being the shadow is on the inside of the element.

    you can also stack multiple box-shadows on one element.
    Duck likes this.
  12. Duck

    Duck Member

    Damn. It seems like there's unlimited stuff that can be done with the style preferences & CSS files.

    So if there are only 3 px values, the third one is the blur?

    What I don't get is why there was a shadow in the first place if there wasn't anything in the style property box for it, and not even something bleeding through from the parent style.
  13. Duck

    Duck Member

    I've been screwing with that code in the extra.css file, just playing around. :)


    Is there a way I can make the mouse-over shadow flash rapidly & annoyingly as a prank?
  14. Jeremy

    Jeremy Well-Known Member

  15. EQnoble

    EQnoble Well-Known Member

    Yes and if you set the third (blur) to 0px you can set the fourth (spread) without using blur
  16. Naphta

    Naphta New Member

    .emCtrl:hover, .emCtrl:focus, .ugc a:hover, .ugc a:focus {
        box-shadow: none !important;
    Is how I fixed said problem.
    HittingSmoke and Duck like this.

Share This Page