Docs

[michaelxxx]

Hi,

I found one of your support posts:
https://community.theme.co/forums/topic/styling-comments-by-post-author/

where you give an example link of an styling:
http://kidonmyhip.com/white-chocolate-cheesecake-with-peanut-butter-frosting/

How can I add this style of the comment fields to my comments?
https://one-million-places.com/reiseberichte/asien/china/unsere-probleme-mit-dem-72-stunden-transitvisum-china

[Rupok]

Hi there,

Thanks for writing in! Do you want to change the background color of comment field? Looks like you hvae added the below code :

.comment-form-comment textarea {
  background-color: #f0efef;
}

Let’s change this or take off to get default style.

Cheers!

[michaelxxx]

Yes, I want to change the color of the comment fields… not of the input area.

I like this design… indented, 2 different colors (alternating), the “reply” button in the comment field, and a small border for each comment with a shadow

[Rupok]

Hi there,

Thanks for clarifying. It would be possible with Integrity stack or if you use Child Theme to modify the template for Ethos.

Cheers!

[michaelxxx]

I use the Ethos stack… and I already have Child Theme active.

So which code do I need to add to my child theme to get this style?
Can you please help me with this?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

ol.x-comments-list > li > article .x-comment-content-wrap {
    background-color: #f2f6f9;
    overflow: hidden;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
ol.children li .x-comment-content-wrap {
    padding: 30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
li.comment {
    border-top: none;
}

Hope that helps.

[michaelxxx]

yeah, looks great. Thank you! 🙂

[Joao]

Glad to hear it 🙂

Cheers

[michaelxxx]

One more question:

At the moment my blue and yellow comment boxes have all the same padding-top (35 px)

How can I reduce the padding just between the blue box (comment) and the yellow box (answer to the comment)?
https://one-million-places.com/unsere-100-schoensten-tierbilder

[Thai]

Hi There,

Please add the following CSS:

article.comment {
    padding-top: 15px;
    padding-bottom: 15px;
}

Hope it helps 🙂

[michaelxxx]

no this doesn´t work… because sometimes there can be 2 child elements.

Please see the attached image.
This is how it should be – small space between yellow boxes, and bigger space before the next blue box.

[Thai]

Hi There,

Please try with this CSS:

.x-comments-list > .comment > .comment {
    padding: 0;
}

If it doesn’t work, please send the link has 2 child comments.

Thanks.

[michaelxxx]

Hi,

no it doesn´t work 🙁

Here is the link with the 2 child comments:
https://one-million-places.com/weltreise/reisevorbereitungen

[Thai]

Hi There,

Please try again with this CSS:

.x-comments-list > .comment > .comment {
    padding-bottom: 0;
}

ol.children ol.children .comment {
    padding-top: 0;
}

Hope it helps 🙂

[Author]

Posts