Formatting Comments Section

  • Hello, I have my comments section basically looking how I want minus a couple things. Currently there is a blue border when the following are hovered over or selected: ‘name,’ ’email,’ ‘website,’ ‘notify me of follow-up comments by email,’ ‘notify me of new posts by email,’ and ‘post comment.’ How do I remove this blue border on all of these boxes? Thank you!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Customizer –> Additional CSS:

    #author:hover,
#email:hover,
#url:hover,
#comment:hover {
    border-color: #cccccc;
}

#author:active,
#email:active,
#url:active,
#comment:active,
#author:focus,
#email:focus,
#url:focus,
#comment:focus{
    outline: none;
    border-color: #cccccc;
}
    Thread Starter libbystenzel

    (@libbystenzel)

    Thank you for the response! Unfortunately it is still not changing – not sure what the problem is

    Well – I would start by disabling your cache:
    <!–Generated by Endurance Page Cache–>

    It works.

    See attached.

    View post on imgur.com

    Thread Starter libbystenzel

    (@libbystenzel)

    Thanks! It is mostly looking how I want now. Is there a way to change it so that the checks for notify me of follow-up comments/new posts are black and not blue when selected?
    I am also trying to change the hover font color for post comment to white. This is the code I have:

    .comment-form #submit a:hover {color: #ffffff;}

    Thank you!

    You could try this:

    input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: #000000;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: #6ca4db;
    border-color: #000000;
}

    Post Commment white:

    
#submit {
background:-moz-linear-gradient(top, #000000 5%, #000000 100%);
background:-webkit-linear-gradient(top, #000000 5%, #000000 100%);
background:-o-linear-gradient(top, #000000 5%, #000000 100%);
background:-ms-linear-gradient(top, #000000 5%, #000000 100%);
background:linear-gradient(to bottom, #000000 5%, #000000 100%);
background-color:#000000;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #000000;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Scope One !important; font-weight: normal! important;
font-size:17x;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
    Thread Starter libbystenzel

    (@libbystenzel)

    Thank you for your response! The last issue I am having is that it looks like the borders of the name/email/website boxes are more heavily weighted than the actual comment box. I would like the borders of the other three boxes to match the border weight of the comment box if possible and am having trouble adjusting this.

    Well, you could use this:

    #author, #email, #url, #comment {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    color: #000000;
    background: #ffffff;
    border-color: #000000;
    border-top-width: none;
    border-radius: 1px;
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

    But the difference is coming directly from the user agent. So you’re stuck with it, but it could also indicate an error in some other css that is being loaded.
    You can see here:

    View post on imgur.com

    But see Mozilla:

    View post on imgur.com

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Formatting Comments Section’ is closed to new replies.