Archived topic
Shadows
27 replies · Started by Ross Robson on August 17, 2014
how can i add a slight shadow behind the content/widget areas so it doesnt look too flat?
Thnks
Something like this should work:
.sidebar .widget {box-shadow: 10px 10px 5px #555;}
More about box-shadow: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
Thats great thanks, could you give me code for the content area one please :)
Would like the shadow to be equal around the whole of the box on both content and sidebar
.inside-article would be the element you target for the content.
To make it even around the containers, something like should should work: box-shadow: 0 0 10px #222;
thanks :D what would the element be for the comments box also, is there any other comments plugins that you would recommend to use instead of the basic one?
also curious as how i could get the separators like this website has down the sides on its menus as it looks nice, kind of like a bevel effect
.comments-area
You should use Firefox and "Firebug" to explore through the different HTML elements - it makes targeting specific things much easier. Chrome also has an "inspect element" feature.
By default, GP has these gaps between sidebars and content.
Using the Spacing addon, you can adjust this gap to your liking.
sorry i meant to post this link http://www.step-by-step-paleo.com/ i mean the separators on the side menus but i want them in the main nav, any ideas? :)
my site is pontyclundarts.co.uk, as you can see i have a black main menu but be nice to have something separating the options :)
Something like this should work:
.main-navigation ul li a {
border-right: 1px solid #000;
}
How would i find the ID of certain widgets areas so i can place a picture there without the spacing around it, kind of like your blue ones on here?
Using Firebug, right click the widget and inspect element.
Move up the tree until you find the "aside" element, and then grab it's ID.
That's the one you want :)
Hi Tom could you tell me why my page http://7dd.613.myftpupload.com/news/ looks a little off with the spacing? its just this page
This piece of CSS is causing that:
.post {
padding: 15px !important;
}
It's being added by your "jigoshop" plugin.