Edit a category for full-width/no side bar like a page in pianoblack theme?

  • Unknown's avatar

    Does anybody know how to customize a category to have it full width/no side bar, like pages in the piano black theme?

    Is it possible with CSS customization?

    Thank you very much!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    I’ve seen a css code that hide the side bar, but i would like to have it visible in my main posts page, and hide it in another posts page.

    Maybe someone knows a theme that give you the option to include or not include the sidebar in some posts (by category or whatever).

    In the Pianoblack theme, which i like it a lot, this option is only available in pages.

    Thanks!

  • Unknown's avatar

    If you mean you want to hide the sidebar on all category pages, try adding this:

    .category #main {
        background: url("/wp-content/themes/pub/piano-black/img/side-noside.png") repeat-y scroll 0 0 transparent;
    }
    .category #main .widget-area {
        display: none;
    }
    .category #content {
        width: 100%;
    }
    .category .page-header {
        width: 93%;
    }
    .category .hentry {
        margin-right: 35px;
    }
  • Unknown's avatar

    Looks like you’re experimenting with different themes as we speak! I was surprised to see it change right when I happened to look at it.

    So your original question was answered, you can hide the sidebar on the Piano Black theme with this CSS example:

    #content,
    footer.entry-meta {
    	width: 96%;
    }
    #secondary {
    	display: none;
    }

    Changing the background colors is a bit more tricky but totally doable, see this past forum post about background colors in Piano Black: https://en.forums.wordpress.com/topic/change-background-colours-in-piano-black-theme?replies=12#post-850999

    To hide the sidebar on one particular type of page, you can use the body class to target just what you want. For example, if you edited the CSS above and added “.home” to the front of both of the selectors, it would make it so the sidebar is only hidden on the homepage. You could use a category name instead of “home” if you wanted the CSS to just apply to certain category.

  • Unknown's avatar

    Sorry justpi! Didn’t see your reply before I posted.

    BTW, that’s a way way better solution to the background colors. :-)

  • Unknown's avatar

    omg… sry guys,
    I was thinking that no one was going to answer me. :o

    Ty very much justpi and designsimply for your help. :D
    As you said, I was like crazy changing themes..to look for an option that allowed me to do that.

    After expend the whole day I ended with the twenty eleven theme, which seems very customizable out of the box.

    To hide a sidebar under a specific category its exactly what i want designsimply. Im going to try to do it as you said.
    I’m totally a noob related to a wordpress and CSS, but the community seems motivating, and you guys are amazing. :)

    Thanks again!

  • Unknown's avatar

    I cannot hide the sidebar by category names.
    It works perfectly with .home and .category (which is what i need), but I would like to know what I have to write to hide exactly by category name.

    Thank you very much!!

    This is what I wrote;

    .Animation #content,
    footer.entry-meta {
    width: 96%;
    }
    .Animation #secondary {
    display: none;
    }

  • Unknown's avatar

    @Sheri:
    Thanks – as you saw, I simply used the original alternative bg image of the theme. I’m not sure about the rest of my suggestion, though, because saulbarreto turned the blog to private before I finished working on it.

    @saulbarreto:
    The selector for an “animation” category page isn’t “.animation”, it’s “.category-animation”. And the first part of designsimply’s code targets two different elements, so you need to modify both selectors. In all:

    .category-animation #content, .category-animation footer.entry-meta {
    	width: 96%;
    }
    .category-animation #secondary {
    display: none;
    }

    (Alternative: you can use category ID numbers instead of category names.)

    But
    a) If I understand correctly, designsimply’s suggestion was for Piano Black: it won’t work correctly on 2011 (or any other theme).
    b) Designsimply is WP staff, so she can access private blogs, but we volunteers cannot. If you wish, you can temporarily switch to the middle privacy option so we can see your blog. Or (if you’ve settled on 2011) at least tell us which layout you’re using: sidebar left or sidebar right?

  • Unknown's avatar

    Now is on again. :)

  • Unknown's avatar
  • Unknown's avatar

    At the moment you have removed the sidebar from all category pages. You have also added this, to remove the post metadata:

    .entry-meta {
        display: none;
    }

    If that’s what you prefer, then obviously you don’t need this double selector:

    .category #content, footer.entry-meta {
        width: 85%;
    }

    Turn it to just:

    .category #content {
        width: 85%;
    }

    And as I explained above, if you wish to remove the sidebar and widen the content on the Animation page only, then instead of these:

    .category #content {
        width: 85%;
    }
    .category #secondary {
        display: none;
    }

    you’ll use these:

    .category-animation-2 #content {
        width: 85%;
    }
    .category-animation-2 #secondary {
        display: none;
    }

    or these:

    .category-658009 #content {
        width: 85%;
    }
    .category-658009 #secondary {
        display: none;
    }

    By the way, the slug of the animation category page didn’t have to be “animation-2”. This is happening because you’ve also used an “animation” tag, and you probably wrote the one of the two with a capitalized initial. There’s absolutely no point using the same word or phrase as both a tag and a category, plus you may run into technical problems when you do this. If you want an “animation” category, delete the “animation” tag.

  • Unknown's avatar

    wow justpi, you are like mi own css personal trainer!! :)
    Thank you very much for your help and not only that, you have fixed all my mistakes!
    I don’t know how you do it , but from here you look like the “eye that all can see” :)
    All the best for you guys!

  • Unknown's avatar

    wow justpi, you are like mi own css personal trainer!! :)

    justpi is a CSS ninja!

  • The topic ‘Edit a category for full-width/no side bar like a page in pianoblack theme?’ is closed to new replies.