Hello,
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:
.SkinItem {
font-size: 20px;
}
etc. - If you refer to the skinning toolkit you will see that I have specified a different class name for DNN - this is the default class name that DNN uses.
http://www.skinningtoolkit.com/tabi...fault.aspx.SkinObject {
font-weight: bold;
font-size: 15pt;
color: orange;
font-family: Tahoma, Arial, Helvetica;
text-decoration: none;
}
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: 15pt;
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>