One of the awesome new features in Genesis 2.0 is enabling full HTML5 markup by simply pasting the following code into your Genesis Child Theme’s functions.php file:

Note that if you’re using either the Dynamik Website Builder or the Genesis Extender Plugin you can do this by simply checking a checkbox in their admin panels.

HTML 5 Change is Not Retroactive

One issue when enabling these new HTML5 elements in your chosen Genesis Child Theme is that some of the default and/or custom styles found in your Child Theme, no longer have the intended effect.

This is because major element names have changed so styles that were previously targeting/affecting these elements are not properly targeted after the upgrade to HTML5.

Example

If your style.css file is currently styling the main wrap of your site by focusing CSS code on the #wrap div the styling will no longer work once HTML5 is enabled.

This is because that #wrap ID is now a .site-container class.

#wrap { }
is now
.site-container { }

Time Consuming Solution

This means your site design can, and likely will, “break” once HTML5 is enabled.

The remedy for this situation is to go line-by-line through your entire CSS stylesheet to identify and update the element selectors that changed, so they reflect the new HTML5 markup.

Dynamik Specific Solution

For Dynamik users this will not be necessary because the Dynamik Stylesheet will automatically switch out these elements when the “Genesis HTML5 Markup” option is selected, but any affected Custom CSS will still need to be addressed.

So for either the Custom CSS of Dynamik users or for default and/or custom styles found in other Genesis Child Themes, I’ve created a simple solution to help speed up this process.

Our Gift to the Genesis Community

To convert your Child Themes CSS code to reflect the new HTML5 markup found in Genesis 2.0+:

    1. Save a backup copy of the CSS you are going to convert
    2. Copy and paste your entire stylesheet code into the textbox below
    3. Click the “Convert CSS” button
    4. When you click that button your CSS code will instantly be edited to reflect these new HTML5 elements.

The application simply searches through the code pasted in, finds all the elements that need updating, and then replaces them with the correct HTML5 markup. So the rest of your styles stay intact, only the necessary elements are affected.

  1. Click the “Select CSS” button and then copy all the CSS
  2. Paste all the CSS back into your Child Theme’s stylesheet (or your Dynamik, Genesis Extender or Prose Custom CSS boxes)
  3. Save your changes
  4. Refresh the front-end of your site and you should find that it will magically “un-break”

Note that this may or may not be a perfect solution for all cases but should be a huge time saver for many Genesis users.

To convert your Catalyst styles over to the Genesis HTML5 markup check this box:


Feedback Welcome and Appreciated

The idea is to make this process as simple and effective as possible so your input is welcome. If you find any bugs or potential updates to the process, please let us know so we can make the necessary adjustments.