Help With A Few CCC Issues, Please

  • Resolved ErikWunder

    (@erikwunder)


    9 years, 10 months ago

    http://lindalush.com

    I have a few css issues I need assistance with…I have a child theme set up and it’s ready to go.

    Most of my issues are with pages, and not posts. Posts seem fine, but pages have a lot of wasted space where nothing goes.

    1.) On pages only, I would like the vertical line and all the space to the left of it gone for good. I want to leave this intact on posts.

    2.) On pages only, I would like to have the navigation space and comment space removed. As it is, there is a huge chunk of useless space at the bottom of pages. (perhapes this is how the theme earned it’s name?)

    3.) On pages only, I would like the page content width and title width to be 800px.

    I made a few CSS changes, but they affect both pages and posts. I can’t seem to isolate the page only portion.

    Here is what I currently have in my child theme. I’m somewhat on the right track, but when I dig deeper, it only becomes confusing to me.

    @import url(“../chunk/style.css”);

    /* center widget area */

    #widgets {
    text-align: center;
    }

    /* remove ugly left border */

    #contents {
    background-color: #FFFFFF;
    border-left: 0px solid #CCCCCC;
    height: auto;
    margin-left: 0px;
    padding-bottom: 10px;
    }

    /* remove beneath content */

    .hentry .main, .main, #comments, .navigation, #widgets, .widget-area .widget, #footer {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    }

    /* move menu items to the left */

    #menu li {
    float: left;
    }

    /* remove padding from menu & change border colors */

    #menu {
    border-bottom: 3px solid #000;
    border-top: 0px solid #DDD;
    margin-bottom: 25px;
    padding: 0px;
    text-align: right;
    width: 800px;
    }

    /* change content with */

    .page .hentry .main {
    width: 800px;
    }

    I understand the navigation space at the bottom of posts, since they have a “next” and “previous” post – however, pages don’t – so this is just useless to me. The same thing with that extra space to the left; posts make use of it by having a date and category option, while pages do not. It just looks like something is missing.

    Thanks, guys!

Viewing 10 replies - 1 through 10 (of 10 total)
  • CrouchingBruin

    (@crouchingbruin)

    9 years, 10 months ago

    I don’t see any pages, only one post page. Can you post a link to a specific page as an example?

    Thread Starter ErikWunder

    (@erikwunder)

    9 years, 10 months ago

    sorry about that

    http://lindalush.com/about/

    The page looks fine, except for the little navigation space at the bottom. I can even live with that if necessary – but the post page, the way all the info on the left hangs out beyond the 800px is killing me.

    Thanks!

    CrouchingBruin

    (@crouchingbruin)

    9 years, 10 months ago

    Everything seems OK from what I can see. Your child CSS is being applied correctly because I don’t see a vertical line on the left, the extra space is gone, and the content area is 800px wide. Maybe you need to flush your browser’s cache? You should also deactivate WP Super Cache if you are making changes to your site, so that changes appear more quickly (or do a cache refresh after making changes).

    Thread Starter ErikWunder

    (@erikwunder)

    9 years, 10 months ago

    I cleared my cache and I’m seeing the same thing across two browsers. Perhaps my description was a little confusing.

    Basically, I only wanted Pages affected by my changes, and not posts – but it appears that my attempt to change pages also changed posts.

    In posts, I actually want the vertical line and the space to the left for the date and category info normally lives – I only wanted that blank space removed on pages because there was no info to be placed there – it just looked like a sidebar. The pseudo-sidebar is gone from the page with the changes I made, but it also removed it from the post’s. Have a look at http://uncrunched.com/ – I would like my posts to look like their home page, with the pseudo-sidebar remaining within the content width. As I see it, all the date and category info currently sit outside of this area.

    Sorry for the confusion, but if you compare my post layout with http://uncrunched.com/ layout, it may give you a better idea of my issue. Thanks!

    CrouchingBruin

    (@crouchingbruin)

    9 years, 10 months ago

    No, you’re right, my bad, I didn’t read your original post very carefully.

    OK, themes which are correctly put together will call a function called body_class() that will add certain classes to the body element so you can target CSS for different types of pages: single posts, pages, archives, index (blog), etc. For single posts, the body element will be assigned the class single-post. For pages, the body element will be assigned the class page. So if you want your CSS to affect only a specific type of page, you add the class to the front of your selector. You already did this in the last rule you posted above, which sets the content width for just pages.

    So, if you wanted to hide the vertical line on just pages, you would use a rule like this:

    .page #contents {
   border-left: 0;
}

    This should hide the border on just pages and not posts.

    Thread Starter ErikWunder

    (@erikwunder)

    9 years, 10 months ago

    That worked great!

    One last thing and I’m done –
    On pages, at the bottom – the little 1px horizontal line above the broad horizontal line – I want it and the space betwen the two lines gone. It’s where comments and navigation goes. I reduced it as much as possible with:

    /* remove beneath content */

    .page .navigation, #comments {
    display: none
    }

    .hentry .main, .main, #comments, .navigation, #widgets, .widget-area .widget, #footer {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    }

    But I don’t think that is completely right because my posts are also affected with this. I tried isolating it by using just the .page .navigation #comments {display = none } thing, but it left even more space than what I currently have.

    Thread Starter ErikWunder

    (@erikwunder)

    9 years, 10 months ago

    Ok – something is definitely not right with what I have – when I click “
    leave comment” on posts, nothing happens and no comment window appears. This is becoming a pain.

    Is there anyway I can draw up an image of this site in photoshop, then post the pics and get the code I need for the end result? I can do this in two minutes in PS, but all this CSS code and trying to describe an issue across two page types has me baffled.

    Thread Starter ErikWunder

    (@erikwunder)

    9 years, 10 months ago

    I removed what css code I had that got close to the result, but it blotched up comments on posts. I had this, but it was messing something up –

    .page .navigation, #comments {
    display: none
    }

    .hentry .main, .main, #comments, .navigation, #widgets, .widget-area .widget, #footer {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    }

    I removed the code from my child theme, and now I have the full space visible that I need removed at the bottom of pages – http://lindalush.com/about. Everything from the bottom of the share icons to the thick, black line needs to be removed. (The light gray horizontal line and the empty space beneath it.)

    CrouchingBruin

    (@crouchingbruin)

    9 years, 10 months ago

    To remove the light gray line on pages:

    .page .hentry .main {
   border-bottom: 0;
}

    Most of the empty space is taken up by the comments and navigation area, so you can close up that space with this (the only thing you were missing was the .page selector before #comments; each selector that is separated by a comma needs to be written out in full):

    .page .navigation,
.page #comments {
   display: none;
}

    The only other thing that you might want to adjust is the top margin for the widget area, which is currently set to 30px. You can add this rule:

    .page #widgets {
   margin-top: 30px;
}

    And change the value to whatever looks good. You can even set it to zero (0) if you want to eliminate the whole top margin.

    Thread Starter ErikWunder

    (@erikwunder)

    9 years, 10 months ago

    absolutely perfect! thank you so much for your time and effort with this!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Help With A Few CCC Issues, Please’ is closed to new replies.