Need help? Check out our Support site, then

Help changing Piano Black Theme.

  1. Hi;

    I need some help. My blog is here;

    What I would like to do is increase the text box size, to use more of that space on the left. The box size makes reading the blog a bit difficult. I know it could be done with CSS, but I don't know how to change it. Not very good with CSS. thanks in advance for your help.


    The blog I need help with is

  2. Piano Black is an older theme and it can be quite tricky to modify because of how it was designed using fixed width background images to create faux columns.

    To illustrate, first try adding this to your Appearance > Customize > CSS editor temporarily just so you can see where all of the main content containers sit on the page:

    #page {	border: 1px dashed red;}
    #primary { border: 1px dashed yellow; }
    #content { border: 1px dashed blue; }
    #secondary { border: 1px dashed white; }

    Then add this to see the content area expand a little:

    #page {
    	width: 1100px;

    See how the background stays fixed? That's because the theme is old and was designed using a repeating background image to setup the content and sidebar background elements:

    Because of how that was done, it's very tricky to change the relative layout sizes. But it is doable. :) Here is a past thread where I helped someone with some different options. The thread was about changing colors, but it still applies to your question because you have to use one of the methods described in the post first before you can change the width of things. Take a look at the different options outlined and then decide if you want to keep going with Piano Black. :)

    If you decide you want to give it a go, that thread should have everything you need and you should be able to adjust some of the widths *fairly* easily if you use one of the options that sets the backgrounds up as solid colors. If you get stuck, post here with a note about what you tried from the other thread and where you're getting stuck.

  3. Ok, cool!

    From your notes on both post, I got what I was looking for. Just one question. the area where the tag's and comments is, I just need to widen that out. I figured out #branding for the site title and was able to widen that. I just need what the token name is for that comment line. this is what I coded;

    #primary {
    background: #202020;

    #page {
    width: 1300px;

    #content {
    width: 950px;
    text-align: justify;

    #branding {
    width: 1300px;

  4. Nice work! For the post meta such as tags and the comment link, each of those elements has a hard coded width in Piano Black. Here's one possible way to adjust them:

    footer.entry-meta {
    	width: auto;
    footer.entry-meta .tag-links {
    	width: 720px;
    footer.entry-meta .comments-link {
    	width: 110px;

    You can change the px values to get the result you like best.

    On tags, having too many is a red flag for spam. Try limiting tags + categories to no more than 15 per post. See the "Topic Listings" section at for more details on tags.

  5. Thanks again, the

    footer.entry-meta {
    width: auto;

    worked great! All I really need was to expand, it it did the job great. I will take your advice and reduce the tags. Thanks for all your help, just what I needed. I'm staying with this style as it match my website. And these changes make it fit really well. Again, thanks! Really appreciate it, your great!


  6. Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic