I have a problem that is driving me up the wall. Here is the layout of the skin I am trying to get to work.
First table contains the control panel and another table below.
Second table contains the image skins in such a way to make a border around the outside of the table and the center <td> is merged to contain a table that houses the menu, and panes and content.
I will post the code, but what I am not getting to work as I expect is the border of the second table.
It has two cells in the middle of each side that I am trying to get to work to repeat as the cells grow in height. It won't work unless I set a specific height, and if I don't and my content in my panes is longer than the height size I set, it breaks the border of the box.
Here's the CSS File named Skin.css (I have commented where it's not working.)
/*
================================
Skin styles for DotNetNuke
================================
*/
.pagemaster {
width: 100%;
height: 100%;
background-color: #99cc66;
color: White;
}
.skinmaster {
height: 100%;
background-color: White;
color: White;
/* background-color: #7BC642;*/
BORDER-RIGHT: #23A53E 1px solid;
BORDER-TOP: #23A53E 1px solid;
BORDER-LEFT: #23A53E 1px solid;
BORDER-BOTTOM: #23A53E 1px solid;
moz-border-radius-bottomleft: 15px;
moz-border-radius-bottomright: 15px;
moz-border-radius-topleft: 3px;
moz-border-radius-topright: 3px;
}
.skinheader {
background: Black repeat;
color: White;
}
.skingradient {
HEIGHT: 30px;
background: White;
background-color: Black;
color: White;
}
.controlpanel {
width: 100%;
background-color: #63CE31;
}
.toppane {
width: 100%;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.leftpane {
width: 175px;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.contentpane {
width: 100%;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.rightpane {
width: 175px;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.bottompane {
width: 100%;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.MainMenu_MenuContainer {
background-color: transparent;
}
.MainMenu_MenuBar {
cursor: pointer;
cursor: hand;
height:16;
background-color: Transparent;
}
.MainMenu_MenuItem {
border-left: #63CE31 0px solid;
border-bottom: #63CE31 1px solid;
border-top: #63CE31 1px solid;
border-right: #63CE31 0px solid;
cursor: pointer;
cursor: hand;
color: White;
font-family: Tahoma, Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
font-style: normal;
background-color: Transparent;
}
.MainMenu_MenuIcon {
background-color: #63CE31;
border-left: #63CE31 1px solid;
border-bottom: #63CE31 1px solid;
border-top: #63CE31 1px solid;
cursor: pointer;
cursor: hand;
text-align: center;
width: 15;
height: 21;
}
.MainMenu_SubMenu {
background-color: #63CE31;
z-index: 1000;
cursor: pointer;
cursor: hand;
filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);
}
.MainMenu_MenuBreak {
height: 1px;
}
.MainMenu_MenuItemSel {
background-color: Yellow;
cursor: pointer;
cursor: hand;
color: black;
font-family: Tahoma, Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
font-style: normal;
}
.MainMenu_MenuArrow {
border-right: #63CE31 1px solid;
border-bottom: #63CE31 1px solid;
border-top: #63CE31 0px solid;
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
}
.MainMenu_RootMenuArrow {
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
}
.StandardButton {
background: #23A53E none;
color: #FFFFFF;
font-family:Verdana, sans-serif;
font-size: 11px;
font-weight: normal;
}
.TreeViewMenu {
width: 175px;
background-color: #63CE31;
BORDER-RIGHT: #23A53E 1px solid;
BORDER-TOP: #23A53E 1px solid;
BORDER-LEFT: #23A53E 1px solid;
BORDER-BOTTOM: #23A53E 1px solid;
moz-border-radius-bottomleft: 15px;
moz-border-radius-bottomright: 15px;
moz-border-radius-topleft: 3px;
moz-border-radius-topright: 3px
}
.TreeViewMenu_Header {
BACKGROUND-IMAGE: url(gradient_MidGreen.jpg);
}
.Head {
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
font-weight: bold;
color: Black;
overflow: auto;
}
.ArticleHead {
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
font-weight: bold;
color: Red;
overflow: auto;
}
.toplefttop {
BACKGROUND-IMAGE: url(toplefttop.gif);
background-repeat: no-repeat;
width: 75px;
height: 110px;
}
.topcenter {
BACKGROUND-IMAGE: url(topcenter.gif);
background-repeat: no-repeat;
width: 750px;
height: 110px;
}
.toprighttop {
BACKGROUND-IMAGE: url(toprighttop.gif);
background-repeat: no-repeat;
width: 75px;
height: 110px;
}
.topleft {
BACKGROUND-IMAGE: url(topleft.gif);
background-repeat: no-repeat;
width: 75px;
height: 113px;
}
.topright {
BACKGROUND-IMAGE: url(topright.gif);
background-repeat: no-repeat;
width: 75px;
height: 113px;
}
/*
================================
The two items below are what I can't get to auto repeat, I have to set a height size larger than my content to complete the box border.
================================
*/
.leftmid {
BACKGROUND-IMAGE: url(leftmid.gif);
background-repeat: repeat;
width: 75px;
}
.rightmid {
BACKGROUND-IMAGE: url(rightmid.gif);
background-repeat: repeat;
width: 75px;
}
/*
================================
End.
================================
*/
.leftbottom {
BACKGROUND-IMAGE: url(leftbottom.gif);
background-repeat: no-repeat;
width: 75px;
height: 30px;
}
.rightbottom {
BACKGROUND-IMAGE: url(rightbottom.gif);
background-repeat: no-repeat;
width: 75px;
height: 30px;
}
.bottomcenter {
BACKGROUND-IMAGE: url(bottomcenter.jpg);
background-repeat: no-repeat;
width: 900px;
height: 136px;
}
.tokens {
color: White;
font-family: Tahoma, Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
font-style: normal;
background-color: Black;
}
and here is my ascx code for the skin
<%@ 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="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" %>
<link href="skin.css" rel="stylesheet" type="text/css">
<TABLE class="pagemaster" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD valign="top" align="center">
<TABLE class="skinmaster" width="770" border="0" align="center" cellspacing="0" cellpadding="0">
<TR>
<TD id="ControlPanel" runat="server" class="contentpane" valign="top" align="center"></TD>
</TR>
<td>
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="toplefttop"></td>
<td class="topcenter"></td>
<td class="toprighttop"></td>
</tr>
<tr>
<td class="topleft"></td>
<td rowspan="3" align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<TABLE class="skingradient" cellSpacing="0" cellPadding="3" width="100%" border="0" align="center">
<TR>
<TD width="100%" vAlign="middle" align="left" nowrap class="skinheader"><dnn:MENU runat="server" CssClass="tokens" id="dnnMENU" /></TD>
<TD class="skingradient" vAlign="middle" align="right" nowrap><dnn:SEARCH runat="server" CssClass="tokens" id="dnnSEARCH" /></TD>
</TR>
</TABLE>
<TABLE cellSpacing="0" cellPadding="3" width="100%" border="0" bgcolor="#000000" align="center">
<TR>
<TD width="200" vAlign="top" align="left" nowrap><font color="#FFFFFF"><dnn:CURRENTDATE CssClass="tokens" runat="server" id="dnnCURRENTDATE" /></font></TD>
<TD width="100%" vAlign="top" align="center"></TD>
<TD width="200" vAlign="top" align="right" nowrap><font color="#FFFFFF"><dnn:USER CssClass="tokens" runat="server" id="dnnUSER" /></font></TD>
</TR>
</TABLE>
<TABLE cellspacing="3" cellpadding="3" width="100%" border="0" align="center" >
<TR>
<TD class="toppane" colspan="3" id="TopPane" runat="server" valign="top" align="center"></TD>
</TR>
<TR valign="top">
<TD class="leftpane" id="LeftPane" runat="server" valign="top" align="center"></TD>
<TD class="contentpane" id="ContentPane" runat="server" valign="top" align="center"></TD>
<TD class="rightpane" id="RightPane" runat="server" valign="top" align="center"></TD>
</TR>
<TR>
<TD class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top" align="center"></TD>
</TR>
</TABLE>
<dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" /><br><dnn:DOTNETNUKE runat="server" id="dnnDOTNETNUKE" />
</td>
</tr>
</table>
</td>
<td class="topright"></td>
</tr>
<tr>
<td class="leftmid"></td>
<td class="rightmid"></td>
</tr>
<tr>
<td class="leftbottom"></td>
<td class="rightbottom"></td>
</tr>
<tr>
<td colspan="3" class="bottomcenter"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
If I didn't explain enough I can post a pic or two of the behavior.