Image border on social media text widget
-
Hi, I recently used the text widget to put social media icons on my blog, taken from this page http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/. When I viewed it, there a grey lines around each image that I can’t get rid of. This is the website I’m trying to fix http://joanneleeson.wordpress.com/. Any assistance is much appreciated. Thanks!
The blog I need help with is: (visible only to logged in users)
-
Do you have Custom Design upgrade on your account? If so, use the following style to get rid of box shadow around the social media icons:
.widget img { box-shadow: none; }What I still don’t understand is how the “-” character is appearing in between the icons.
-
Hi, thanks for your response
I don’t have the custom design upgrade, only all the basics. I’m not sure why the “-” character is coming up either! -
Actually we don’t need the CSS upgrade to get rid of box shadow. We can make use of inline styles.
Add the following style attribute to each of the img tag.
style="box-shadow:none;"Your current img tag:
<img title="Twitter" alt="Twitter" src="http://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35">Update the above to (notice the style attribute):
<img title="Twitter" alt="Twitter" style="box-shadow:none;" src="http://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35">Add style attribute to rest of the img tags.
I can’t think why the “-” is appearing. However when I added the widget now, they did not appear. So my best suggestion would be to save the html, delete the widget and add it again and see if that makes any difference.
-
-
Do you mean the “-” is persisting despite deleting and adding the widget again?
It is coming from this style but I don’t know why is it showing the “-“
.widget-area .widget a:visited { color: #9f9f9f; }I tagged this topic for staff’s attention but meanwhile please confirm if you have re-created the widget or not.
-
Yes that’s correct, I’ve deleted the widgets, then added them again (with the addition of the style=”box-shadow:none;” code) and the “-” is still showing up
-
#joanneleeson,
You have some spaces in the code. Try this:
<div class=”textwidget”>
<div><img title=”Twitter” src=”http://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png” alt=”Twitter” width=”40″ height=”40″ /><img title=”Pinterest” src=”http://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png” alt=”Pinterest” width=”40″ height=”40″ /><img title=”Facebook” src=”http://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png” alt=”Facebook” width=”40″ height=”40″ /><img title=”LinkedIn” src=”http://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png” alt=”LinkedIn” width=”40″ height=”40″ /><img title=”Instagram” src=”http://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png” alt=”RSS” width=”40″ height=”40″ /></div>
</div> -
-
That was it. I tested that code in a page and the dashes were removed. But how do you present it here without making it all links?
-
-
-
Let me try.
<div class="textwidget"> <div><img title="Twitter" src="http://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" alt="Twitter" width="40" height="40" /><img title="Pinterest" src="http://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" alt="Pinterest" width="40" height="40" /><img title="Facebook" src="http://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" alt="Facebook" width="40" height="40" /><img title="LinkedIn" src="http://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" alt="LinkedIn" width="40" height="40" /><img title="Instagram" src="http://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" alt="RSS" width="40" height="40" /></div> </div> -
Cool. Yeah, I don’t know how to do that. Code block?
Here’s another thing she might want to add to that. For centering text or images in a widget:
<div align=”center”>CODE</div>
-
staff-happychia,
I’ve seen others, including you I think, use a grey box that spreads code or text out and apparently prevents it from being stripped where mine often gets stripped here. Not a quote box, because some code gets stripped with that too.
-
I either select a block of code and click on the “code” button above the text where we write updates OR surround code between
and -
-
-
-
- The topic ‘Image border on social media text widget’ is closed to new replies.
WordPress.com Forums 