I just finished the Vortex Music video set.  Great info - thanks, but in video 8, the commentator very quickly skims thru the final steps to adding CSS classes and does not tell us how they actually relate to the finished page. This is very frustrating, as the vortex sample files are also incomplete, so no way of figuring out how to actually get the skinitem classes and header elements to affect the page.  He just says I did this and this and this and that and voila!!




Specific questions remaining -

What is the A. in A.SkinItem:link

how are the skinitem classes (:link, :Visited, :hover) applied to the skin

How are the header elements (H1 - H5) used

What is H5 set to (can't see it in the vid.)

How are the normaltextbox, normalred and normalbold classes used?

Where is the vortex logo?

Thanks

If you recall we specifed where the SkinItem class is applied in the skin.xml file.

So, this covers the login links, breadcrumbs, copyright, currentdate, help, hostname, privacy, terms, user and search tokens.

All of the code for the vortex skin is included for download.

In the skin.css file that is included for download we have:

/* ==============================
 Style for the following Skin Items (You can change the css class
associated with these objects in the skin.xml file)
- SkinItems -  Login and Register links, Breadcrumb, Copyright, Date,
- Help, Hostname, Privacy, Terms, Search
================================== */

/* This is the Date eg. any items that are not links */
.SkinItem {
    color: #FF9900;
    font-family: tahoma, arial;
    font-weight: bold;
    font-size: 11px;
}
/* This sets the style for all skin items that are links */
A.SkinItem:link {
    color: #FF9900;
    font-family: tahoma, arial;
    font-weight: bold;
    font-size: 11px;
}

A.SkinItem:visited  {
    color: #FF9900;
    font-family: tahoma, arial;
    font-weight: bold;
    font-size: 11px;
}

A.SkinItem:active   {
    color: #FF9900;
    font-family: tahoma, arial;
    font-weight: bold;
    font-size: 11px;
}

A.SkinItem:hover    {
    color: #FF0000;
    font-family: tahoma, arial;
    font-weight: bold;
    font-size: 11px;
}


The.SkinItem class styles any of the tokens that are not links - such as the copyright text.

the a.skinitem elements styles any tokens that use the SkinItem class that are links.

The A refers to the A tag in html links - ie. < a href =  . . .

Header Tags
The h1 tag is used for text in the TopPaneSE content pane
The other header tags are styled but not added into the text of the skin. - Its up to you to decide where you wish to use them. In later tutorials we go on to semantic coding of skins and the use of header tags.

You can view all of the header tags CSS code in the skin.css file that is included for download on the tutorial page:
How to create a skin for DotNetNuke


Here are some details on the styling of the normal classes:

normal text box
normalred
normalbold

The vortex logo is not included for download as it is that companies logo. You can upload any logo that you have instead of the vortex logo.

Thanks,

Lee