Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Parse HTML fileParse HTML file
Previous
 
Next
New Post
3/1/2018 8:10 PM
 

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

 

<div id="ContentPane" runat="server"></div>

 

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
 
New Post
3/1/2018 9:51 PM
 
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.

 

 
New Post
3/5/2018 10:22 AM
 

So many thanks for the detailed explanation. Frome technical point I understand but from functional perspective I am not sure of understanding 2 things:

 

- Relation between Theme/Module/Container 

 

- if there is a possibility to add a basic web site (html files, Js files and CSS or bootstrap) to DNN.

 

For the 1st one, If I understand well, Theme is for LAYOUT, containers for adding MODULES, modules for adding text on the fly. I am trying to find out how replicate my site (Top Navbar, 3 columns underneath, footer ) in an easy way. What is the best way to follow from best practices perspective? Should I put all HTML elements in a ascx file without the texts and paragraphs, add my bootstrap files ......and so on.

 

For the 2nd point, Is there any tool/or DNN methodology to transform an existing basic static website as indicated to a dnn web site

 

Thanks again for your help

 
New Post
3/5/2018 12:08 PM
 
Salam ELIAS wrote:

So many thanks for the detailed explanation. Frome technical point I understand but from functional perspective I am not sure of understanding 2 things:

 

- Relation between Theme/Module/Container 

 

- if there is a possibility to add a basic web site (html files, Js files and CSS or bootstrap) to DNN.

 

For the 1st one, If I understand well, Theme is for LAYOUT, containers for adding MODULES, modules for adding text on the fly. I am trying to find out how replicate my site (Top Navbar, 3 columns underneath, footer ) in an easy way. What is the best way to follow from best practices perspective? Should I put all HTML elements in a ascx file without the texts and paragraphs, add my bootstrap files ......and so on.

 

For the 2nd point, Is there any tool/or DNN methodology to transform an existing basic static website as indicated to a dnn web site

 

Thanks again for your help

The Theme (or formally Skin) is like the base layout of the page.
It can contain both static HTML as well as dynamic and CSS, JS etc.
There are special elements called Skin objects that allow you to add functionality, like a logo of JS / CSS links.

The Skin also will contain a few Panes, which is a "zone" to add modules to.
(which contains editable content).
A container is just a wrapper for the module, mostly for styling.
(you can create containers with for instance, different background-colors, with or without module title  etc.)

 There are no "converters" but when you understand the way DNN works, it's not very difficult to make a conversion.
There is the default.css file that DNN loads by default that sometimes causes some issues (influencing your existing CSS) , but with a few extra resets, you can fix those

There are some videoes and blog posts you can view for more info.
Although that might look like old info, the principles have not changed..

http://www.dnnsoftware.com/community/learn/video-library/view-video/video/14/view/details/basic-dotnetnuke-skinning


 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Parse HTML fileParse HTML file


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2018 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out