XF 1.2 User-generated links

Duck

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

Screenshot of link in hover-mode:

hover.webp

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

Screenshot of admin panel:

admin-cp-uglh.webp

By default, the background image was:

@imagePath/xenforo/gradients/category-23px-light.png

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.
 
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?
 
Add into EXTRA.css:

Code:
.ugc a:hover,
.ugc a:focus {
  box-shadow: 0px 0px 0px #000000;
}

Should work.

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.
 
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?
 
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.
 
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.
 
I've been screwing with that code in the extra.css file, just playing around. :)

glow.webp

Is there a way I can make the mouse-over shadow flash rapidly & annoyingly as a prank?
 
Top Bottom