[Support request] Sidebar widget box shadow effect and radius

[Leon]

Hello Tom,

I was wondering if there is a way to make all sidebar widgets and main content areas box shadow effect using css. Plus, ID like to add 6px radius to all of them.

Thank you
Leon

[Lyle]

Hi Leon,

Tom or Leo may have a more elegant method, but give this a go (adjust values as desired):

.sidebar .widget {
    padding: 15px;
    border: 2px solid grey;
    border-radius: 6px;
    box-shadow: 5px 5px 5px grey;
}

.one-container .sidebar .widget {
	padding: 10px;
}

.one-container.both-right .site-main, .one-container.right-sidebar .site-main {
    padding: 15px;
    border: 2px solid grey;
    border-radius: 6px;
    box-shadow: 5px 5px 5px grey;
}

.one-container .site-main {
	padding: 15px;
    border: 2px solid grey;
    border-radius: 6px;
    box-shadow: 5px 5px 5px grey;
}

Cheers!
Lyle

[Leon]

Thank you Lyle.

I’m using separate containers so I’ve achieved what I wanted using below code:

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, {
    box-shadow: 2px 2px 15px grey;
    border-radius: 6px;
}

Thanks again
Leon

[Author]

Posts