Semantic code and header tags within DotNetNuke skins
Style the H3 and H4 tags
We are going to use the H3 and H4 tags for formatting the titles of our main articles. The main articles will be surrounded by the “image header white background H1” container.
If you look at the default installation content of DotNetNuke you will see the “Administrator Login:” and “Host Login:” sub titles.
We will format both the H3 and H4 tags in this case to look identical to the bold text that is displayed in the default installation content.
- Open the skin.css file for the DNN-Blue skin
- Add the following code:
h1, h2, h3, h4
{
margin: 0;
}
h1, h2
{
padding-left: 3px; /* to replace the in the container file
}
h3, h4
{
font-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: bold;
color: #000;
margin-bottom: 10px;
}
The code above is the complete code so far.
You will see that in the first section of code we have removed all margins for h1, h2, h3, and h4 tags.
We have then moved the padding-left code to a separate section as we do not wish to add any padding to the h3 and h4 tags.
The last section styles the h3 and h4 tags. Here we have specified the full styling for the text as we wish to override the settings within the default.css file. (For further information, view the Introduction to CSS and inheritance in DotNetNuke skins tutorial.
H3 and H4 margins
The first section of code removes all margins from the h3 and h4 tags, in the last section of code we have specified to add a bottom margin of 10 pixels. Overall, this will remove the top margin and then create a bottom margin.
The bottom margin creates the spacing underneath the H3 text. Therefore, we do not need to add a line break into our code (<br />).
H3 tag added (fig. 16)
Note that the first two titles use H3 tags, but the final title is styled using bold text. You can see that visually there is no difference between the two.
To format the text within the Text / HTML module
- Click on Edit text
- Remove the current default styling that is used for the titles, ie:
- Click on HTML
- Remove any bold tags ie. <b> or <strong> from the titles, ie:
<b>Open Source License:</b>
- Add the h3 tag to the titles, ie:
- Click on Design
- Highlight the text for the title
- Go to the ‘Paragraph’ drop down list
- Select ‘Heading 3’
- Click on update
(View example images below)
Formatting a title to use h3 tags (fig. 17)
H3 tag placed around titles (fig. 18)
This creates the view you can see in figure 16. |  |
|
|