Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Remove header border from sidebar

  1. danielerikvalentin
    Member

    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 danielerikvalentin.wordpress.com.

  2. thesacredpath
    Member

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

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

  3. danielerikvalentin
    Member

    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.

  4. justpi
    Member

    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;
}

  5. danielerikvalentin
    Member

    thanks!!

  6. danielerikvalentin
    Member

    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!

  7. thesacredpath
    Member

    My bad. I should have read more closely.

  8. danielerikvalentin
    Member

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

  9. justpi
    Member

    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?

  10. danielerikvalentin
    Member

    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!

  11. danielerikvalentin
    Member

    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;
    }

  12. justpi
    Member

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

  13. danielerikvalentin
    Member

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

  14. danielerikvalentin
    Member

    i fixed it!

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

    thanks for your guidance!

    d

  15. justpi
    Member

    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;
}

  16. justpi
    Member

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags