Challenging problem for a DNN/CSS guru - DNN Creative Magazine for DotNetNuke - DotNetNuke Forum, DNN Creative Magazine, Video Tutorials, Skins, Module Reviews - DotNetNuke®

Forums > DotNetNuke® > DotNetNuke® Questions

Challenging problem for a DNN/CSS guru

Last Post 01/24/2006 5:02 AM by Lee Sykes. 2 Replies.

Author

Messages

Brett Moffitt

Nuke Newbie
Posts:1

01/20/2006 11:47 AM

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:

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

Lee Sykes
DNN Creative Staff

Nuke Master VI
Posts:4945

01/22/2006 5:22 AM
Hi Brett, Nice design - It maybe a container problem. Could you email me your complete skin and container files packaged up in a zip and I will have a look around. - I will be out for the rest of today, but will get back to you on Monday if you haven't found a solution. lee at dnncreative.com Thanks,

Lee Sykes Site Administrator Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts Twitter: www.twitter.com/DNNCreative

Lee Sykes
DNN Creative Staff

Nuke Master VI
Posts:4945

01/24/2006 5:02 AM
Hi Brett, He Hey - I've managed to solve the problem! - Thanks for emailing me the skin & container - Certainly took a bit of thought! - I've emailed you the full zips of the skin and container. First I formatted the html to ensure the html was fully validated ie. to ensure all text is in lowercase and all tags are well formed. I then removed the div tags that you placed around the content area From this I then edited the containerrow2_FH class and added the opacity details into that class. the only elements you need are the filter: and the -moz-opacity: you don't need to add opacity: There was the odd error in the css file with missing ";" so I fixed that up as well So, you now find that Firefox & IE look the same. - The only problem you now have is that the text on both versions is now faded! - So I first of all tried using a background image with an opacity but this didn't work - So to solve this I changed the level of the opacity to 0.8 and 80 and used a lighter background colour of: #7FB27F; (This was the original colour at 0.5 opacity) This gives a balance between the text and background colour with both values having an opacity. - Of course the background colour is slightly lighter, so you may wish to experiment between the opacity and the background colour, but the current setting is now readable. I tested this in Firefox, IE6, IE5.5 - all work fine - IE5 doesn't have the opacity, but with the lighter background colour it still works well and the text is readable. One thing I would really recommend is that you download firefox & as a minimum test your skin on IE & Firefox. As a further tip - when you are testing the css, I always comment out big chunks of the css and then re-introduce small elements until I find the element that is causing the problem. So I hope this helps, oh and I recognised those comments in the css! - it was nice to see that you've put the skinning video tutorials to good use! Cheers, Lee

Lee Sykes Site Administrator Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts Twitter: www.twitter.com/DNNCreative

Forums > DotNetNuke® > DotNetNuke® Questions