Tutorial: Using WordPress Styles on WordPress.com (Mac)

  • Author
    Posts
  • #23748

    Customizing CSS is a new trick on wordpress.com, but hosted wordpress users have been doing it for a while.

    Alex King has hosted a competition or two based on styling the ‘classic’ theme.

    Here’s how to use those great old styles:

    1. download and unzip the style of your choice.
    2. Go to your wordpress dashboard, and under Presentation, choose the WordPress Classic theme, by Dave Shea.
    3. Start Writing a new post. Using the uploader, upload all of the images from the style you downloaded.
    3a. for each image, click on it, and make sure the popup says ‘using original’ at the top. click on ‘using thumbnail’ if it doesn’t. once it says ‘using original’, click ‘close’
    4. Open TextEdit on your computer
    5. drag style.css from the downloaded style onto textedit
    6. click Go > Find (or press cmd+F)
    7. search for the name of the first image in the style folder (ex. top.gif)
    8. in your new post (on wordpress.com), in the uploader, control+click on the same image, and click “copy image address”
    9. switch back to textedit, and paste that address into the ‘replace’ field. see example
    10. click ‘replace and find’. this will highlight the name of the image.
    11. click ‘replace’ and the highlighted text will be replaced with the address of the image you’ve uploaded.
    12. repeat steps 6-11 for all the images in the style.
    13. click File > Save
    14. click Edit > Select All, then Edit > Copy
    15. go to the Custom CSS page in your wordpress dashboard, and paste.
    16. click preview to see it in action, and click ‘save stylesheet’ if it looks good!

    #23942

    drmike
    Member

    I just had a thought (And I’ll send this in via feedback shortly)

    I wonder if we could have a mini comp on best design using one of the themes.

    hmmm…

    #23947

    you haven’t been following wank‘s blog very closely, have you?

    #23948

    drmike
    Member

    Staff response is a negative due to time constraints.

    Oh, WordPress theme contests are known for falling apart I think. Had three of them just this year. I think only one went all the way.

    #23951

    it depends what you mean by ‘all the way’.

    we’re veering wildly off topic here.

    #23952

    andy
    Member

    The key masters are not interested in moderating a stylesheet competition for several reasons, not least of which is the time involved.

    This forum topic should give plenty of opportunity for showing off CSS.

    #24182

    wank
    Member

    Potential snag: since the custom CSS is loaded in addition to the original CSS, rather than replacing it, some of the classic style may remain and screw up the design:

    example
    (from selfhosted WP install, with alexking.org stylesheet imported after the Classic one)

    I imagine this is fixable (though I’m having a devil of a job trying to switch to floated columns) but not without a reasonable level of CSS competence. Presumably this is why Sandbox has minimal styling out-of-the-box; there’s nothing to overwrite.

    I was planning to adapt some of my old Classic stylesheets, but rather than figure out how to overrule Classic it’ll probably be more efficient to convert them to Sandbox.

    #24195

    true, that’s definately a better route. i figured there would be some problems.

    #24199

    andy
    Member

    Can’t wait to see what you produce, Wank.

    #24226

    drmike
    Member

    Potential snag: since the custom CSS is loaded in addition to the original CSS, rather than replacing it, some of the classic style may remain and screw up the design

    That’s one of the reasons why I like the idea of copying and pasting the old CSS file into the editor. Everything’s there.

    #24237

    lorelle
    Member

    Yes, but the style references don’t match the “old” WordPress Theme styles. There are a ton of new styles. TON. Very few old references. This is start from scratch stuff.

    Do not expect to copy a WordPress Theme’s stylesheet from any old WordPress Theme and paste it in and have it work. Won’t. A few little bits, maybe, but core stuff, nope.

    #24255

    wank
    Member

    Do classes and IDs really vary that much between themes? One of the strengths of Sandbox is that its class and ID names look fairly sensible and intuitive to me, so that even if they don’t match those used by my existing theme I can easily figure out how they correspond. Of course, there may be designers who go around calling their header and content divs #boodle and #flopsy, but most seem to stick to easily translatable things like, well, #header and #content.

    #24258

    swallick
    Member

    You’re exactly right, Wank. I mean, it’s not hard to figure out

    body.single h2.entry-title

    Or maybe it is. I forget. No, no, wait—definitely is not. And the beauty of making things semantic (not to mention the hAtom stuff).

The topic ‘Tutorial: Using WordPress Styles on WordPress.com (Mac)’ is closed to new replies.