Products

Evoq Content Overview Content Creation Workflow Asset Management Mobile Responsive Personalization Content Analytics SEO Integrations Security Website PerformanceEvoq Engage Overview Community Management  Dashboard  Analytics  Member Profile Gamification Advocate Marketing Community Engagement  Ideas  Answers  Discussions  Groups  Wikis  Events Mobile ReadyDNN Support PackagesEvoq: CMS FeaturesEvoq OnDemandCompare DNN's CMS Products

Solutions

Content Management SystemMulti-Channel PublishingDigital MarketingOnline Community ManagementIntranet Software SolutionOur CustomersPrime

Resources

Test DrivesSchedule A DemoDocumentation CenterWebinarsWhite PapersProduct ManualsRequest PricingData SheetsCase StudiesEvoq Preferred Products Content Management Ecommerce Forms Identity Management and Authentication Site Management Social Themes

Partners

DNN Partners Partner Directory Become a DNN Partner Partner Program Overview  Hosting  Implementation  ISV  Training  Competencies

Community

Participate Ask a Question Forums Community Showcase DNN MVP  Program Overview  Lifetime MVPs  Honorary MVPs Subscribe to DNN Digest Advisory Groups  Awareness Advisory Group  Developer Advisory Group  Partner Advisory Group  Technology Advisory GroupLearn Documentation Wiki Community Blog Video Library Project History Development RoadmapDownload DNN Store Language Packs Manuals Nightly BuildsSecurity Policies Security Center

Blog

About

News Press Releases News Coverage Press KitCareersContact DNN

QA

Ideas Test

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, ...Challenging problem for a DNN/CSS guruChallenging problem for a DNN/CSS guru
Previous
 
Next
New Post
1/19/2006 8:05 PM
 
Brett Moffitt

www.isufarmhouse.org
Joined: 3/18/2005
Posts: 6

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>&nbsp;[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]&nbsp;[ACTIONBUTTON:3]&nbsp;[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
 
New Post
1/23/2006 2:40 PM
 
Salar Golestanian


www.salaro.com
Joined: 12/27/2002
Posts: 1192

It looks you have override your ContentPane with < div id="transbox" > and it reduces opacity that includes everything else  within the div. Now if you also wrap another < div id=text > around the content pane and this time ensure that the text in it which is .Normal has opacity override of opacity=100, then you will have the text showing correctly. I normally spend time playing with this stuff until I get it to work as I am not sure we are in the bound of exact science here.

I am in general not in favour of such complex structure as there are many browsers that will never behave how you want them too.

Salar

SalarO
 
New Post
1/24/2006 5:59 AM
 
Lee Sykes


Lee Sykes's Avatar

www.dnncreative.com
Joined: 9/26/2005
Posts: 317
Hi Brett,

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 - DNN Creative Magazine - 600+ Video Tutorials, Articles, Interviews - July Issue 58 out now!
DNN Creative Magazine for DotNetNuke

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile
 
New Post
1/24/2006 3:18 PM
 
Brett Moffitt

www.isufarmhouse.org
Joined: 3/18/2005
Posts: 6
Maybe the simpler solution would be to create a background image of a certain color, set it partially transparent, and tile the image in the row 2 class.  But, who wants to do things the simple way!
 
New Post
1/24/2006 3:32 PM
 
Lee Sykes


Lee Sykes's Avatar

www.dnncreative.com
Joined: 9/26/2005
Posts: 317
he he yeah - why simple?! - It was a good exercise for working with those css classes. - I did try that method but couldn't get it to work correctly. - If you can get the image to work this would be a much better method and more compatible with a variety of browsers. Let us know how you get on.
Lee Sykes - DNN Creative Magazine - 600+ Video Tutorials, Articles, Interviews - July Issue 58 out now!
DNN Creative Magazine for DotNetNuke

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile
 
 Page 1 of 1
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Challenging problem for a DNN/CSS guruChallenging problem for a DNN/CSS guru


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.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out