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
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Skin based on DIVsSkin based on DIVs
Previous
 
Next
New Post
10/30/2006 4:57 PM
 
Pieter Siegers

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

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):

<table class="skinmasterGR" width="100%" border="0" align="center" cellspacing="0" cellpadding="0">

<tr>

<td id="ControlPanel" runat="server" class="contentpane" valign="top" align="center"></td>

</tr>

</table>

<div id="divContent" style="left: 0px; width: 100%; position: absolute; top: 0px; height: 100%;">

<div style="width: 100px; height: 100px; left: 34px; position: relative; top: 51px;">

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

</div>

<div style="width: 100px; height: 100px; z-index: 100; left: 464px; position: relative; top: -48px;">

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

</div>

</div>

<script type="text/javascript" language="javascript">

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
 
New Post
10/30/2006 7:29 PM
 
Timo Breumelhof


Timo Breumelhof's Avatar

www.40fingers.net
Joined: 2/9/2006
Posts: 4430
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;
    }
 
New Post
10/30/2006 8:20 PM
 
Pieter Siegers

www.icalendula.com
Joined: 11/11/2005
Posts: 131
Thanx Timo, let me try it once again and I'll report back later.
 
New Post
10/30/2006 8:41 PM
 
Pieter Siegers

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

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" %>

<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>

Hopefull this thread is of use to others that want to update from TABLE to DIV based skins!
 
 Page 3 of 3
Previous123 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Skin based on DIVsSkin based on DIVs


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.