Salam ELIAS wrote:
I am a very beginner in design and skinning in DNN
I have setup DNN 9.1 and following instructions I found in some articles about adding html file which should be parsed.
I created a very simple html file "mySkin.html", inside a folder SubtleTrend placed at "Portals\_default\Skins", with this simple markup
then browsed my local dnndev.me > Manage > Themes , I can see the new theme but I am not sure how to tell DNN 9 to parse, I have 3 icnos on the skin (preview, apply, delete) but no parse.
Is it somewhere else? Thanks for your help
The parsing should be automatically, but I must say it has been 10 years since I created an HTML skin.
It's actually just a template for the ascx file created (which is the actual skin file).
IMO it.'s better and simpler to create ascx skins.
Bit more info from one of my old skin documentation:
Skin package
A skin package is a collection of files that make up
the skin.
A basic skin would contain one html file and one CSS
file.
The HTML file will contain static HTML and DNN tokens
for skin objects.
The CSS file contains all the CSS for the skin.
Myskin.html
Skin.css
If you zip these file, you get a package that can be
installed in DotNetNuke.
On installation DNN will unzip the file save the
unzipped files on the server and parse the HTML file to an ASCX file.
The result on the server would be 3 files:
Myskin.html
Myskin.ascx
Skin.css
The HTML file is only used to create the ascx file.
The MySkin.ascx file is the actual skin control that
gets injected in the page.
What’s in a skin?
Let’s look at actual content of a skin file.
We’ll look at a skin with only one skin object and one
Content Pane.
The skin object is the Logo skin object, which renders
the logo the site administrator has set.
The content of this very simple skin would be this:
<%@ Control language=“vb” AutoEventWireup=“false”
Explicit=“True” Inherits=“DotNetNuke.UI.Skins.Skin” %>
<%@ Register
TagPrefix=“dnn” TagName=“LOGO” Src=“~/Admin/Skins/Logo.ascx” %>
<div id=“s_container”>
<div
id=“s_header”>
<dnn:LOGO runat=“server” id=“dnnLOGO” />
</div>
<div runat=“server” id=“ContentPane” class=“ContentPane” ></div>
</div>
The skin consists of 2 parts, declarations on top
(<%@......%>) and the actual skin content
Declarations:
The first line tells DNN, this is a skin file.
The second one tells dotnetnuke where it can find the
Logo skin object control.
The Skin content:
This is a mix of regular HTML and skin objects.
Everything that is not regular HTML will have an
attribute runat=“server” to tell the system something has to be processed. In
this case there are 2 controls in the skin; the logo skin object and a
Contentpane.
The red part is the logo skin object and the sites
logo will appear on the page on that spot.
There is also one ContentPane in the skin, it’s the
blue line.
(it does not have a declaration on top and DNN will
consider any element with runat=server without a declaration as a contenpane)
This is an element to which the site administrator can
add modules from the control panelAn
The HTML file
So far it seems all quit easy, but creating an HTML
skin is easier for non programmers.
The corresponding HTML file would look like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<link
rel=“stylesheet” type=“text/css” href=“skin.css” />
<title></title>
</head>
<body>
<div id=“s_container”>
<div
id=“s_header”>
<object id=“dnnLOGO”
codetype=“dotnetnuke/server” codebase=“LOGO”>
</object>
</div>
<object id=“ContentPane”
codetype=“dotnetnuke/server” codebase=“CONTENTPANE”>
<param name=“class”
value=“ContentPane” />
</object>
</div>
</body>
As you can see this is a regular XHTML document, with
some object tags added.
These object tags represent the skin objects.
You can also see that the HTML document has a doctype,
head and body.
Since these are not needed in the ascx file (they are
already present in the DNN base page) the skin parser removes them.
The link to skin.css is just there to check the HTML
skin in a browser.
The object tags get replaced by their corresponding
declarations and tags in the ascx file.
As you can see every skin object can have parameters,
which will be converted to attributes in the ASCX file. The Contenpane has a
parameter “class” which you see as an attribute in the ascx file.
The Rendered HTML
As an example of the HTML that gets sent to the
browser, here’s the HTML the logo skin object renders:
<a id=“dnn_dnnLOGO_hypLogo” href=“http://dnn511/Default.aspx” title=“My
Website”>
<img id=“dnn_dnnLOGO_imgLogo” style=“border-width: 0px;” alt=“My Website” src=“/Portals/0/logo.gif” />
</a>
As you can see it
renders a logo image for the logo wrapped in a link to the home page of the
site.
The green IDs are
generated based on the id of the skin object in the ASCX file and as you can
see they are changed. You should not use these dynamic Ids in your CSS, since
they might change in the future.
The link points to
the home page of the site.
The location of the
logo comes from the database; it is the logo file that has been set by the
sites administrator. And the title and
alt are the websites title, also set by the administrator.