Semantic code and header tags within DotNetNuke skins
Applying the header tag structure to a DotNetNuke skin
We will now demonstrate how you can apply this header tag structure to the DNN-Blue skin (table based skin).
For this tutorial we will apply the third header tag layout, of course, you can apply any header tag structure that suits your own page layout.
DNN-Blue Skin
Because we are not applying a H1 tag to the logo, we do not need to make any edits to the skin.ascx / skin.htm file.
The changes we need to make are to the Containers of the DNN-Blue skin and the skin.css file.
For this tutorial we will change one of the containers and you can edit any further containers as you need.
DNN-Blue Containers
NOTE: This tutorial assumes you are experienced with creating skins. If you are new to skinning, refer to the skinning tutorials beginning in issue 5 through to issue 9. Starting with How to create a skin for DotNetNuke.
Follow these steps to set up your DNN Containers to use header tags:
Setup the container
- Create 2 copies of the DNN–Blue image header white background container
- Name the copies, “image header white background H2” and “image header white background H1”
(If you are creating these containers for a client, give the containers more meaningful names to the client, ie: “sub_container”, “main_article_container”)
- Open “image header white background H2” in your editor of choice. Visual Web Developer Express is a good free tool for editing skins
|  |
|
|