WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] 2-column layout for one page

[Resolved] 2-column layout for one page

  • Hi Everyone,

    I’d like to have my blog entry content split into two columns. The good news is it’s currently working! The bad news is that every page on the site is now in 2 columns! Here’s the CSS I’ve used to achieve this:

    .entry-content p {
    	-moz-column-count: 2;
            -moz-column-gap: 10px;
    	-moz-column-rule: none;
    	-webkit-column-count: 2;
    	-webkit-column-gap: 10px;
    	-webkit-column-rule: none;
    	column-count: 2;
    	column-gap: 10px;
    	column-rule: none;
    }

    I understand that I’m targeting very broad CSS attributes, which is why everything on the site is affected. My question is, how can I restrict this customization to only affect the blog posts themselves? Note: my blog posts exist on their own page, so I just want my CSS to customize that one page.

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • WPyogi
    Forum Moderator

    @wpyogi

    In most themes, the body tag has a page-specific class or id which you can use to target the CSS to that page only. What’s in the rendered HTML code for the body tag on that page?

    Thanks for the response! I forgot to mention that I’ve made a custom theme which is a child theme of twentytwelve.

    I’m seeing <body class=" customize-support"> for every page. Unfortunately, I can’t pick out anything unique to allow me to target that specific page.

    WPyogi
    Forum Moderator

    @wpyogi

    Well, that’s not how twentytwelve is coded – so you must have changed something in the header.php file? This is the header.php for it:

    <body <?php body_class(); ?>>

    and the output is something like this:

    <body class="home blog custom-background custom-font-enabled single-author">

    or

    <body class="page page-id-2 page-template-default custom-background custom-font-enabled single-author">

    depending on the template and page…

    Ah yes! I did change the header.php for my theme and didn’t transfer over the <body <?php body_class(); ?>> in the process. I just had a plain old <body> tag. Now the body tag for my news page reads:

    <body class="home blog logged-in admin-bar custom-background custom-background-white custom-font-enabled single-author customize-support">

    Do I need to target that verbatim in my CSS file? Thanks again for your help!

    WPyogi
    Forum Moderator

    @wpyogi

    Just use the class “home” as part of the CSS selector for the styles you are adding.

    That did the trick! Thank you so much for your help!

    WPyogi
    Forum Moderator

    @wpyogi

    You’re welcome! It’s a handy way to use CSS…

    Marking this as resolved.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] 2-column layout for one page’ is closed to new replies.