Site logo

Archived topic

How make the comment section stand out?

7 replies · Started by Leif on June 13, 2019

Viewing posts 1–8 of 8

I am trying to make my comment section stand out.
Is there a way to put a small black border on the comment box (and name input etc) and make the input area light grey?

I know how to set background colors but I dont know how you know the name for the comment box :|

Hi there,

You can try CSS like this to add a border around the entire comment section:

.comments-area {
    border: 1px solid #000;
}

There should be border by default around the Name and E-mail field, however, this CSS is removing it:

input[type="text"], input[type="email"], textarea {
    border: transparent;
    border-color: #e2e2e2;
    background-color: #ffffff;
    padding: 16px;
}

The colors can be adjusted in Customizer > Colors > Forms.

Let me know :)

oh neat, easy!
is there a way to put the border back on those ones? I wanted to have no border on some inputs im trying to add so I need some way to address them differently :)

You will need to be more specific in that CSS.

Can you guide me to an example where you want the CSS applied?

So here is an example of the form (https://fiveyearfireescape.com/media/). I'm working with david about how to hook that into all my pages so the css for it is in my additional css.

The code for the form looks like this
<!-- wp:paragraph --><div class="signup-container"><div class="signup-wrap grid-container"><div class="signup-wrap"><div class="signup-headline"><strong><span style="color: #ffffff;">WANT TO </span><span style="color: #ffa500;">RETIRE </span><span style="color: #ffffff;"><br />EVEN EARLIER?</span></strong></div><div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="https://fiveyearfireescape.us19.list-manage.com/subscribe/post?u=944026682ed6fed8919580a81&id=52f8c3ae3c" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank"><div id="mc_embed_signup_scroll"><input id="mce-EMAIL" class="email" name="EMAIL" required="" type="email" value="" placeholder="Email" /><input id="mce-FNAME" class="" name="FNAME" required="" type="text" value="" placeholder="Name" /><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--><div class="clear"><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="GET ME OUT!" /></div><div id="mce-responses" class="clear"><div id="mce-error-response" class="response" style="display: none;"></div><div id="mce-success-response" class="response" style="display: none;"></div></div><div style="position: absolute; left: -5000px;" aria-hidden="true"><input tabindex="-1" name="b_944026682ed6fed8919580a81_52f8c3ae3c" type="text" value="" /></div></div></form></div><p><script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script></p><p style="text-align: center;"> </p></div></div></div>

I could change the input class from "email" to "transparent borderless" or something? or is "email" special?

So try this in your CSS to be more specific:

.signup-container input[type="text"], .signup-container input[type="email"], .signup-container textarea {
    border: transparent;
    border-color: #e2e2e2;
    background-color: #ffffff;
    padding: 16px;
}

oh nice, it worked
thanks!

No problem :)

This archived topic is closed to new replies.