[Resolved] Shadows

[Ross Robson]

how can i add a slight shadow behind the content/widget areas so it doesnt look too flat?

Thnks

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ross Robson]

Thats great thanks, could you give me code for the content area one please 🙂

[Ross Robson]

Would like the shadow to be equal around the whole of the box on both content and sidebar

[Tom]

.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;

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ross Robson]

thanks 😀 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?

[Ross Robson]

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

[Tom]

.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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ross Robson]

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? 🙂

[Ross Robson]

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 🙂

[Tom]

Something like this should work:

.main-navigation ul li a {
    border-right: 1px solid #000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ross Robson]

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?

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ross Robson]

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

[Tom]

This piece of CSS is causing that:

.post {
    padding: 15px !important;
}

It’s being added by your “jigoshop” plugin.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts