Docs

[sandra.i]

Hi

How can I style the comments form in the single post page without it affecting any other input elements in the site?

Thanks

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[sandra.i]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. You can use the following selector :

.single-post .comment-form-comment textarea {
  font-size: 16px;
  margin-bottom: 0.85em;
  padding-bottom: 11px;
  padding-top: 11px;
  resize: none;
  width: 100%;
}

.single-post .comment-form-author label, .single-post .comment-form-email label, .single-post .comment-form-url label, .single-post .comment-form-rating label, .single-post .comment-form-comment label {
  color: #2c3e50;
  font-size: 100%;
}

That is if you use preceding .single-post class then it will be applied to the single posts only.

Cheers!

[sandra.i]

This reply has been marked as private.

[Rupok]

Hi there,

You missed the dot from your first selector. Let’s try fixing this.

Thanks!

[sandra.i]

Hi

The dot is in, I just didn’t copy it because the your customiser doesn’t copy the first character – the code that I’m using does have the dot in.

Could you have another look?

Thanks

[Joao]

Hi There,

. goes in front of classes

# goes in front of ID´s

and nothing go in front of tags <>

for example <h1 class=”hello” id=”hey”> will be : h1.hello#hey

Please add the dot, if that does not work, please provide your wp admin credentials so we can take a closer look, thanks!

[sandra.i]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code instead:

.single-pot .comment-form-author label, .single-post .comment-form-email label, .single-post .comment-form-url label, .single-post .comment-form-rating label, .single-post .comment-form-comment label {
  border: 0px !Important;
}
.single-post .comment-form-comment textarea {
    background-color: #fff;
    border: 1px solid #000 !important;
    border-left:1px;
    border-right:1px;
    color: #000;
    display: inline-block;
    font-size: 16px;
    height: 2.65em;
    line-height: normal;
    margin-bottom: 0px;
    padding: 0 0;
}

Hope that helps

Joao

[sandra.i]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! Please have the css code updated and use this code instead:

.single-post .comment-form-author label, 
.single-post .comment-form-email label, 
.single-post .comment-form-url label, 
.single-post .comment-form-rating label, 
.single-post .comment-form-comment label {
  border: 1px !important;
}

.single-post .comment-form-comment textarea {
    background-color: #fff;
    border: 1px solid #000 !important;
    border-left:1px;
    border-right:1px;
    color: #000;
    display: inline-block;
    font-size: 16px;
    height: 2.65em;
    line-height: normal;
    margin-bottom: 0px;
    padding: 0 0;
}

.single-post .comment-form #author,
.single-post .comment-form #email,
.single-post .comment-form #url{
    border-top: solid 1px #999 !important;
    border-bottom: solid 1px #000 !important;
}

Please let us know how it goes.

[sandra.i]

Hi

That’s great, except it doesn’t switch line colours on focus…?

Also, would it be possible to have the textarea extendable?

Thanks

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.single-post .comment-form-comment textarea:focus,
.single-post input[type="text"]:focus {
    border-bottom: 1px solid red !important;
   
}

.single-post .comment-form-comment textarea {
      resize:both;
}

Change red with your color.

Hope that helps.

[sandra.i]

Great!

Can you also show me how to do the colour focus on the other inputs as well, name, email and website?

Thanks

[Author]

Posts