Need help? Check out our Support site, then


Customizing Piano Black Theme

  1. blustarproject
    Member

    I know I should be learning CSS so that I can really customize my website. But right now I really lack the patience and the concentration power to retain the process at this time. All I really want to accomplish right now is to be able to expand the width of my active blogging area in the theme Piano Black which I adore! Is there someone here on the forum that can formulate the CSS to take the widthe from 549 px to 653px? I would greatly appreciate anyone's knowledgeable assistance with this.
    Regards,
    Blu

    The blog I need help with is blustarproject.com.

  2. a) You mean widen the main column by narrowing the sidebar or by widening the whole theme?

    b) In both cases you must first use an image editing application to modify these bg images:
    http://wordpress.com/wp-content/themes/pub/piano-black/img/side.png
    http://wordpress.com/wp-content/themes/pub/piano-black/img/bottom.png

  3. Adjusting widths in the Piano Black is possible, but very involved and not a simple request at all because of how the theme was originally designed.

    It's an older theme and has the columns set by using a few images with set widths (i.e. the ones justpi linked to).

    So, it's possible to change the widths with CSS… but the background becomes offset if you do it. Here is an example so you can see:

    /* Example for illustration purposes only */
    #page {
    	width: 1060px;
    }
    #primary {
    	border: 3px dotted yellow;
    	margin: 0 -450px 0 5px;
    	width: 1049px;
    }

    Now, changing out the images (or background colors) can get quite involved, and I've worked with someone in the forums on that once before. Here is the reply so you can see how much work is involved in such a request:
    http://en.forums.wordpress.com/topic/change-background-colours-in-piano-black-theme?replies=12#post-850999

  4. blustarproject
    Member

    To justpi: Thank you so much for responding! Definitely would like to widen only the main column. I am very technically challeneged, but I can grasp the concept of what you're proposing, especially when I checked the attached links. Just not sure where to apply what I think I know... is this a 'copy and paste somewhere' situation?

    To designsimply: As you can tell from my above reply to justpi, Iappreciate your response also but it might as well be written in Cantonese (which I wouldn't know from Greek lol!) But I do get your both suggesting the same route. Any more layman directions from either of you would be much appreciated : )- Blu

  5. Hi there!

    I understand that CSS and the instructions can be confusing if you've never done it before. However looking through the instructions there really aren't any simpler directions I can give you, as it is a little complicated to do.

    It's a lot of work and very involved as you can see and those instructions will work if you follow them, but I do understand that might not be something you are able to do.

    So I would suggest a couple of things. One is if you don't know how to do it yourself, do you know anyone who does know CSS? Perhaps you can hire them to make the changes for you?

    Also I am guessing you really like your current theme, but we have 220 themes and maybe there is one you like the look of that is already set up with the widths that you desire?

  6. @blustarproject, Piano Black is an old theme. It's possible to change the width, but takes a lot of work in this case, including developing custom images if you want to stay true to the theme's original design. It's a lot easier to change widths in newer themes. We are here in the CSS forums to help people learn CSS, but we have to balance redesign work with instructional help.

    If you'd like to hire someone to work on a redesign of Piano Black for you, you can request a quote at http://en.support.wordpress.com/customize-my-site/request-theme-customization/

    If you'd like help learning CSS, I would recommend starting with a basic tutorial such as http://www.htmldog.com/guides/cssbeginner/ first, and I would also recommend trying out the example I posted—you didn't mention before whether you tried previewing that or not.

Topic Closed

This topic has been closed to new replies.

About this Topic