Hello,

If you are using DNN with the default settings the class will be .SkinObject

This also styles the Search, Date, Breadcrumbs, Copyright, Terms, Privacy.

It is also possible to set your own CSS class name for skin objects. - So you could style the login links without affecting the other tokens listed here.

If you are skinning using a skin.htm file, you specify the CSS class in the skin.xml file. - To give you an overview of how this works:

The skin.xml file is used when you are creating a skin using the skin.htm method. When you upload your skin, DNN takes these two files and combines them together to create a skin.ascx file.

So, if you are working with a skin.ascx file you do not need to create a skin.xml file.

Ok, that's the overview - The actual skin.xml file:

Within this you setup each of your tokens that you want to use in your skin.

If for instance I use the code at the bottom of this page within my skin.XML file, you can see that under the LOGIN token you specify the CssClass - Here it is called: SkinItem.

So, to style the [LOGIN] token you will need to add to your skin.css file: (Remember Login is actually a link, so you need to style the link element of the .SkinItem class - details below)

.SkinItem {
font-size: 20px;
}

So for this to work with the settings we have specified in our own skin.xml file we would use:

.SkinItem {
    font-weight: bold;
    font-size: 15px;
    color: orange;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
}

A.SkinItem:link {
    text-decoration: none;
    color: red;
}

A.SkinItemvisited  {
    text-decoration:    none;
    color: purple;
}

A.SkinItem:hover    {
    text-decoration: none;
    color: blue;
}

A.SkinItem:active   {
    text-decoration: none;
    color: green;
}

If you look at the Skin.XML file you will see that each token can have its own css class, in the example I have set all of the tokens to use a class named SkinItem - you can name each one to a different css class if you wish and specify the details in your skin.css file.

Hope this makes it clearer, thanks,

Lee


** Example Skin.XML File **

<Object>
        <Token>[LOGIN]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
            <Setting>
                <Name>Text</Name>
                <Value>Login</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[BANNER]</Token>
        <Settings>
            <Setting>
                <Name>BorderWidth</Name>
                <Value>0</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[BREADCRUMB]</Token>
        <Settings>
            <Setting>
                <Name>Separator</Name>
                <Value> ... </Value>
            </Setting>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
            <Setting>
                <Name>RootLevel</Name>
                <Value>0</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[COPYRIGHT]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[CURRENTDATE]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
            <Setting>
                <Name>DateFormat</Name>
                <Value>MMMM dd, yyyy</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[DOTNETNUKE]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>Normal</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[HELP]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[HOSTNAME]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[LINKS]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>CommandButton</Value>
            </Setting>
            <Setting>
                <Name>Separator</Name>
                <Value> | </Value>
            </Setting>
            <Setting>
                <Name>Alignment</Name>
                <Value>Horizontal</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[LOGO]</Token>
        <Settings>
            <Setting>
                <Name>BorderWidth</Name>
                <Value>0</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[PRIVACY]</Token>
        <Settings>
            <Setting>
                <Name>Text</Name>
                <Value>Privacy Statement</Value>
            </Setting>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[SIGNIN]</Token>
    </Object>
    <Object>
        <Token>[TERMS]</Token>
        <Settings>
            <Setting>
                <Name>Text</Name>
                <Value>Terms of Use</Value>
            </Setting>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[USER]</Token>
        <Settings>
            <Setting>
                <Name>Text</Name>
                <Value>Register</Value>
            </Setting>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
  <Object>
    <Token>[SEARCH]</Token>
    <Settings>
      <Setting>
        <Name>Submit</Name>
        <Value>Search</Value>
      </Setting>
      <Setting>
        <Name>CssClass</Name>
        <Value>SkinItem</Value>
      </Setting>
    </Settings>
  </Object>
</Objects>

---

Lee Sykes - DNN Creative Magazine - 600+ Video Tutorials, Articles, Interviews - July Issue 58 out now!


Twitter: www.twitter.com/DNNCreative

Dear czone

You can set a login class like you want in your XML-file like dnncreative has explained...
XML-file

 <Object>
  <Token>[LOGIN]</Token>
  <Settings>
   <Setting>
     <Name>CssClass</Name>
     <Value>Login</Value>
   </Setting>
  </Settings>
 </Object>

Css-file
a.Login:link, a.Login:visited
{
 color: #305f25;
}
a.Login:hover
{
 cursor: pointer;
 cursor: hand;
 color: #26bf00;
 text-decoration: none;
}
a.Login:active, a.Login:focus
{
 color: #197f00;
 text-decoration: none;
}
a.Login:active:hover
{
 cursor: pointer;
 cursor: hand;
 color: #26bf00;
 text-decoration: none;
}

---

Vriendelijke groeten
Gilbert Vanden Borre