[Resolved] How make the comment section stand out?

Home Forums Support How make the comment section stand out?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #928873
    Leif

    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 😐

    #928882
    Leo
    Staff
    Customer Support

    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 🙂

    #928888
    Leif

    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 🙂

    #928896
    Leo
    Staff
    Customer Support

    You will need to be more specific in that CSS.

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

    #929016
    Leif

    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?

    #929711
    Leo
    Staff
    Customer Support

    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;
    }
    #932805
    Leif

    oh nice, it worked
    thanks!

    #932831
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.