Dropshadow for blog posts

[Atheri]

Hello,

I’ve just started using standard X-theme, with Ethos stack and using homepage with 3-column masonry grid.
There are 2 things I’m having trouble customizing, perhaps you can assist me.

1. Adding dropshadow that would look nice. As no matter how I try to add it via Additional CSS, it acts really strangely, there is whitespace in the bottom and the right-side seems to be cut off?

Attached picture “shadow1” on how it looks even with the standard box-shadow:
box-shadow: 3px -3px 5px 6px #ccc;

2. How can I change the color of this specific line?
   It seems to change automatically depending on my header color.
   However I would like to manually target this and select a specific color.

As there is a limit on image uploads, I will share it via link:

Thanks a lot!

[ruenel]

Hello Rain,

Thanks for writing in!

1.) I have checked your site and I found out that you are using the incorrect class selector. It is best that you use entry-cover instead.

2.) The line you were asking for is actually the bottom border of the navbar. It is actually using a semi-transparent white border color. The color is coded into the theme’s stack styles. This is the actual code:

.x-navbar {
    border-bottom: 2px solid rgba(255,255,255,0.5);
}

Feel free to make modify the given default code as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

[Atheri]

Amazing, you solved both issues in a matter of minutes.

Thank you so much for your help!

[marc_a]

Hi Rain,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.