how to make a 5px border

• 

  dth83 · Member · Aug 1, 2013 at 8:05 pm

  • Copy link
  • Add topic to favorites

  Hello,

  The theme of my blog is “The Bueno Theme”.

  I’d like to make a 5px brown border around the box where people can leave comments on my blog. I’ve managed to make brown borders around both the box containing comments and around the blogpost. But I can’t seem to find the place in my stylesheet to add the wished code “border: 5px solid #464232”. I have my stylesheet in advanced mode, so I don’t need an add-on :) Thanks a lot!

  Best, Denice

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

• 

  jeffwelston · Member · Aug 2, 2013 at 4:58 am

  • Copy link

  It looks like you already found the right place, but you need a little more specificity. There’s an id and a class attached to that div.
  #respond.comment-respond {border: 5px solid #46232 !important;}
  Give it a shot.

• 

  jeffwelston · Member · Aug 2, 2013 at 5:00 am

  • Copy link

  Actually, remove the ‘!important’. I meant to take it out, you don’t need it here.

• 

  dth83 · Member · Aug 2, 2013 at 8:34 am

  • Copy link

  Thanks a lot Jeffwelston. However, I didn’t manage to make it work. I’ve copy and pasted the part of my stylesheet where I think the code needs to be embeded, so that the box where people can write comments get a brown 5px border. Can you maybe help me find the place to write the code?
  Thanks a lot, denice

  #comments {
  position: relative;
  margin: 0 0 60px;
  padding: 50px 55px;
  background-color: #fff;
  border: 5px solid #464232;
  }

  #comments h3 {
  margin: 0 0 20px;
  }

  #comments .comment {
  margin-top: 10px;
  width: 100%;
  list-style-type: none;
  }

  #comments .comment .comment-container {
  padding: 10px 0;
  border-bottom: 1px solid #464232;
  }

  #comments .comment-head {
  margin: 0 0 15px;
  }

  #comments .comment-head .avatar {
  float: left;
  }

  #comments .comment-head .avatar img {
  margin: 0 10px 0 0;
  vertical-align: middle;
  border: 3px solid #eee;
  }

  #comments .comment-head .name {
  display: block;
  margin: 0 0 -5px;
  font-weight: 700;
  font-size: 15px;
  }

  #comments .comment-head .date,#comments .comment-head .edit,#comments .comment-head .perma {
  font-size: 11px;
  }

  #comments .comment-entry p {
  margin: 0 0 10px;
  }

  #comments ul.children {
  margin: 10px 0 0 25px;
  padding: 0;
  }

  #comments .cancel-comment-reply a,#comments .comment-reply-link {
  text-transform: uppercase;
  font-family: helvetica, arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
  font-size: 11px;
  }

  #comments .navigation a {
  display: block;
  margin: 15px 0 0;
  text-decoration: none;
  }

  #pings {
  margin: 0 0 60px;
  padding: 50px 55px;
  background-color: #fff;
  border: 5px solid #efefef;
  }

  #pings h3 {
  margin: 0 0 20px;
  }

  .pinglist li {
  margin: 0 0 0 20px;
  list-style-type: decimal;
  }

  .pinglist li .author {
  font-weight: 700;
  font-size: 15px;
  }

  .pinglist li .date {
  font-size: 11px;
  }

  .pinglist li .pingcontent {
  display: block;
  margin: 10px 0;
  }

  #respond {
  margin: 15px 0 0;
  padding: 50px 55px;
  background-color: #fff;
  border: 5px solid #464232;
  }

  #comments #respond {
  padding: 20px 0;
  margin: 0;
  border: none;
  }

  #comments #respond h3 {
  margin-bottom: 0;
  }

  #commentform {
  margin: 15px 0 0;
  }

  #commentform input.txt,#commentform input[type=text] {
  float: left;
  width: 260px;
  padding: 7px 5px;
  border: 1px solid #eee;
  }

  #commentform p {
  line-height: 32px;
  }

  #commentform label {
  clear: right;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  padding: 7px 5px;
  text-transform: uppercase;
  font-weight: 700;
  border: 5px solid #464232;
  }

  #commentform textarea {
  width: 95% !important;
  padding: 5px;
  border: 1px solid #eee;
  }

  #commentform #submit {
  border: none;
  margin: 20px 0 0;
  padding: 4px 10px;
  color: #fff;
  text-shadow: 1px 1px 0 #424242;
  text-transform: uppercase;
  font-size: 12px;
  }

  #respond .comment-form-comment label,#respond .form-allowed-tags {
  display: none;
  }

  #respond .required {
  font-weight: 700;
  }

• 

  justpi · Member · Aug 2, 2013 at 8:47 am

  • Copy link

  You’ve added this:

  #respond {
      background-color: #FFFFFF;
      border: 5px solid #464232;
      margin: 15px 0 0;
      padding: 50px 55px;
  }

  You need to add the “!important” tag to the border values:

  #respond {
      background-color: #FFFFFF;
      border: 5px solid #464232 !important;
      margin: 15px 0 0;
      padding: 50px 55px;
  }

  In the future make sure you post CSS questions in the CSS forum, not the Support forum.

• 

  dth83 · Member · Aug 2, 2013 at 9:21 am

  • Copy link

  IT WORKED! Thanks so much! I’ll make sure to post my questions in the right forum next time. Best, Denice