Page 3 Skin based on DIVs - Skins, Themes, and Templates

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

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

Home All Forums

10/30/2006 4:57 PM

Pieter Siegers

www.icalendula.com
Joined: 11/11/2005

Posts: 131

Re: Skin based on DIVs

Hi, I've made a simple but effective trade-off, it now works (at least sofar!). You simply include a TABLE at the top of your skin, then add the DIV tags, of which one is the container DIV of all other content DIVs you have. The content DIVs each have their position set to 'relative'. With a little javascript it is possible to detect whether the ControlPanel is displayed or not, and if it is, the main DIV with its content DIVs and its position set to 'absolute'. Some code may clarify what I've done (part of a skin based on DNN-Blue, right after the Register tags):

<tr>

</tr>

</table>

<dnn:LOGO runat="server" id="dnnLOGO" />

</div>

<dnn:BANNER runat="server" id="dnnBANNER" />

</div>

var odnn_ControlPanel = document.getElementById("dnn_ControlPanel");

var odivContent = document.getElementById("divContent");

if ( odnn_ControlPanel.innerHTML != "" )

odivContent.style.top = "100";

</script>

For the CSS class 'skinmaster' I added a slightly different class 'skinmasterGR':

.skinmasterGR {

height: 100px;

background-color: #f3f5fa;

border-right: #7994cb 1px solid;

border-top: #7994cb 1px solid;

border-left: #7994cb 1px solid;

border-bottom: #7994cb 1px solid;

moz-border-radius-bottomleft: 15px;

moz-border-radius-bottomright: 15px;

moz-border-radius-topleft: 3px;

moz-border-radius-topright: 3px;

}

just to set the height to a fixed value.

Cheers,

Pieter

10/30/2006 7:29 PM

Timo Breumelhof

www.40fingers.net
Joined: 2/9/2006

Posts: 4430

Re: Skin based on DIVs

There must be HTML error in you previous post otherwise it should work.....
I created a very simple (and ugly) example skin (tested in DNN 3.3.5)
All the server tags in a row in one div.......

ExampleSkin.ascx:
<div id="main">
<div id="ControlPanel" runat="server"></div>
    <div id="maincontent">
        <dnn:LOGO id="dnnLOGO" runat="server"></dnn:LOGO>
        <dnn:BANNER id="dnnBANNER" runat="server"></dnn:BANNER>
        <dnn:MENU id="dnnMENU" runat="server"></dnn:MENU>
        <dnn:SEARCH id="dnnSEARCH" runat="server"></dnn:SEARCH>
        <dnn:LANGUAGE id="dnnLANGUAGE" runat="server"></dnn:LANGUAGE>
        <dnn:CURRENTDATE id="dnnCURRENTDATE" runat="server"></dnn:CURRENTDATE>
        <dnn:USER id="dnnUSER" runat="server"></dnn:USER>
        <dnn:LOGIN id="dnnLOGIN" runat="server"></dnn:LOGIN>
        <div class="contentpane" id="ContentPane" runat="server">
        </div>
        <dnn:COPYRIGHT id="dnnCOPYRIGHT" runat="server"></dnn:COPYRIGHT>
        <dnn:TERMS id="dnnTERMS" runat="server"></dnn:TERMS>
        <dnn:PRIVACY id="dnnPRIVACY" runat="server"></dnn:PRIVACY>
    </div>
</div>

Skin.css:
#main
    {
    position:relative;
    }
#dnn_ControlPanel
    {
    width:800px;
    }
#maincontent
    {
    position:absolute;
    background-color:#FFF000;
    left:100px;
    width:700px;
    padding-top:0px;
    }

DNN websites, modules, skins, hosting and support

10/30/2006 8:20 PM

Pieter Siegers

www.icalendula.com
Joined: 11/11/2005

Posts: 131

Re: Skin based on DIVs

Thanx Timo, let me try it once again and I'll report back later.

10/30/2006 8:41 PM

Pieter Siegers

www.icalendula.com
Joined: 11/11/2005

Posts: 131

Re: Skin based on DIVs

OK, thanx Timo, now it works. I guess the ControlPanel DIV made the difference this time. The code I use for the complete control is as follows:

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

<%@ Register TagPrefix="dnn" TagName="BANNER" Src="~/Admin/Skins/Banner.ascx" %>

<%@ Register TagPrefix="dnn" TagName="MENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>

<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>

<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>

<%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %>

<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>

<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>

<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>

<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>

<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>

<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>

<%@ Register TagPrefix="dnn" TagName="DOTNETNUKE" Src="~/Admin/Skins/DotNetNuke.ascx" %>

<dnn:LOGO id="dnnLOGO" runat="server"></dnn:LOGO>

<dnn:BANNER id="dnnBANNER" runat="server"></dnn:BANNER>

<dnn:MENU id="dnnMENU" runat="server"></dnn:MENU>

<dnn:SEARCH id="dnnSEARCH" runat="server"></dnn:SEARCH>

<dnn:LANGUAGE id="dnnLANGUAGE" runat="server"></dnn:LANGUAGE>

<dnn:CURRENTDATE id="dnnCURRENTDATE" runat="server"></dnn:CURRENTDATE>

<dnn:USER id="dnnUSER" runat="server"></dnn:USER>

<dnn:LOGIN id="dnnLOGIN" runat="server"></dnn:LOGIN>

</div>

<dnn:COPYRIGHT id="dnnCOPYRIGHT" runat="server"></dnn:COPYRIGHT>

<dnn:TERMS id="dnnTERMS" runat="server"></dnn:TERMS>

<dnn:PRIVACY id="dnnPRIVACY" runat="server"></dnn:PRIVACY>

</div>

Hopefull this thread is of use to others that want to update from TABLE to DIV based skins!

Page 3 of 3

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:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
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.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)