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

  • Author
  • #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!



    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.



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



    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.


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

    we’re veering wildly off topic here.



    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.



    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:

    (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.


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



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



    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.



    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.



    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.



    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.