Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS changes to modify reply box colors & button locations

  1. newsbird
    Member

    Hi! The recent changes made by WP to the reply box are not making my readers happy. I have a dark theme so the reply box is black. I also hate that the submit button is below all the login buttons so we have to scroll down the page to get to click on that one.
    So I would need to know how to change the reply box background color (now black), the font colors for text and links in the reply, and how to move the the location of the submit button so it's at the same level as all the login buttons..

    The WP current design makes no sense: my readers only login once a day but leave more than one comment so why is the reply submit button placed so far down that we usually have to scroll down to see it???

    Thanks for any help!

    The blog I need help with is newsbird.wordpress.com.

  2. designsimply
    Staff

    Are you certain you want to change the colors? The colors as they are right now, match up with the dark theme color layout in the Motion theme. The comment form color scheme matches the footer widgets.

    The submit button is below the login buttons because you must log in or submit guest details in order to leave a comment. Note that you can change the requirement on the Settings → Discussion page using the option that reads "Comment author must fill out name and e-mail", but that doesn't affect the look of the comment form, it just makes it so users don't have to fill out the login or guest options before clicking the "Post Comment" button.

    I'm looking into ways to change the color and will post more details soon, but I wanted to at least first mention that I think the form looks good on your page as it is right now.

  3. designsimply
    Staff

    Would using the background color of the theme itself work? Here is an example as a starting point. This will remove the dark coloring from the comment form in the Motion theme: 

    #commentform {
     position: relative;
}
.highlander-dark #respond #comment-form-comment, .highlander-dark #comment-form-share-text-padder {
     background: none !important;
     border: none !important;
     box-shadow: none !important;
}
.highlander-dark #respond .comment-form-service {
     background: none !important;
}
.highlander-dark #respond #comment-form-identity {
     background: none !important;
     border-top: none !important;
}
#comments #respond p.form-submit input {
     background: white;
}

    This will remove the dark coloring from the comment form in the Motion theme and also move the login buttons below the "Post Comment" button, but I would caution against doing it this way because when you use absolute positioning it can cause funky behavior for different browsers if you're not careful and it also may break if the login form layout is changed at any time such as if new options were to be added. If new options were added and it made the login section longer, then you would need to adjust the height and top declarations in this set of CSS: 

    #commentform {
     height: 400px;
     position: relative;
}
.highlander-dark #respond #comment-form-comment, .highlander-dark #comment-form-share-text-padder {
     background: none !important;
     border: none !important;
     box-shadow: none !important;
}
.highlander-dark #respond .comment-form-service {
     background: none !important;
}
.highlander-dark #respond #comment-form-identity {
     background: none !important;
     border-top: none !important;
     position: absolute;
     top: 230px;
     width: 640px;
}
#comments #respond p.form-submit input {
     background: white;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags