Archived topic

Sidebar widget box shadow effect and radius

2 replies · Started by Leon on November 26, 2017

Viewing posts 1–3 of 3

November 26, 2017 at 10:28 am #434814

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

November 26, 2017 at 4:14 pm #435076

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

November 26, 2017 at 9:33 pm #435256

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

This archived topic is closed to new replies.

Start building better websites today.