[Resolved] how to add shadow effects in the comment box

[Sanu Kumar]

how to add shadow effects in the comment box

[David]

Hi there,

try this CSS:

.comments-area {
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
}

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

[Sanu Kumar]

i want shadow effects in every comment box replied by me and by my readers

[David]

Then you need to target the .comment-content css class instead of .comments-area

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

[Sanu Kumar]

Thanks, David

[David]

You’re welcome

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

[Sanu Kumar]

hey David

If you don’t mind then I need one more help.

Could u tell me how to shift comment box in the right direction which was replied by me only?

[Leo]

Something like this?

.comments-area .comment-author-masteryblogging .comment-body {
    padding-left: 30px;
}

By default WordPress should have reply option on in the comment so it shows up like this:
https://www.screencast.com/t/S6bWjbWeX

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

[Sanu Kumar]

thnx Leo

[Leo]

No problem 🙂

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

[Sanu Kumar]

After adding this CSS, my Gravatar is also shifting, I don’t want to shift my Gravatar, I just want to shift only comment box replied by me only

[Leo]

Try this instead:

.comments-area .comment-author-masteryblogging .comment-body .comment-content {
    margin-left: 90px;
}

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

[Sanu Kumar]

now its fine

[Leo]

Great!

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

[Author]

Posts