Semantic code and header tags within DotNetNuke skins
Styling the Module Titles
You will notice that even though we have been making style changes to the h1 tag, this has not changed the styling of the titles for the containers.
If we look at the page source code for the Home page, you will see why:
<td valign="middle" width="100%" nowrap>
<h1><span id="dnn_ctr458_dnnTITLE_lblTitle" class="Head">Welcome To My Website...</span>
</h1>
</td>
DotNetNuke automatically adds as default a span tag with a “Head” class around each container title, so this overrides any styling that is specified for the h1 or h2 tags that we have placed in our containers.
So, as we have demonstrated in previous tutorials, the .head class within the skin.css file is used as default to style the container title. (View How to create a DotNetNuke Skin and How to Create a DotNetNuke Container tutorials. The DotNetNuke Skinning Toolkit is also a useful reference for learning skin classes.)
We can however specify styling for any h1 tag which has a “Head” class contained within the h1 tags. – Note that this is different to specifying a class for a header tag <h1 class="head">
This potentially allows us to set up different styles for different header tags which contain the Head class.
Style the h1 tag for the main title articles
Lets style the text for a main article container title, ie. the “image header white background H1” container title. We will do this by specifying the style for any Head class that is contained within a h1 tag.
Add this code to your skin.css file: (note the space between h1 and .Head)
/* head class within the h1 tag */
h1 .Head {
font-family: Tahoma, Arial, Helvetica;
font-size: 18px;
font-weight: normal;
letter-spacing: 0.2em;
}
You will see that the “Welcome to My Website” container is using the H1 container and that the text letters are spaced out.
The other containers on the left and right are using the H2 containers and their text is formatted just using the “Head” class, so they do not use spacing.
You will also notice that the h1 tags within the Text / HTML module are not affected by the letter spacing. |  |
|
|