Need help? Check out our Support site, then


Full Width Post Highwind Theme

  1. Hello. I need help constructing the CSS code needed to make a few of my posts full-width. (I do have the premium CSS upgrade).

    I have found a code to remove the sidebar, but not one to actually expand the content so that it takes up the appropriate amount of space on the page. The code is as follows.

    #secondary {
    display: none;
    }

    #content {
    width: 100%;
    }

    I know this isn't completely right because it deletes the sidebar on all posts, instead of just the one I select, and still does not allow for the content to be full-width.

    I have tried to learn CSS but with my busy schedule it's nearly impossible, so any assistance would be greatly appreciated.

    Thank you very much.

    The blog I need help with is thewordchisel.wordpress.com.

  2. Hi, to affect the styling of individual posts, you will have to precede the selector with the body post ID class for the individual posts. Using the "Black Fangirl Shipping Blues…" post as an example, I went to the single post page for that post and then viewed the source code for that page and in the opening body HTML tag, found that the specific post ID class for that page was "postid-3052" (opening body tag and classes below for reference).

    <body class="single single-post postid-3052 single-format-standard custom-background typekit-enabled mp6 highlander-enabled highlander-light custom-colors" data-twttr-rendered="true">

    So, to hide the sidebar on that post, and make the post full-width, this would be the code.

    .postid-3052 #secondary {
        display: none;
    }
    .postid-3052 #primary {
        width: 100%;
    }

    #primary is the selector you have to target for the content width as that is the parent selector of the content area that sets the width.

    If you are not using the web inspector in your browser, take a look at this support document on How to Find your Theme's CSS which gives a quick guide on using it to find the CSS and the selectors for your CSS changes.

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  3. You, dear sir, are a genius.

    Thank you so very much for your assistance: It worked perfectly with every post I've tried it with.

    Thank you very much.

  4. You are very welcome, and thanks for the compliment. :)

  5. No, thank YOU for helping me.

    :]

    Now, I have one more problem that seems to be theme specific and something I might not be able to change, but here's to hoping... and asking, lol.

    If you look at this page:

    http://auteurati.wordpress.com/star-trek/

    You'll notice that the "must have" marker, which is really a small picture, will not stay in line with the title of the recommended story. For instance, the first story recommendation is: "An Unexpected Incident." But instead of the "must have" picture being next to it, it's on the next line, right under it.

    Now, it acts properly in other themes and it looks as it should in the post editing window, it just doesn't show properly on the live version. I can ignore it if push comes down to a shove, but I'd rather not. It looks way better when it's where it's supposed to be.

    Can a code help it remain on the same line like it should and like it does in every other theme, or am I out of luck? Just to let you know, I have tried making the picture smaller, making it bigger, and changing its alignment to see if that works, but nothing does.

    Sorry to bother you about this, I know it's another topic.

  6. This is happening because the CSS of the theme you're using specifies display:block for all images except class .alignleft and .alignright.
    Couple of other things to note:
    a) Only the first instance of the image includes its ID number in the code. You need the ID number in order to target that image alone.
    b) There's no point making this image link to the original file.

    So first edit the page, delete all the instances of this image, then insert it again, selecting Link to -> None before inserting it. Then add this in the CSS editor:

    .wp-image-3671 {
        display: inline;
        vertical-align: middle;
    }
  7. Justpi?

    Seems another genius has decided to help me.

    Thank you very, very much for your help. That worked perfectly.

    :]

  8. You're welcome!
    You can also add this to the above code, to improve the positioning:
    margin: 0 0 2px 12px;
    Change the 2 and the 12 to nudge the image up or down and left or right.

  9. Are you kin to Professor X? Because surely you must be psychic, LOL! :)

    But seriously, I was wondering about that and you just provided the information without me even having to ask. The "must read" pic was on the same line as the text when I really wanted it to be a little above it.

    Once again, thank you soo much for your help.

    You guys are truly awesome.

    :]

  10. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic