Remove header border from sidebar

• 

  danielerikvalentin · Member · Feb 7, 2013 at 9:01 pm

  • Copy link
  • Add topic to favorites

  I want to remove the border-bottom in the header from the sidebar, so that the border-bottom only covers the .content. Is this possible? I’m a CSS newbie and tried “border-top:none” in #sidebar but it didn’t work.

  Any ideas? Thanks!

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

• 

  thesacredpath · Member · Feb 8, 2013 at 12:39 am

  • Copy link

  Give this a try. They apparently set it on the ul element.

  #sidebar .block ul {
      border-bottom: none;
  }

• 

  danielerikvalentin · Member · Feb 8, 2013 at 1:20 am

  • Copy link

  thanks! however, that only took away the borders under the headers in the sidebar. What I want is to remove the header’s border-bottom, which, as you can see, goes horizontally all the way from the logo to the end of the sidebar. I want to remove that border so that it ends where the sidebar begins.

• 

  justpi · Member · Feb 8, 2013 at 1:41 am

  • Copy link

  You don’t remove part of the border: you remove the bottom border of the header and replace it with a top border to the content. Add this:

  .header {
      border: none;
  }
  .content {
      border-top: 1px solid #000;
  }

• 

  danielerikvalentin · Member · Feb 8, 2013 at 1:55 am

  • Copy link

  thanks!!

• 

  danielerikvalentin · Member · Feb 8, 2013 at 2:06 am

  • Copy link

  ok, then comes the next question. how do i put the sidebar content up (“Senaste texter”) so that it is horizontally in line with the content top-border? Now it seems to be 10-15 pixels between, and I dont understand where that comes from. Padding? Margin?

  Thanks!

• 

  thesacredpath · Member · Feb 8, 2013 at 2:09 am

  • Copy link

  My bad. I should have read more closely.

• 

  danielerikvalentin · Member · Feb 8, 2013 at 2:24 am

  • Copy link

  its aight! maybe you can help me with the issue above?

• 

  justpi · Member · Feb 8, 2013 at 10:50 am

  • Copy link

  Try this:

  #sidebar center {
      display: none;
  }
  #recent-posts-4 {
      padding: 0;
  }

  By the way: since you changed the header border, shouldn’t you change the footer border too?

• 

  danielerikvalentin · Member · Feb 8, 2013 at 9:46 pm

  • Copy link

  hmm, that didn’t work. here’s all the sidebar css code:

  #sidebar {
  width: 300px;
  float: right;
  padding: 0;
  margin: 0 0 25px;
  font-family: “Droid-Serif”, Georgia, Arial, serif;
  }

  #sidebar center {
  display: none;
  }

  #sidebar .block ul {
  border-top: 1px solid #636363;
  border-bottom: none;
  padding: 0;
  }

  #recent-posts-5 {
  padding: 0;
  }

  #sidebar h3 {
  font-size: 18px;
  font-family: “Nimbus-Sans”, Georgia, Arial, serif;
  padding: 0 0 5px;
  border-bottom: none;
  padding: 0;
  }

  #sidebar .block ul .children {
  padding: 0 0 0 8px;
  border-bottom: none;
  }

  #sidebar .block li a {
  background: transparent url(‘images/bullet_black.gif’) no-repeat scroll 6px 10px;
  font-size: 11px;
  font-weight: none;
  display: block;
  border-bottom: none;
  border-top: none;
  padding: 0;
  }

  #sidebar .block li {
  border-top: none;
  border-bottom: none;
  padding: 0;
  }

  #sidebar .block li a:hover {
  background: rgba(255,255,255,0.5) url(‘images/bullet_red.gif’) no-repeat scroll 6px 52%;
  border-top: none;
  border-bottom: none;
  }

  #sidebar .widget_search label {
  display: block;
  font-size: 18px;
  margin: 0 0 5px;
  padding: 25px 0 3px;
  border: none;
  border-bottom: none;
  }

  #sidebar .widget_recent_comments li {
  background: transparent url(‘images/bullet_black.gif’) no-repeat scroll 6px 52%;
  padding: 2px 0 2px 15px;
  border: none;
  border-bottom: none;
  }

  #sidebar .widget_recent_comments li a,#sidebar .widget_recent_comments li a:hover {
  background: none;
  border-bottom: none;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  border-color: #000000;
  border: none;
  }

  #sidebar .widget_recent_comments li a:hover {
  color: #e12000;
  border-bottom: none;
  background-color: rgba(255,255,255,0.5);
  }

  #sidebar .widget_tag_cloud h3 {
  border-bottom: none;
  margin: 0 0 8px;
  }

  #sidebar .widget_text h3,#sidebar .calendar h3 {
  border-bottom: none;
  margin-bottom: 5px;
  border-color: #000000;
  }

  #sidebar .calendar h3 {
  display: none;
  }

  #sidebar #wp-calendar {
  width: 95%;
  text-align: center;
  }

  #sidebar #wp-calendar caption,#sidebar #wp-calendar td,#sidebar #wp-calendar th {
  text-align: center;
  }

  #sidebar #wp-calendar caption {
  font-size: 18px;
  padding: 25px 0 3px;
  }

  #sidebar #wp-calendar th {
  font-weight: bold;
  border-top: none;
  border-bottom: none;
  border-color: #000000;
  }

  #sidebar #wp-calendar tfoot td {
  border-top: none;
  border-bottom: none;
  border-color: #000000;
  }

  any ideas? and yes, i should fix the footer too. thanks for that!

• 

  danielerikvalentin · Member · Feb 8, 2013 at 9:49 pm

  • Copy link

  sorry, this is the correct css code:

  #sidebar {
  width: 300px;
  float: right;
  padding: 0;
  margin: 0 0 25px;
  font-family: “Droid-Serif”, Georgia, Arial, serif;
  }

  #sidebar .block ul {
  border-top: 1px solid #636363;
  border-bottom: none;
  padding: 0;
  }

  #sidebar h3 {
  font-size: 18px;
  font-family: “Nimbus-Sans”, Georgia, Arial, serif;
  padding: 0 0 5px;
  border-bottom: none;
  }

  #sidebar .block ul .children {
  padding: 1 0 0 8px;
  border-bottom: none;
  }

  #sidebar .block li a {
  background: transparent url(‘images/bullet_black.gif’) no-repeat scroll 6px 10px;
  font-size: 11px;
  font-weight: none;
  display: block;
  border-bottom: none;
  border-top: none;
  }

  #sidebar .block li {
  border-top: none;
  border-bottom: none;

  }

  #sidebar .block li a:hover {
  background: rgba(255,255,255,0.5) url(‘images/bullet_red.gif’) no-repeat scroll 6px 52%;
  border-top: none;
  border-bottom: none;
  }

  #sidebar .widget_search label {
  display: block;
  font-size: 18px;
  margin: 0 0 5px;
  padding: 25px 0 3px;
  border: none;
  border-bottom: none;
  }

  #sidebar .widget_recent_comments li {
  background: transparent url(‘images/bullet_black.gif’) no-repeat scroll 6px 52%;
  padding: 2px 0 2px 15px;
  border: none;
  border-bottom: none;
  }

  #sidebar .widget_recent_comments li a,#sidebar .widget_recent_comments li a:hover {
  background: none;
  border-bottom: none;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  border-color: #000000;
  border: none;
  }

  #sidebar .widget_recent_comments li a:hover {
  color: #e12000;
  border-bottom: none;
  background-color: rgba(255,255,255,0.5);
  }

  #sidebar .widget_tag_cloud h3 {
  border-bottom: none;
  margin: 0 0 8px;
  }

  #sidebar .widget_text h3,#sidebar .calendar h3 {
  border-bottom: none;
  margin-bottom: 5px;
  border-color: #000000;
  }

  #sidebar .calendar h3 {
  display: none;
  }

  #sidebar #wp-calendar {
  width: 95%;
  text-align: center;
  }

  #sidebar #wp-calendar caption,#sidebar #wp-calendar td,#sidebar #wp-calendar th {
  text-align: center;
  }

  #sidebar #wp-calendar caption {
  font-size: 18px;
  padding: 25px 0 3px;
  }

  #sidebar #wp-calendar th {
  font-weight: bold;
  border-top: none;
  border-bottom: none;
  border-color: #000000;
  }

  #sidebar #wp-calendar tfoot td {
  border-top: none;
  border-bottom: none;
  border-color: #000000;
  }

• 

  justpi · Member · Feb 9, 2013 at 12:37 am

  • Copy link

  Have you copypasted the entire stylesheet of the theme into the CSS editor?

• 

  danielerikvalentin · Member · Feb 9, 2013 at 11:01 pm

  • Copy link

  yes, the thing i pasted above was only the css code related to the sidebar.

• 

  danielerikvalentin · Member · Feb 9, 2013 at 11:32 pm

  • Copy link

  i fixed it!

  #sidebar .widget.block.widget_recent_entries.sidebar-box {
  padding: 0;
  }

  thanks for your guidance!

  d

• 

  justpi · Member · Feb 10, 2013 at 3:13 am

  • Copy link

  Copypasting the entire stylesheet is bad practice, for various reasons. You should make sure the “Add-on” mode is selected, and add ONLY what you change.

  Some remarks on the sidebar CSS you pasted above:

  a) These parts are just as in the original stylesheet of the theme, so they have no place in the CSS editor (as long as the Add-on mode is selected):

  #sidebar .calendar h3 {
  display: none;
  }
  #sidebar #wp-calendar {
  width: 95%;
  text-align: center;
  }
  #sidebar #wp-calendar caption,#sidebar #wp-calendar td,#sidebar #wp-calendar th {
  text-align: center;
  }
  #sidebar #wp-calendar caption {
  font-size: 18px;
  padding: 25px 0 3px;
  }

  b) In several cases you have added these two:

  border: none;
  
border-bottom: none;

  “border” means all four sides, so when you say no border there’s no point also saying no border-bottom.

  c) In several cases you say no border but you also add this:
  border-color: #000000;
  Doesn’t make sense, does it?

  d) Under the Add-on mode, when you want to change something, you add that change ONLY. For example, the stylesheet of the theme says:

  #sidebar .widget_search label {
  	display: block;
  	padding: 25px 0 3px 0;
  	font-size: 18px;
  	border-bottom: 1px dotted #ccc;
  	margin: 0 0 5px;
  }

  If you want to eliminate the border, you don’t add all the stuff, you only add this:

  #sidebar .widget_search label {
  border-bottom: none;
  }

  e) When you want to apply the same change to various elements, you can combine the selectors. Instead of writing this:

  selector a {
  border: none;
  }
  selector b {
  border: none;
  }
  selector c {
  border: none;
  }

  you write:

  selector a, selector b, selector c {
  border: none;
  }

• 

  justpi · Member · Feb 10, 2013 at 3:18 am

  • Copy link

  PS When you tried my “recent-posts-4” suggestion, it didn’t work because you typed 5 instead of 4.