How to wrap the sidebar widgets

Tagged: widgets, wrap

This topic has 5 replies, 2 voices, and was last updated 10 years, 4 months ago by Antxon.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
December 1, 2013 at 5:43 pm #9252
Antxon
Customer
Hi,

I am using the Content-Sidebar layout for the majority of my internal pages. Is there a way to wrap the content of the widgets on this side bar. I would like to wrap them in a white box as I will be using a semi-dark background texture for the website.

The website is located here

Thanks in advance.
December 2, 2013 at 4:48 pm #9263
serenae
Customer
The only widgets I see are the social media links (“connect with us”) and the subscribe form (“free powerful tools”). Are these the widgets you want to wrap?
December 2, 2013 at 7:55 pm #9267
Antxon
Customer
Hi Serenae,

Would like to wrap those two and any other widget I my put on the sidebar. By doing these two I will learn how to do the rest, I assume.

Thanks in advance.
December 2, 2013 at 8:31 pm #9278
serenae
Customer
All right, so the easiest way is to add some custom CSS. I prefer to do it by using the ‘custom css’ feature in Jetpack, but you can also look for .sidebar .widget in the theme’s CSS file and modify it directly.
```
.sidebar .widget {
    background-color: #FFFFFF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    padding: 10px;
}
```
I added a little padding and the same shadow you have in the main content area. Just remove the box-shadow line if you don’t want it.
December 2, 2013 at 11:29 pm #9297
Antxon
Customer
Awesome!

I will give it a shot once I get back home from work.

Thanks for the quick response.
December 3, 2013 at 12:22 am #9298
Antxon
Customer
Tested and it works!

Thanks serenae!
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘How to wrap the sidebar widgets’ is closed to new replies.