Need help? Check out our Support site, then

Petite Theme Help?

  1. Hey there folks, I have just added the theme "Toni 1.0" and would like to change some of the CSS styling (I have upgraded my account)... My problem is that I can't find or figure out how to switch the widget/sidebar to the left and the content/blog to the right? Does anyone know which code to use for this?

  2. There are a few CSS guru's that randomly drop in from time-to-time that may be able to point you in the right direction. You will just have to be patient.

    In general though, does not provide support for editing CSS. You might want to do a search in the CSS customization forum in the meantime.

  3. well, you can use this:

    #content {
    	float: right;

    but it's not pretty and you'll have a bunch of other stuff to fix. I don't think there's a quick and easy way to do what you want and have it look good.

    Someone else will probably come along with a better idea.

  4. ok thanx anyway! =)

  5. mathel,

    Try this code:

    #rap {
    	margin:0 auto;
    #content {
    #menu {

    What this will do is to set the blog to a fixed width and will center it in the browser window.

    I made ti to a fixed width because, unfortunately, this layout doesn't have a container element that would allow me to control the position of its child lements without affecting the wrapper.

    Don't save it, preview it first and see if that works for you.


    (I have applied the above code to my blog so you can see it too, but I'm gonna leave it for a couple of hours, hopefully you'll see it before I change it back to its original theme.

  6. @devblog:

    slightly OT, which tag is it that makes the blog centered in the browser window? Clear? Overflow? Both?

    Thanks :)

  7. Judy,

    The tag in this theme is a div with an id which value is 'rap' (I'm gonna use this id in my examples here). Now, the property that centers the 'rap' element is the margin property.

    The 'rap' element is the wrapper or container of the contents and menu elements. The CSS code looks like this:

    #rap {margin: 0 auto;}

    The first value (0) refers to the top and bottom, whereas the second (auto) refers to the left and right sides. auto is what centers this 'rap' element.

    Writing the rules like I did above is a shortcut. You can achieve the same results like this:

    #rap {margin: 0 auto 0 auto;}
    (#rap {margin: top-value right-value bottom-value left-value})

    If you want your four sides (top, right, bottom and left) to have the same values, then you'd write your rule like so:

    #rap {margin: auto;}


    PS, if you have more questions, ask away.

  8. thanks! I've bookmarked this for reference later :-)

  9. I am sure devblog knows this but he may have forgotten to mention :) :

    (1) In accordance with the W3C specification an element which is floated is required to also have it's width declared eg :

    #content {width: 550px; float: right}

    (2) Looking at the particular theme in issue here it is very image intense. Hence the background graphics require a degree of gyration in photoshop to complete the design transition the OP seeks. All of which is very simple - but not necessarily a good entry to CSS for a beginner. :)

  10. Thanks much, root :) I didn't include the widths in my code because I'm just adding/modifying some of the existing rules to the current definitions. I'm assuming the OP is using the 'add to existing CSS' option (which is what I did on my blog).

    If the OP is using the 'start from scratch' option, you're totally right, he/she should specify the width of the element.

  11. Yes the fact that the CSS upgrade involves an additonal style sheet does make it more complicated than would otherwise be the case. :)

  12. So true. Especially if the theme you're modifying has (take Freshy, for instance) @import rules.

    If the user chooses to use the 'start from scratch' option, he/she should also add whatever styling there is in those imported style sheets, otherwise the user would be left wondering:

    "WTH happened here? I just modified the title and now my blog looks all messed up"

    not knowing that there may be some other 'important' rules that add to the, let's say, main style sheet of their theme.

    I'm saying this because even if the user clicked on the 'view stylesheet' link, copied the code, modified it and pasted it into the CSS editor, the WP software would remove the @import rules. At least this is what happened last I tested it. - If the WP guys have fixed this 'issue', cool!

    Did I digress? I hope I didn't... not that much, at least.

Topic Closed

This topic has been closed to new replies.

About this Topic