Custom CSS on wordpress.com

UPDATE: it seems that this trick doesn’t actually work all that well.  however, the pinklillies style has been painstakingly converted to a sandbox skin.  The instructions below will help you use skins that were not intended for wordpress.com, though.

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.

textedit
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!

FULL DISCLOSURE: i don’t have a paid account. i can’t test this out.

UPDATE: wank points out that this won’t work perfectly, since classic styles are meant to replace classic, not overwrite it. example

Advertisements