Firstly I love your work. The Salient theme is a huge upgrade on my previously most favoured theme "Highend".
My question today is regarding box shadows. I am using the the Material skin.
1. The theme allows you enable "Boxed Style" which activates a hover drop shadow. Where can I edit the values of this hover drop shadow?
2. The theme allows you to add "Box Shadows" with various degrees of depth such as Small, Medium, Large. Where can I edit the values of these depth values?
I can handle the experimenting of code side of things. I just can't find the right location in the css files in the Theme editor. What is the relevant files and lines of code for questions 1 & 2?
Please provide the page url so that i can write up the custom css for whats possible. The Easiest way to locate the code is to use the Chrome Dev Tools "Inspect Element" Option.
(I have read a web design article and this image shows how to use box shadows well and I want to edit both the Salient box shadows and boxed columns to match).
I did your tip and found box-shadows in grid-system.css but after playing around with values, nothing changed on my website.
Thank you in advance!
Edit: If your custom css is skin specific, note I am using "Material" on my real website.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hello,
Firstly I love your work. The Salient theme is a huge upgrade on my previously most favoured theme "Highend".
My question today is regarding box shadows. I am using the the Material skin.
1. The theme allows you enable "Boxed Style" which activates a hover drop shadow. Where can I edit the values of this hover drop shadow?
2. The theme allows you to add "Box Shadows" with various degrees of depth such as Small, Medium, Large. Where can I edit the values of these depth values?
I can handle the experimenting of code side of things. I just can't find the right location in the css files in the Theme editor. What is the relevant files and lines of code for questions 1 & 2?
Thank you in advance!
Greg
Hey,
Please provide the page url so that i can write up the custom css for whats possible. The Easiest way to locate the code is to use the Chrome Dev Tools "Inspect Element" Option.
Thanks
ThemeNectar Support Team
Hi Tahir,
Thank you for the reply.
I have set up this page for you to see what I am referring to.
How can I edit these shadows?
(I have read a web design article and this image shows how to use box shadows well and I want to edit both the Salient box shadows and boxed columns to match).
I did your tip and found box-shadows in grid-system.css but after playing around with values, nothing changed on my website.
Thank you in advance!
Edit: If your custom css is skin specific, note I am using "Material" on my real website.
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.wpb_column[data-shadow="small_depth"] > .vc_column-inner > .column-bg-overlay-wrap { box-shadow: 0 10px 50px rgba(0,0,0,0.2) , 0 13px 45px rgba(0,0,0,0.2) !important; } .wpb_column.boxed:hover > .vc_column-inner { box-shadow: 0 17px 25px rgba(0, 0, 0, 0.39) !important; -webkit-box-shadow: 0 17px 25px rgba(0, 0, 0, 0.37) !important; }Thanks
ThemeNectar Support Team