Post Border & Shadow CSS

[kyle]

Hello team,

I have the Avery theme but I’d like my posts to look like the marketeer theme, so with the shadow box style.

Could you please let me know what CSS i need to put into the Additional CSS section?

Thanks so much

[kyle]

Hi has anyone seen this question yet?

[David]

Hi there,

Do you mean the archives post layout?

If so, go to Customizer > Layout > Blog –> Featured Images >>> archives.
Set the featured image alignment to left, and select a smaller media attachment size.

Once thats in place it may require a little CSS. Let mw know.

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

[kyle]

I’m not looking to change any of that. I rather just want the post area itself to be white then the background surrounding the post to be darker, like in the marketer theme.

Hopefully this makes sense?

[David]

Sorry my bad … having a brain freeze>

This CSS to add the shadow to your post container:

.single-post .inside-article {
    border: 1px solid rgba(232,234,237,1);
    box-shadow: 0 0 10px rgba(232,234,237,.5);
}

and this if you want to change the body background color for single posts:

body.single-post {
    background-color: #fafafa;
}

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

[kyle]

thanks David, where would I add that exactly, like what number? right n the beginning or doesnt it matter?

[kyle]

i put it right at the beginning, I see though that my text is extremely close to the “box” on the left though, how can i change that?

[Leo]

It doesn’t matter where you add the CSS – however, the general practice is to add new CSS to the bottom (like writing an article).

I’m not seeing David’s code added.

Can you add it in so I can see the issue?

Let me know 🙂

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

[kyle]

Okay sure I’ll do so now so that you can see.

[kyle]

Okay it is added

[kyle]

also, how can I change my mailchimp email opt in on the front page. I’d would like to allow the name and email box to be side by side with the submit button on the right of those two boxes.

Sorry I know I am spamming with questions.

thanks for your help guys!!

[kyle]

The URL is https://bushcraftboss.com

[Elvin]

Hi Kyle,

also, how can I change my mailchimp email opt in on the front page. I’d would like to allow the name and email box to be side by side with the submit button on the right of those two boxes.

You can try and add this CSS code.

.mc4wp-form-fields {
    display: flex;
}

Let us know if it works for you.

Sorry I know I am spamming with questions.

No problem. But if in case you have a completely different topic that needs addressing, feel free to open up a new topic. 😀

[Leo]

As for the border/shadow, I’m still not seeing the CSS added in the link you’ve provided.

Maybe try clearing your caching plugin after adding the code?

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

[kyle]

Elvin, thanks this worked perfectly!

[Author]

Posts