Docs

[eimkeith]

I thought I was almost through with the styling of my site, then went to look at blog comments:

http://zuffenhaus.jkeithwalters.com/2016/03/17/new-site/

Here are the styling issues, if you can help with them:

1) text body back ground of comments and the Leave a Reply fields should be the same transparent as that of the blog post above them.
2) post commenter name font is too large
3) Comment/Name/Email/Website field headings are way too large.
4) can the round icon beside the Comments header be made transparent?

Thanks guys; I’d missed these before now.

[Nabeel A]

Hi there,

Thanks for writing in! To customize the comments section, add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

article.comment {
    background-color: rgba(18, 18, 18, 0.8) !important;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: rgba(36, 36, 36, 0.72) !important;
}
.x-comment-author {
    font-size: 130% !important;
}
.comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-rating label, .comment-form-comment label {
    font-size: 120% !important;
}
.h-comments-title small {
    background-color: hsla(180, 16%, 89%, 0.23) !important;
}

Let us know how this goes!

[eimkeith]

THAT is MUCH nicer, thank you. If we could also remove the drop-shadow and thin border from the semi-transparent text areas, I’d be ecstatic.

Possible?

[Darshana]

Hi there,

You can also the following CSS rules.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border: medium none;
    box-shadow: none;
}

article.comment {
    box-shadow: none;
}

Hope that helps.

[eimkeith]

It certainly does! Thanks so much!

[Joao]

Great to hear it.

Let us know if we can help you with anything else.

Joao

[eimkeith]

—and now I’m back.

I’m considering using Facebook Comments, since we use Facebook to get our business info out to folks, so I’ve activated the plugin and set it up.

and now the comments window sticks out like a sore thumb (after all the styling work we just did.)

can this also be styled as above so as not to look out of place/be distracting on my website?

[eimkeith]

after a little more research, I’m thinking not – that code is controlled by FB, correct?

[Christopher]

Hi there,

Facebook comments load inside iframe tag and we can’t style iframe tags.

Thanks.

[Author]

Posts