Products

Solutions

Resources

Partners

Community

Blog

About

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, ...Is there a way to make containers semi transparent/transparent?Is there a way to make containers semi transparent/transparent?
Previous
 
Next
New Post
5/10/2007 7:36 PM
 

Well if you access to the site, you can see that I almost have the Title transparent fully fixed. Its funny because whats left has something to do with this code. if i delete the background-position line whats left of the blue header goes all the way to the left, there must be a code that i can put to remove the rest of this header. I have added the container CSS file maybe there is something that you see that I dont to achieve this.

.containermaster_blue{
    background-color: transparent;
background-repeat: no-repeat;
background-position: top center;
}

 

/*
================================
Skin styles for DotNetNuke
================================
*/  

.pagemaster {
 width: 100%;
 height: 100%; 
 background-color: transparent;

}
.skinmaster {
 height: 100%;
 background-color: transparent;
 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;
}
.skinheader_blue{
   background-color: transparent;

}

.containermaster_blue{
    background-color: transparent;
background-repeat: no-repeat;
background-position: top center;
}

.skingradient {
 background-image: url(background.gif');
 height: 30px;

}
.controlpanel {
  background-color: transparent;
}
.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;
}
.main_dnnmenu_container {
 background-color: transparent;
}
.main_dnnmenu_bar {
 cursor: pointer;
 cursor: hand;
 height:16px;
 background-color: Transparent;
}
.main_dnnmenu_item td { /*TD if menu option for using tables is on*/
 cursor: pointer;
 cursor: hand;
 color: #000000;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 background-color: Transparent;
 font-family: Tahoma, Arial, Helvetica;
        white-space: nowrap;  /*Word wrapping menu item now optional*/
        padding: 1px 3px 3px 1px; 
}

.main_dnnmenu_rootitem  { /*TD if menu option for using tables is on*/
 cursor: pointer;
 cursor: hand;
 color: #000000;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 background-color: Transparent;
 font-family: Tahoma, Arial, Helvetica;
    white-space: nowrap;  /*Word wrapping menu item now optional*/    
    padding: 0px 12px 0px 5px;   /*explicitly set padding for root menu items*/
}

.main_dnnmenu_itemhover { 
 background-color: #8da4d3;
}

.main_dnnmenu_itemhover td { 
 background-color: #8da4d3;
}


.main_dnnmenu_icon {
 cursor: pointer;
 cursor: hand;
 text-align: center;
 width: 15px;
 height: 100%;
}
.main_dnnmenu_submenu {
 background-color: #cad5ea; 
 z-index: 1000;
 cursor: pointer;
 cursor: hand;
 filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
 padding: 1px 1px 1px 1px;   /*explicitly set padding for sub-menus */
}
.main_dnnmenu_break {
 height: 1px;
 font-size: 1px;
}

.main_dnnmenu_arrow {
 border-right: #cad5ea 1px solid;
 border-bottom: #cad5ea 1px solid;
 border-top: #cad5ea 0px solid;
 font-family: webdings;
 font-size: 10pt;
 cursor: pointer;
 cursor: hand;
}
.main_dnnmenu_rootmenuarrow {
 font-family: webdings;
 font-size: 10pt;
 cursor: pointer;
 cursor: hand;
}
.StandardButton {
  background: #7994cb none;
  color: #ffffff;
  font-family: verdana, sans-serif;
  font-size: 11px;
  font-weight: normal;
}
.TreeViewMenu {
 width: 175px;
 background-color: #dfe5f2;
 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;
}
.TreeViewMenu_Header {
 background-image: url(gradient_LtBlue.jpg);
}
.Head {
   font-family: Tahoma, Arial, Helvetica;
   font-size:  18px;
   font-weight: normal;
   color: #333333;

/*
================================
 Container Styles for DotNetNuke
================================
*/  

.containermaster_blue {
 width: 100%;
 background-color: transparent;
 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;
}
.containerrow1_blue {
 background-image: url(gradient_LtBlue.jpg);
}
.containerrow2_blue {
 background-color: transparent;
}
.ModuleTitle_MenuItem {
 border: white 0px solid; /*override borders*/   
}

.ModuleTitle_MenuItem TD {  /*TD if menu is using tables*/
 cursor: pointer;
 cursor: hand;
 color: black;
 font-family: Tahoma, Arial, Helvetica;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 height: 21px;
        white-space: nowrap;  /*Word wrapping menu item now optional*/
        padding: 1px 3px 3px 1px; 
}


.ModuleTitle_MenuIcon {
 cursor: pointer;
 cursor: hand;
 background-color: #EEEEEE;
 width: 15px;
 height: 100%;   /*override the default height for icon so that menubreaks can have heights adjusted*/
}

.ModuleTitle_SubMenu
{
 z-index: 1000;
 cursor: pointer;
 cursor: hand;
 background-color: #FFFFFF;
 filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);
 padding: 1px 1px 1px 1px;   /*explicitly set padding for sub-menus */
}

.ModuleTitle_MenuBreak  {
 background-color: #EEEEEE;
 font-size: 1px; /*make sure you take out portal.css ModuleTitle_MenuBreak for this to work*/
}

.ModuleTitle_MenuItemSel {

 cursor: pointer;
 cursor: hand;
 color: black;
 font-family: Tahoma, Arial, Helvetica;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 background-color: #C1D2EE;
}

 
New Post
5/11/2007 3:41 AM
 

Remove this:

.containerrow1_blue {
background-image:url(gradient_LtBlue.jpg);

}

And if you don't define a background-image you also don't have to define the background-position...

and I think you added the page background in DNN?, then you can set the rest of the option there too...

 
New Post
5/11/2007 7:18 AM
 

I have transparent containers all throughout one of my sites.  Using the opacity filter in css works, but then you have to mark certain areas position:relative so that the text is not.  see example   www.teammfc.com/default.aspx?tabid=36

The Container css is:  Notice the Background transparent, but I set relative positions for the Title and Contentpane to ensure the text was not.  I use this trick in a lot of sites.  This only works in IE, but there is additional opacity css styles you can use for FF.  Hope this helps, as I struggled for a few days to figure this out myself.

/*
================================
 Container Styles for DotNetNuke
================================
*/  

.containermaster_blue {
 width: 100%;
 
 background-color: #dfe5f2;
 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;
 filter: alpha (opacity=85); 
}
.containerrow1_blue
{
    background-color: #FFFFFF;
    background-image: url('fat-header-bg.jpg');
    font-size: 10pt;
    position: relative;

}
.containerrow2_blue {
 background-color: #f7f8c6;
 position: relative;
 

}
.contenpane {
    background-color: transparent;
    padding-left: 10px;
 padding-right: 10px;
 position: relative;
 height: 450px;
 valign: top;
}

 
New Post
5/11/2007 10:39 AM
 

TIMO you are awesome thanks for your help!!!!!!... One last thing, my background still isnt working correctly. I want the background to be fixed one big image, and I want the Skin and the containers to "hover" over the image when you scroll up and down, only thing that moves up and down is everything else except the background image. I added the Code that you gave me, let me know if its where its supposed to be.

*
================================
Skin styles for DotNetNuke
================================
*/  

.pagemaster {
 width: 100%;
 height: 100%; 
 background-color: transparent;

}
.skinmaster {
 height: 100%;
 background-color: transparent;
 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;
}
.skinheader_blue{
   background-color: transparent;

}

.containermaster_blue{
    background-color: transparent;
background-repeat: no-repeat;
background-position: top center;
}

.skingradient {
 background-image: url(background.gif');
 height: 30px;
background-repeat:no-repeat;
background-position:top center;
}
.controlpanel {
  background-color: transparent;
}
.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;

 
New Post
5/11/2007 11:26 AM
 

You should use this:

#body
{
background-image: url(mybackground.jpg);
background-repeat: no-repeat;
background-attachment: fixed
}

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Is there a way to make containers semi transparent/transparent?Is there a way to make containers semi transparent/transparent?


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