How to Manually Create a Blank Slate Micro Theme for a Currently Unsupported WordPress Theme or Plugin

Note: following this tutorial might be difficult without a knowledge of CSS and HTML.

Themeover will add support for more and more WordPress Themes in the form of Blank Slate Micro Themes over time. But we realise that some of you might want to know how to create your own Blank Slate Micro Themes for currently unsupported Themes and plugins. This tutorial explains how we go about creating Blank Slate Micro Themes. This is the most efficient method we’ve come up with so far.

Start by installing a blank slate theme for another theme (e.g. Blank Twenty Eleven).
Go to the Microthemer UI (non-visual view) and open up the first section (e.g. Main Body).
Click the “Modify Selector” link on the first selector (e.g. Body) to reveal the underlying CSS code. Don’t edit anything just yet.
Open a new tab in your browser and navigate to the frontend of your WordPress site.
Inspect the target element (e.g. <body>) with Firebug (for Firefox or Chrome) to see what selectors from the active Theme may be acting on it (Right-click the element and then choose “Inspect Element with Firebug”).
With the <body> tag, most Themes will target it with just “body” (without the quotes). Other elements may be targeted with one or more ids or classes (e.g. #header .nav) which is why you need to use Firebug on each element to ensure that your selector is specific enough to override CSS selectors from other stylesheets.
If the active Theme is targeting the element in question with a CSS selector, you can just copy it from firebug into the “CSS Selector” textarea for the “Body” (for instance) selector in the Microthemer UI. You don’t need to make it more specific because Microthemer-generated CSS (active-styles.css) will be called after the active Theme’s style.css stylesheet. Of course you don’t have to copy the exact CSS selector from the active Theme. The only important detail is that your selector is as or more specific than any other selectors. This short tutorial will make your understanding of CSS specificity much clearer.
One thing to look out for when copying the selector from firebug is if “!important” has been applied to any of the selector’s styles. If it has, click the “Edit Styles” link for the selector in Microthemer, check the relevant CSS property group checkbox, and then click the “i” to the right of the CSS property input field. This will ensure that if any value is applied to the CSS property at a later date it will be given the !important declaration and will therefore successfully override the Theme’s !important style. Doing this now means you (or other users) won’t forget in future.
Another thing to look out for when copying a selector from firebug is comma separated CSS selectors (e.g. #header a, #footer a). In this example, if you copied the whole CSS selector (everything preceding the “{” bracket) over to the Micorthemer UI and gave it a label “Header Link”, it would be a bit misleading. It would be misleading because the selector would actually target links in the footer as well as the header. You could of course re-label the selector to “Header & Footer Link” but, on the whole, it’s best to just copy the “#header a” bit and then create a separate “#footer a” selector in the footer section of the Microthemer UI.
Once you change the CSS selector code, don’t hit the “Update” button immediately. Leave everything open.
Click the “Modify Selector” link on the next selector in the section (e.g. Wrapper).
You do this because you will often want to copy portions of the CSS selector code over to the next selector in the section. Leaving the fields open makes this easier.
Repeat steps 5-9 for each selector in the section.
When you have changed the last selector in the section, click all the “Update” buttons to update the CSS selectors.
Click the blue “Save” button to save your changes.
Click on the title of the first selector in the section (e.g. Body) to load the visual view.
Ensure that Highlighting is turned on.
Click the “Next” Button to iterate through all the selectors in the section. The highlighting should change as you do this in accordance with the target element(s). If you notice that the highlighting does not work as expected, re-examine your CSS selector code by clicking the “Modify Selector” link.
Once you have completed the first section, repeat all of the above steps for the remaining sections.
Then, export your settings as a Micro Theme by checking the checkbox above the blue “Save” button and choose “New” from the Drop-down list. Call it “Blank [Theme Name]“.
Please consider submitting your blank slate Micro theme to themeover.com so that others can benefit from your work. If you do this, please remember to fill out the meta information and upload an image called screenshot.jpg via the Manage Themes page. Once you’ve done that, you just click the “Export As Zipped Theme” button, save the zip file to you computer, and then upload it to Themeover.

Following this method can save you a lot of time – and all of your selector labels and sections will follow a uniform structure from Micro Theme to Micro Theme.

Some Optional Naming Conventions to Follow

If you find that you need to add additional selectors to a section, these naming conventions might save you some decision making time:

When adding multiple selectors for one element in different states, use the element name before the state (e.g. Link Hover) rather than the other way round (Hover Link)
When adding a selector for a element that just serves as a wrapper for another element follow this naming convention: