Comments Area Background and Font Colors

• 

  faunageo · Member · Jul 18, 2017 at 1:01 pm

  • Copy link
  • Add topic to favorites

  Hi!

  Pls I need help with the the comment area below the posts/pages
  Here is a link for you to check, on one post:
  https://wiserbrains.wordpress.com/2017/07/04/what-are-your-thoughts-on-i-believe-in/

  * The backgrounds are dark. I would like to change the background colors.
  * Once changed, I will need to change the input font colors as well.
  * Under the comment area, there are two tick boxes. One of them is for “Notify me of new comments via email”. And the box below, what is it for? There is no legend next to it.

  Thank you for your help
  Ralph

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jul 18, 2017 at 8:35 pm

  • Copy link

  Ralph, the following will allow you to change the background and font color on the comment form. You can edit the colors as desired. You will notice an inset box shadow. I didn’t know if you wished to keep that, or possibly go with just a standard border around it or? Let me know if you wish to change that too.

  .highlander-dark #respond #comment-form-comment, .highlander-dark #comment-form-share-text-padder {
    background: #ccc;
  }
  .highlander-dark #respond #comment-form-comment textarea, .highlander-dark #comment-form-share-text-padder textarea {
    color: #000;
  }

• 

  thesacredpath · Member · Jul 18, 2017 at 8:41 pm

  • Copy link

  On the second checkbox, that is interesting. Add the following to your custom CSS to make the label text visible and match the alignment of the first.

  .highlander-dark #respond label {
    color: #999;
  }
  input[type="checkbox"], input[type="radio"] {
    margin-right: 0.75em;
  }

• 

  faunageo · Member · Jul 18, 2017 at 8:44 pm

  • Copy link

  Thank you so much!!!

  It’s getting a lot better…
  Please have a look, I have assigned any color just to check
  https://wiserbrains.wordpress.com/2017/07/04/what-are-your-thoughts-on-i-believe-in/

  * Yes, better to get rid of that inset and leave the border or nothing at all. Maybe a thin border will do just better.

  * Below the comment box, where the user enters personal details, it looks dark as well. Is it possible to change that as well?

  * And finally, that little tick box with no text next to it, at the bottom of it all, I don’t know what it is for.

  :)

  Thank you
  Ralph

• 

  faunageo · Member · Jul 18, 2017 at 9:18 pm

  • Copy link

  Point 3 resolved!
  Great!

• 

  thesacredpath · Member · Jul 19, 2017 at 2:08 am

  • Copy link

  Ralph, this is a bit involved. Add this to your custom CSS and you can adjust the colors as desired. I’ve used named colors so that it will be easier for you to see what CSS rule applies to what.

  .highlander-dark #respond #comment-form-identity #comment-form-nascar {
    background-color: green;
  }
  .highlander-dark #respond #comment-form-identity #comment-form-nascar p {
    color: red;
  }
  .highlander-dark #respond .comment-form-service {
    background-color: cyan;
  }
  .highlander-dark #respond .comment-form-fields label {
    color: #000;
    background-color: #ff6;
    left: 0;
    padding: 5px !important;;
  }
  .highlander-dark #respond .comment-form-service {
    text-shadow: none;
  }
  #respond .comment-form-fields label span.required, #respond .comment-form-fields label span.nopublish {
    color: #000 !important;
  }
  .highlander-dark #respond .comment-form-fields div.comment-form-input {
    box-shadow: none;
    background-color: transparent !important;
  }

• 

  faunageo · Member · Jul 19, 2017 at 2:59 am

  • Copy link

  Oh man, I’m such a pain
  But, it is practically perfect, you can view it on the link below.
  Try to check when you enter data in the fields/boxes, and then, after leaving the input boxes what happens:

  * In the main message area, the box shows the inset on input (can we eliminate that effect altogether?)

  * On the user input fields (email, name, website), the background changes the color when you do the input and after you leave the field, the text remains very light, and the background gray. For this, can we have the text always in black (all the time) and the field backgrounds always white? Let it nothing actually change whatever action it is taken on the fields. Is that possible?

  This is again the link:
  https://wiserbrains.wordpress.com/2017/07/04/what-are-your-thoughts-on-i-believe-in/

  I promise to stop really!
  Many thanks
  Ralph

• 

  thesacredpath · Member · Jul 19, 2017 at 7:08 pm

  • Copy link

  n the main message area, the box shows the inset on input (can we eliminate that effect altogether?)

  Find this rule in your custom CSS and add the !important keyword to the box shadow declaration.

  .highlander-dark #respond #comment-form-comment,.highlander-dark #comment-form-share-text-padder {
   background:#f8f8f8;
   box-shadow:none !important;
  }

  For the input fields, add the following to the bottom of your custom CSS.

  .highlander-dark #respond .comment-form-fields div.comment-form-input {
   box-shadow:none !important;
   background-color:transparent !important;
  }
  .highlander-dark #respond .comment-form-fields div.comment-form-input.active, .highlander-dark #respond .comment-form-fields div.comment-form-input input {
    background-color: #fff !important;
    color: #000 !important;
  }

• 

  faunageo · Member · Jul 20, 2017 at 3:36 am

  • Copy link

  Awesome!!!
  All set, now it looks really tailor made to the theme style
  Thanks so much
  A great piece of code!
  Ralph

• 

  thesacredpath · Member · Jul 20, 2017 at 12:58 pm

  • Copy link

  You are welcome.