You need to Register for free and Login to post a message in the forum.

Forum

Forums > Users Lounge > Feedback, Suggestions and More
Subject: Skinning tutorial great - but inclomplete!
Prev Next
You are not authorized to post a reply.

Author Messages
masonpj
DNN Creative Magazine Subscriber
Nuke Newbie
Nuke Newbie
Posts:1
22 Apr 2008 5:41 AM  
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
leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3426
23 Apr 2008 2:35 AM  
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
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
You are not authorized to post a reply.
Forums > Users Lounge > Feedback, Suggestions and More > Skinning tutorial great - but inclomplete!


ActiveForums 3.7

Latest Forum Posts

RE: Can't Login! Login Page can't be accessed... by e-kreator
a database that you mean.
RE: DotNetNuke 4.9.1 and 5.0.0 by jncraig
Yes, lots of learning, lots of new things and new ways.  I played a little with Beta6 of DotNetNuke ...
RE: PDF File Content by jncraig
If you want to just serve up the PDF files as PDF files, upload them using the File Manager.  You ca...
RE: Navigating between modules by jncraig
What is the URL that is generated? To which page does it send you?
RE: New Logo cant display by jncraig
There is nothing wrong with this, provided that you did it correctly.  I would have to look at your ...
RE: Child portal to live site by jncraig
You should set DNS to point the URL to the IP address of the DotNetNuke installation.  Inside of the...
RE: PopUp Page by jncraig
To open a link in a new window, format the link this way:Link to us! It is the target="_blank" that...
RE: How to Change fckeditor alignment by jncraig
It might be easier to use a different skin for your administrative pages. There have been some ot...
RE: Can't Login! Login Page can't be accessed... by jncraig
If you have access to your database, look at the Portals table.  Make sure that LoginTabID is set to...
RE: Can't Login! Login Page can't be accessed... by e-kreator
Hello my problem is that the configuration management in login page page was sent to a Web page that...
RE: Create new 'host' user? by jncraig
You can change a regular user to a Host, by setting the "Host" user's IsSuperUser set to True in the...
Create new 'host' user? by jonathanbrickman0000
I have a DNN 4.7 web site successfully migrated to a new server.  There is only one hitch:  the 'hos...
RE: split copyrgt option in two lines by jncraig
You can put a in the copyright text. This may or may not put other text (to the right of the copyr...
RE: Can't Login! Login Page can't be accessed... by jncraig
Try: http://localhost/DNN/login.aspx http://localhost/DNN/?ctl=login If neither of those ge...
RE: HOw to upload site from localserver to www.mysite.com by jncraig
View this tutorial:How to transfer a localhost DotNetNuke installation to a live websitePay special ...
RE: Nightmare with SKINS... by jncraig
Before you get in too far, you might want to take a look at:An Introduction to the Principles of Dot...
RE: Nightmare with SKINS... by dougieladd
Hi Joe...thank you for that...I kind of assumed that was the case. As I understand it the skin comes...
HOw to upload site from localserver to www.mysite.com by aniket.rasal
Dear Friends,       I have created site. Its wolring fine on my local machine.But when i upload the ...
RE: DotNetNuke 4.9.1 and 5.0.0 by leesykes
It is on the Extensions page as well - named 'Batch Install Extensions' stefan blogged about it here...
How to Change fckeditor alignment by aniket.rasal
Hello Friends,       I am creating site with customized skin. In that i want to change the alignmen...
DotNetNuke Modules
RSS Feeds