Help to make look material design

[William]

Hi there,
I really like the fact the content wrapper has a material design look to it on post pages like this. Is there a way to give a material design to affect the dark purple area on the site?

Kind regards,

Will

[Leo]

Hi there,m

What do you mean by material design?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[William]

Hi there,

Material design is a new approach to making things with shadows/layers etc.

There’s good information on here, and all the big tech giants are pushing for material design all the time:

https://material.io/design

[Leo]

Sorry I’m not really sure what I’m looking at here.

Can you be a little more specific and let me know what exactly you’d like to add to the dark purple area here?

Adding shadows?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[William]

Hi Leo,
Sorry for being vague. I think the ‘Material’ design would include CSS on areas such as:

– Box shadows to show hierarchy. To shadows to show that the dark purple element is above the light purple area

– increase the length of the purple area so that the content wrapper appears above the dark purple area

I hope that makes sense?

[Leo]

Try this CSS for shadow:

.page-hero {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

https://www.cssmatic.com/box-shadow

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[William]

That’s the idea! But could it have a shadow around the whole of the dark purple element similar in style to how it is in the content wrapper?

[Leo]

Have you tried tweaking the shadow with the cssmatic website I linked above?

Or am I missing something?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[William]

Hi there,
I have thank you – the bottom looks good. However, for the top of the element and menu it does not have similar shadow?

[Leo]

Hmm I don’t see a way to apply a shadow following that outline you’ve shown above unfortunately.

There is no way to include the shadow from the bottom of the menu link:
https://www.screencast.com/t/YdVBWUp2

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[William]

Okay, thank you very much for helping anyway!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts