- This topic has 11 replies, 2 voices, and was last updated 6 months ago by
Leo.
-
AuthorPosts
-
July 16, 2020 at 9:09 am #1365869
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
July 16, 2020 at 12:39 pm #1366037Leo
StaffCustomer SupportHi there,m
What do you mean by material design?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 17, 2020 at 3:15 am #1366523William
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:
July 17, 2020 at 8:15 am #1366900Leo
StaffCustomer SupportSorry 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/July 17, 2020 at 8:42 am #1366947William
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?
July 17, 2020 at 11:44 am #1367084Leo
StaffCustomer SupportTry 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/July 19, 2020 at 3:18 am #1368448William
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?
July 19, 2020 at 7:59 am #1368755Leo
StaffCustomer SupportHave 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/July 19, 2020 at 9:39 am #1368827William
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?July 19, 2020 at 10:06 am #1368848Leo
StaffCustomer SupportHmm 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/YdVBWUp2Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 19, 2020 at 2:11 pm #1369033William
Okay, thank you very much for helping anyway!
July 19, 2020 at 9:20 pm #1369162Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.