Semantic code and header tags within DotNetNuke skins
Further Styling Options
This is where the fun starts!
First of all you need to understand some basic CSS rules.
We can achieve a much finer control for styling the header tags by using the class attribute.
For instance:
(HTML)
<h1 class="article">The article title</h1>
(CSS)
h1.article
{
letter-spacing: 0.2em;
}
This will add letter spacing to any h1 titles that use the article class.
Styling the header tags in DotNetNuke
In the Text / HTML module:
First of all, lets work with some text within the Text / HTML module.
- Add the following text into the source code of the Text / HTML module
<h1>Text using a H1 Tag with no class specified</h1>
<h1 class="article">Text using a H1 Tag with article class specified</h1>
2. Click on Update, your text should be styled as in figure 19.
(fig. 19)
3. Add to the skin.css file
h1
{
color: Purple
}
This will overide the h1 color styling in the default.css file and all of the text will change to purple.
If you view the page source code that DotNetNuke produces, you will see that for the content area within the Text / HTML module, DotNetNuke adds the “Normal” class:
<span id="dnn_ctr458_HtmlModule__ctl0_HtmlHolder" class="Normal">
<h1>Text using a H1 Tag with no class specified</h1>
<h1 class="article">Text using a H1 Tag with article class specified</h1>
We can take advantage of this and specify styling for any header tags within the Text / HTML module, ie. any h1 tags within the Normal class.
4. Add this code to the skin.css file
h1
{
color: Purple
}
.Normal h1
{
color: red;
}
You will see that this overrides the styling for a h1 tag and specifies the styling for any h1 tags placed within the Normal class. |  |
|
|