I've been setting up for first ever installation of DNN and after absorbing information from various sources, I've figured out most everything I've needed to know. I've installed DNN 4.x and created my own skin and containers. I'm having a few problems with my container, though. I've created a container that has a translucent (CSS: opaque) background. The background behind that has a watermark type of image on the page. The transparency allows this image to show through the tinted background. It looks pretty neat except for a few problems:
1. The visibility option doesn't work as it should. Whenever I minimize and maximize a module, upon maximization, the original content of the module disappears until I refresh the page. This isn't a huge problem because I can take away the button to minimize, except that the discussion module seems to minimize itself by default and whenever I maximize it, I can't see the discussion thread. I've selected that particular module to maximize by default but it seems to make no difference (this happens in IE and Firefox).
2. Alignment is goofy in Firefox when viewed with the rest of the page. I'm not familiar with CSS for Firefox.
3. Also in Firefox, when I view the page, the modules with the 50% transparent background also make the text on top of that transparent, so it's hard to read.
I discovered the Firefox problems when viewing on a friend's computer, and was disappointed after spending so much time to get what I thought was finally a perfectly functioning skin.
Here's the HTML code for the module:
|
<link href="container.css" rel="stylesheet" type="text/css">
<TABLE class="containermaster_FH" cellSpacing="0" cellPadding="0" align="center" border="0">
<TR>
<TD class="containerrow1_FH">
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD valign="middle" nowrap>[ACTIONS]</TD>
<TD valign="middle" nowrap>[ICON]</TD>
<TD valign="middle" width="100%" nowrap> [TITLE]</TD>
<TD valign="middle" nowrap>[VISIBILITY][ACTIONBUTTON:5]</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD align="center" class="containerrow2_FH"><!--contentpane-->
<div id="bg">
<div id="transbox">
<div>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" id="ContentPane" runat="server" align="left" valign="middle"></td>
<TR>
<TD align="left" valign="middle" nowrap>[ACTIONBUTTON:1]</TD>
<TD align="right" valign="middle" nowrap>[ACTIONBUTTON:2] [ACTIONBUTTON:3] [ACTIONBUTTON:4]</TD>
</TR>
</TABLE></div>
</div>
</div>
</TD>
</TR>
</TABLE>
<BR/>
|
Here's the CSS code (kind of messy, sorry):
|
/*
================================
Container Styles for DotNetNuke
================================
*/
.containermaster_FH {
width: 100%;
background-color: transparent;
z-index: 0;
}
.containerrow1_FH {
background-color:FFFF66;
border-right: #339933 0px solid;
border-top: #339933 0px solid;
border-left: #339933 0px solid;
border-bottom: #339933 2px solid;
/* moz-border-radius-bottomleft: 15px;
moz-border-radius-bottomright: 15px;
moz-border-radius-topleft: 3px;
moz-border-radius-topright: 3px; */
}
.containerrow2_FH {
/*background-color: #006600;*/
background-color: #transparent;
/*filter:alpha(opacity=40);*/
z-index:1
width: 100%;
height: 100%;
}
.containerrow2_FH_verB {
/*background-color: #006600;*/
background-color: transparent;
/*filter:alpha(opacity=40);*/
z-index:1;
width: 100%;
height: 100%;
padding: 6px;
}
/* This is the background image */
#bg {
width: 100%;
height: 100%;
background: transparent;
border: 0px solid black;
border-style: none;
}
/* This is the transparent box */
#transbox {
width: 100%;
margin: 0 0px;
padding: 5px;
background-color: #006600;
border: 0px solid black;
border-style: none;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
/* This is the container which set text to solid color.
position: relative used for IE */
#transbox div {
padding: 0px;
font-weight: bold;
color: #000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
position: relative;
border-style: none;
}
-->
|
The "verB" version of the containerrow2 style is for the version of the above HTML which doesn't have the extra divisions needed to create the transparent effect.
Thanks in advance for taking a look at this issue. If you want to see the website that is using this skin, go to dnn.isufarmhouse.org. You'll see the problems I'm talking about.
-Brett |