Remove White Space On Blog (10 posts)

  1. wisdom_525
    Posted 3 years ago #

    There is a line of white space on my blog at http://www.lowtechbasics.com/ I want to remove. You can see it very well on the home page above the image slider and below the breadcrumbs (between the two). I'd like to remove it if someone can help.

    I think it has to do with this last piece of code in the Header.
    <?php if ( current_theme_supports( 'breadcrumb-trail' ) ) breadcrumb_trail( array( 'before' => __( 'Browsing:', 'news' ) . ' <span class="sep">/</span>' ) ); ?>

    And this in the style sheet.
    .breadcrumbs .sep {
    display: inline-block;
    width: 20px;
    height: 11px;
    color: transparent;
    background: url(images/breadcrumb-sep.png) no-repeat 8px 3px;
    text-indent: -9999em;

  2. coopersita
    Posted 3 years ago #

    It's not the separator, but the breadcrumb itself.

    I'd recommend you change the css to this:

    .breadcrumbs {
        background: url("images/bg-breadcrumb.jpg") no-repeat scroll 0 0 transparent;
        color: #8F8F8F;
        font: 11px/11px Arial,Verdana,sans-serif;
        line-height: 50px;
        overflow: hidden;
        padding: 0 0 0 20px;
        width: 980px;

    The problem is that you have a height of 50, plus 18 of padding, so you end up with a total height of 68px. If you use line-height instead of height, then your text will be centered vertically, so you don't need the padding.

  3. wisdom_525
    Posted 3 years ago #

    I tried that and it doesn't seem to have made a difference.

    I don't know, in this guy's theme, there is a style.css file and there is also a style.dev.css file. The style.dev.css file is the one I'm editing, maybe I'm editing the wrong one. But the style.css file, there is no "structure" to the code, it's just all typed in one big line with no spaces. So, it's difficult to find anything and doesn't look like the code you would expect to edit.

  4. coopersita
    Posted 3 years ago #

    You would need to edit style.css. What is happening is that your theme uses a "compressed" CSS (no line breaks) to make the css download faster.

    You have to read the documentation: http://themehybrid.com/docs, they probably explain this there.

    The style.dev.css is the one you edit, but then you have to compress it, and save as style.css.

    What you can try doing is backup style.css (so you have a copy somewhere, in case the following doesn't work), and then rename, or duplicate style.dev.css as style.css, and edit away.

  5. esmi
    Forum Moderator
    Posted 3 years ago #

    As you are using a commercially-supported theme, you need to seek support from the theme's developers: http://themehybrid.com/support/

  6. wisdom_525
    Posted 3 years ago #

    Thank you Coopersita, I'm still playing around with it. Esmi, I don't feel like paying the $29.00 for support on their site. I'm unemployed. We'd all do well to conserve where we can, considering the Fed's continued money printing only serves to guarantee harsh economic consequences worse than what we've already encountered.

  7. wisdom_525
    Posted 3 years ago #

    Fixed coopersita. Here was the final compressed code. ".breadcrumbs{overflow:hidden;width:980px;lineheight:50px;padding:18px 0 0 20px;font:normal normal normal 11px" When I changed 18px to 0, it moved the bread crumbs right up against the top of the border of that particular part of the page and I had to change it back. But by simply putting "lineheight" in instead of "height" - that fixed it. : ) Thanks again for the input and all the best to both of you!

  8. wisdom_525
    Posted 3 years ago #

    Oops, I noticed when breadcrumbs were being used, if you had like a letter "g", the bottom part of the "g" was getting cut off with the above code. Changed everything back and found I only had to change the value on "height" to 32. That was perfect, preserved the little line across the top and everything. Final code looks like:
    .breadcrumbs{overflow:hidden;width:980px;height:32px;padding:18px 0 0 20px

    Thanks again!

  9. coopersita
    Posted 3 years ago #

    Have you checked into Child Themes? They may be a better alternative to what you are doing:



    Basically, it lets you leave the original theme intact, and you add your changes separately, through a child theme. This way, you don't have to mess with the original, and if the original gets updated, your changes will be safe (normally, and upgrade will undo any changes you made.)

  10. wisdom_525
    Posted 3 years ago #

    I am using the "News" parent theme by Tadlock. That is the one I made the "hack" changes to. But I see he does have a "child theme" for the same. I actually downloaded that yesterday. Still trying to figure out exactly how to use it though. I made some changes to both the parent and child functions.php files separately, trying to create a custom comments error page when someone doesn't fill those in. Both times, it really screwed up my site. I had to go around the back way and ftp up a new functions.php file to overwrite the original. There's supposed to be this .. . ._die file or something "returned" as comment error page. But I don't see that even listed in this theme. I guess it's just not part of this hybrid core framework. So, anyway, I guess I'm going to try and opt for some JQuery comment form validation instead. Thanks for all! - Brian

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.