Creating or Converting a Skin into Your Own Responisive Skin
DNN Responsive Skin Creation
If you want to change an old DNN website responsive to update it, here are the actions you must follow
- Ensure tables are recreated in the form of floating DIVs; this makes sure content panes are moved to the appropriate site and resized.
- Check each image in terms of their size
- Configure forms to bring about a transformation of the side-by-side label and input field into the label that exists above input.
If you aim to get modern compatibility, I suggest you opt for DocType of the skin to HTML. Whilst you implement these changes, you can proceed to take the following steps;
- On the desktop VM, run a test using the frequently used browsers.
- Configure the viewport to make sure the response is compatible with mobile devices. Before this step, viewing of the page will be in a desktop format.
Setting DocType to HTML: DNN incorporates associated DocType file; thus setting up the DocType of individual skin options. Fall-back configuration under host settings gets overridden. Each theme (like .ascx file, DocType file) associates with skin directory associates; e.g.
- Home.ascx
- Home.doctype.xml
- Home.css
Next, you will add one line in the DocType file to ensure definition of DocType. A typical example of this is, <SkinDocType><![CDATA[<!DOCTYPE html>]]></SkinDocType>.
Viewport Configuration: Configuration of viewpoint involves adding a meta tag to the website head. You should be aware that DNN skins do not allow direct access to the HTML code head section. You can get around this by addition of control that will inscribe important information to the head.
Taking note of your installed DNN, click on “Site Settings configuration” then select “Add Meta Tag”. Navigate in the “Admin” of the “Site settings” page to find the “Advanced Settings” option, Site Settings page.