Remove borders from image with link
-
Hi, whenever I put a link on an image it gives the image a funny gray surround and a beveled edge. I’d like to remove that so it’s just the image, no borders, no bevels but with the anchor tag on it.
You can see how it looks here:
The blog I need help with is: (visible only to logged in users)
-
Hello there!
It looks like it’s actually not so much the image but having a link in a table that creates the border (as with your more… buttons). That makes things a little bit trickier. Dropping this code in your custom CSS area should do the trick, but you’ll need to add the bikeimg class to the td tags as you have with the first two on that page:
.bikeimg a { border: none; background-color: transparent; }Let me know if that doesn’t work!
Sage -
Hello there,
I’m not seeing any borders on that page you’ve linked, even when I take out the _blank on my end — would you mind linking a page where the borders are still showing?
Thanks,
Sage -
That previous page didn’t have borders. Maybe because in those cases the target was blank. Here’s a test page I’m working on. At the very bottom there is an image with the border which is not in a table. I just added it to the page and cant kill the border (but I haven’t tried your css yet)
-
Hey there,
This should do it then:
.entry-content a { border: none !important; background-color: transparent !important; }This will remove the backgrounds from all links in your content (I can’t target the images specifically unless you’d like to put classes on them). If you’d still like the “more…” links for example to be buttons then you’ll need to assign them a class and then I could write some code that could help turn them into buttons.
Let me know if that doesn’t work,
Sage -
I’ll have to see what this does. All the text links on my site that are not in a strong tag seem to show as little shaded boxes. For example see here where I have standard links (in the shaded boxes) and those same links if I put a tag around them.
-
-
Fantastic. It works great on the images, however all my “more” links or all text links that don’t have some other effect on them just look like regular type. Is there a way to customize maybe the color of a link (and a visited link too)?
-
Hey there,
That’s great to hear! This should work for the text links:
.site-content a { color: #9c8752 !important; } .site-content a:hover { color: #51230c !important; } .site-content a:visited { color: #938b80 !important; }(Then just replace the hex # colours with the colours you would like to use)
Hope that helps,
Sage -
Hi Sage. This worked nicely. The hover seems a little funny. I swapped the colors around but it looks like the hover color flickers but doesn’t stay when you’re hovered over.
BTW – thanks so much for your help.
-
Hey there, that’s great to hear!
I’m not actually seeing any problems with the color flickering etc on my end, no matter what browser I try it in (Chrome, Firefox, Safari)
Would you mind restarting your computer and seeing if it still does the same thing? Are you able to check on a different computer if it has the same issue?
Thanks,
Sage -
OK, I tried a different browser. It’s just with visited links (which to me are all my links). The hover doesn’t seem to work for them and just flickers. Try clicking a link then going back and looking at a visited link and see if it works for you.
-
Hey there,
Sorry, but I still don’t see any flickering, even on the visited links. It might help if you specify the hover for the visited links as well?
.site-content a:visited:hover { color: #a8a8a8 !important; }Hope that helps,
Sage -
-
-
Yes! You’re awesome. Thanks so much for the help. I’ve got a couple other questions. Mind if I hit you with them?
-
Haha, no worries.
It actually helps keep everything organized and easily findable for future people with the same problems if you wouldn’t mind starting a new thread?
Thanks!
Sage
- The topic ‘Remove borders from image with link’ is closed to new replies.
WordPress.com Forums 