Putting Border Around My Text Widget in Right Sidebar

I don’t see any manual classes on you sidebar, but anyway yes the correct place to put it is on custom css

eg

<aside class="social-block widget widget_social">
REST OF THE HTML AND CONTENT
 </aside>

You would do this

.widget_social {
border: 2px solid #eee;
padding: 15px;
}

Thanks so much for your help, @salsaturation! I confess I don’t have programming experience, but have been trying to learn as much as I can about WordPress to enhance my sites. So am not sure what a manual class is, is that a text widget?

I used a text widget to create my Cavity Dragons ad in my right sidebar, by combining the headline that says “Cavity Dragons Find Our More” with a link to the Cavity Dragons image. Is a text widget a “social-block widget widget_social” and .widget_social? Want to make sure I understand properly. So I put in the Custom CSS box first code this that you wrote:

<aside class=”social-block widget widget_social”>
REST OF THE HTML AND CONTENT
</aside>

followed by this –
.widget_social {
border: 2px solid #eee;
padding: 15px;
}

Am I understanding correctly? I’m planning to add more of these text widgets highlighting different things to my right sidebar so really appreciate your help so i’ll know how to put a border around each text widget with some padding around it. Thanks! Lisa

No Lisa you have to add, to your custom css, just this:

.widget_social {
border: 2px solid #eee;
padding: 15px;
}

Thanks so much for your help, @d4z_c0nf. That worked perfectly for putting a border & padding around my social links box which is great. What is the code for a text widget? I used a text widget to make my Cavity Dragons ad that is right underneath the social links box – it has the headline Cavity Dragons Game – Find Out More & then the image of a cavity dragon with a gold background.

@lisa

Opps sorry for not making that very clear.

I recommend you first install a widget class plugin like https://www.ads-software.com/plugins/widget-css-classes/

then add classes like ‘dragon’

then in custom css you add:

.dragon {
border: 2px solid #eee;
padding: 15px;
}

You can also combine the css like this so that you don’t have multiple ones that have the same styling eg lets say you have dragons, sheep, and cows as you classes

.dragon, .cows, .sheep {
border: 2px solid #eee;
padding: 15px;
}

If you want to put that border for all widgets in that area?

#right.widget-area .widget{
border: 2px solid #eee;
padding: 15px;
}

and I suggest to add a margin-bottom:5px (for example).

If you want to border a specific widget you need to know its class, you can do that with mouse right-click -> inspect element (I think you have it), and look for something like <aside class=”…”>

In this specific case you can see:
<aside id=”text-6″ class=”widget widget_text”>

this class is generic so adding these lines to your css:

#right.widget-area .widget_text{
border: 2px solid #eee;
padding: 15px;
}

will add that border to all text widgets in that area.
To border just that one use its id:
#text-6{
border: 2px solid #eee;
padding: 15px;
}

Wow, thanks so much to both of you for all your help,@salsaturation and @d4z_c0nf. I want to put a border around each individual text widget. Sounds like you’ve each given me a great approach to use.

@salsaturation, I’ll look into that widget class plug in to make the process simpler, though it sounds like I can also do it alternatively by finding the name of a specific text widget.

So appreciate your both sharing your expertise with me, hope you have a great weekend!

Hi Lisa, You might want to try Firebug to help you solve these sorts of problems. Check out this article on the Customizr site.

Thanks so much, @electricfeet. Great info, I didn’t know about Firebug before.

I’ll mark this query as resolved since the 3 of you gave me the perfect info I need to take care of these issues. Thanks all, I learned a lot today!