Brad Linger
Nuke Newbie
Posts:4
 |
| 05/30/2007 1:21 AM |
|
I've recently tried my hand at skinning my own DNN CSS skin. (a more daunting task than I first realized). Since I have learned about House menu and I've also tried changing my doctype with a special .xml file. Nothing has worked. I've set up my layout with specific dimensions. However, once I place text into those content panes that it continues past the border and on into the next pane. The text doesn't wrap. Here's my .ascx ------------------------------------------------------------------------------------------------ <%@ 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="SOLPARTMENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TREEVIEWMENU" Src="~/Admin/Skins/TreeViewMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SIGNIN" Src="~/Admin/Security/Signin.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="HELP" Src="~/Admin/Skins/Help.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="HOSTNAME" Src="~/Admin/Skins/HostName.ascx" %>
<%@ Register TagPrefix="dnn" TagName="DOTNETNUKE" Src="~/Admin/Skins/DotNetNuke.ascx" %>
<dnn:CURRENTDATE runat="server" id="dnnCURRENTDATE" CssClass="date" DateFormat="MMMM dd, yyyy" />
<dnn:USER runat="server" id="dnnUSER" CssClass="user" />
-
<dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="user" />
<dnn:SEARCH runat="server" id="dnnSEARCH" Submit="Search" CssClass="search" />
<!--end top-->
<dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" Separator="" CssClass="breadcrumb" RootLevel="1" />
<!--end breadcrumbcontainer-->
<!-------------------------backend content is placed in contentpane, also----------------------------> <div runat="server" id="contentpane"> <!--end contentpane--> <!--end contentpanecontainer--> <div runat="server" id="leftpane"> <!--end leftpane--> <!--end leftpanecontainer-->
<div runat="server" id="midpane"> <!--end midpane-->
<!--end midpanecontainer-->
<div runat="server" id="rightpane"> <!--end rightpane-->
<!--end rightpanecontainer-->
<div runat="server" id="bottompane"> <!--end bottompane-->
<!--end bottompanecontainer-->
<!--end content-wrapper-->
<!--end the-almighty-wrapper-->
-------------------------------------------------------------------------
here is my .css
--------------------------------------------------------------------------
/*-----------------anything that changes here must be changed in default.css-----------------------------*/
/*general structure*/
html,body{background:#333; height:100%; text-align:center;}/*text-align:center; is a fix for IE centering*/
.the-almighty-fixed-wrapper {background:#FFF; padding:0px; width:800px; margin:auto; text-align:left;}/*text-align:left; compensates for the above IE fix*/
.the-almighty-full-wrapper {background:#FFF; padding:0px; width:100%; margin:auto; text-align:left;}/*text-align:left; compensates for the above IE fix*/
.top{padding:5px 0 5px 0; background:#333; text-align:right; clear:both;}
.search{}
.date{color:#C00;}
.header{background:#fff; width:100%;}
.menu{background:#C00; width:100%;}
.breadcrumbcontainer{width:100%; text-align:center; margin:auto; float:left;}
.content-wrapper{width:100%;}
/*-------backend content is placed in the contentpane------*/
.contentpanecontainer{background:#fff; width:98.75%; margin:.625%; float:left; clear:both;}
.leftpanecontainer{background:#fff;width:18.75%; float:left; margin:0 .625% 0 .625%;}
.midpanecontainer{background:#FFF; float:left; width:60%;}
.variablepanecontainer{background:#FFF; float:left; width:80%;}
.rightpanecontainer{background:#fff; width:18.75%; float:left; margin:0 .625% 0 .625%;}
.bottompanecontainer{background:#fff;width:98.75%; float:left; margin:.625%;}
.footercontainer{padding:5px 0 5px 0; background:#CCC;text-align:center; font-size:10px; clear:both; width:100%;}
/*----------------------------------------cut from default.css----------------------------------*/
/*------------menu-----------------*/
/*container for ALL mainmenu buttons*/
.MainMenu_MenuContainer{background:transparent;width:1px;}
.MainMenu_MenuContainer td{cursor:default;font-size:3px;width:1px;}
.MainMenu_MenuIcon{display:none;}
/*CREATED mainmenu buttons (not home) idle*/
.rootmenuitem{background:transparent;}
/*mainmenu dropdown arrow*/
.MainMenu_RootMenuArrow{display:none;}
/*I don't know what this is*/
.MainMenu_MenuBreak{display:none;}
/*mainmenu items---idle*/
.rootmenuitem td{padding:0 10px 0 9px;height:40px;width:auto;cursor:pointer;cursor:hand;border-right:1px #A00 solid;}
/*mainmenu items text color and such---idle*/
.rootmenuitem td span{font-family:Verdana, Arial, Helvetica, sans-serif;color:#FFF;font-size:12px;font-weight:bold;}
/*mainmenu---hover*/
.rootmenuitemselected{background:#F00;}
.rootmenuitemselected td{padding:0 10px 0 9px;height:40px;cursor:pointer;cursor:hand;border-right:1px #A00 solid;}
/*mainmenu text---hover*/
.rootmenuitemselected td span{font-family:Verdana, Arial, Helvetica, sans-serif;color:#FF0;font-size:12px;font-weight:bold;}
/*mainmenu item---active*/
.rootmenuitembreadcrumb{background:transparent;}/*transparent means disabled*/
.rootmenuitembreadcrumb td{padding:0 10px 0 9px;height:40px;cursor:pointer;cursor:hand;border-right:1px #A00 solid;}
/*mainmenu text--active*/
.rootmenuitembreadcrumb td span{font-family:Verdana, Arial, Helvetica, sans-serif;color:#FF0;font-size:12px;font-weight:bold;}
/*submenu---idle 1 of 2 (can manipulate mainmenu container)*/
.MainMenu_MenuItem{font-family:Verdana, Arial, Helvetica, sans-serif;color:#FFF;font-size:12px;font-weight:normal;padding:2px 5px 2px 5px;border:1px #C00 solid;border-width:1px 0;}
/*submenu---idle 2 of 2 (use this for background color)*/
.submenu{z-index:1000;border:0;padding:0;background:#C00;}
/*submenu---hover*/
.submenuitemselected{font-family:Verdana, Arial, Helvetica, sans-serif;color:#FF0;font-size:12px;font-weight:normal;padding:2px 5px 2px 5px;background:#F00;border:1px #C00 solid;border-width:1px 0;}
/*submenu item---active*/
.submenuitembreadcrumb{font-family:Verdana, Arial, Helvetica, sans-serif;color:#FF0;font-size:12px;font-weight:normal;padding:2px 0px 2px 0px;border:1px #C00 solid;border-width:1px 0;}
/*(This be a slot for images on the right of submenu)
.MainMenu_MenuArrow{font-size:11px;padding:2px 0 2px 10px;height:24px;border:black solid;border-width:1px;}
*/
/*------------general formatting---------------*/
/*text*/
.normal,div,span,p,td,th,li,a{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333;}
/* style for module titles */
.head{font-family:Verdana, Arial, Helvetica, sans-serif;color:#333; font-size:16px;font-weight:bold;}
/* style of item titles on edit and admin pages */
.subhead{font-family:Verdana, Arial, Helvetica, sans-serif;color:#333;}
/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {font-family: Tahoma, Arial, Helvetica; font-size: 11px; font-weight: bold; color: black;}
/*links & buttons*/
a:link{color:#C00;text-decoration:underline;}
a:visited{color:#C00;text-decoration:underline;}
a:hover{color:#fff;text-decoration:none;}
a:active{color:#C00;text-decoration:none;}
/*links and buttons for register and login*/
a.user:link{color:#C00;text-decoration:underline;}
a.user:visited{color:#C00;text-decoration:underline;}
a.user:hover{color:#fff;text-decoration:none;}
a.user:active{color:#C00;text-decoration:none;}
/* text style used for most text rendered by modules */
.Normal,.NormalDisabled
{
font-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: normal;
}
/* button style for standard HTML buttons */
.StandardButton
{
padding-right: 5px;
padding-left: 5px;
font-weight: normal;
font-size: 11px;
background: #dddddd;
color: #000000;
font-family: Verdana, sans-serif;
}
H1 {
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
font-weight: normal;
color: #666644;
}
H2 {
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
font-weight: normal;
color: #666644;
}
H3 {
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
font-weight: normal;
color: #003366;
}
H4 {
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
font-weight: normal;
color: #003366;
}
H5, DT {
font-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: bold;
color: #003366;
}
H6 {
font-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: bold;
color: #003366;
}
TFOOT, THEAD {
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
color: #003366;
}
TH {
vertical-align: baseline;
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
font-weight: bold;
color: #003366;
}
SMALL {
font-size: 8px;
}
BIG {
font-size: 14px;
}
BLOCKQUOTE, PRE {
font-family: Lucida Console, monospace;
}
UL LI {
list-style-type: square ;
}
UL LI LI {
list-style-type: disc;
}
UL LI LI LI {
list-style-type: circle;
}
OL LI {
list-style-type: decimal;
}
OL OL LI {
list-style-type: lower-alpha;
}
OL OL OL LI {
list-style-type: lower-roman;
}
OL UL LI {
list-style-type: disc;
}
HR {
color: dimgrey;
height:1pt;
text-align:left
}
/* Module Title Menu */
.ModuleTitle_MenuContainer {
border-bottom: blue 0px solid;
border-left: blue 0px solid;
border-top: blue 0px solid;
border-right: blue 0px solid;
}
.ModuleTitle_MenuBar {
cursor: pointer;
cursor: hand;
height:16;
background-color: Transparent;
}
.ModuleTitle_MenuItem {
cursor: pointer;
cursor: hand;
color: black;
font-family: Tahoma, Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
font-style: normal;
border-left: white 0px solid;
border-bottom: white 1px solid;
border-top: white 1px solid;
border-right: white 0px solid;
background-color: Transparent;
}
.ModuleTitle_MenuIcon {
cursor: pointer;
cursor: hand;
background-color: #EEEEEE;
border-left: #EEEEEE 1px solid;
border-bottom: #EEEEEE 1px solid;
border-top: #EEEEEE 1px solid;
text-align: center;
width: 15;
height: 21;
}
.ModuleTitle_SubMenu {
z-index: 1000;
cursor: pointer;
cursor: hand;
background-color: #FFFFFF;
filter:progid XImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);
border-bottom: #FFFFFF 0px solid;
border-left: #FFFFFF 0px solid;
border-top: #FFFFFF 0px solid;
border-right: #FFFFFF 0px solid;
}
.ModuleTitle_MenuBreak {
border-bottom: #EEEEEE 1px solid;
border-left: #EEEEEE 0px solid;
border-top: #EEEEEE 1px solid;
border-right: #EEEEEE 0px solid;
background-color: #EEEEEE;
height: 1px;
}
.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;
}
.ModuleTitle_MenuArrow {
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
border-right: #FFFFFF 1px solid;
border-bottom: #FFFFFF 1px solid;
border-top: #FFFFFF 0px solid;
}
.ModuleTitle_RootMenuArrow {
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
}
-------------------------------------------------------------------------------
Any help I could get would be greatly appreciated!!
Thanks
|
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master VI
Posts:4945
|
|
Brad Linger
Nuke Newbie
Posts:4
|
| 05/30/2007 9:34 AM |
|
http://www.id2o.com/It seems as though this is just a win firefox and win ie problem. It is displaying properly in mac firefox. Thanks |
|
|
|
|
Brad Linger
Nuke Newbie
Posts:4
|
| 05/30/2007 9:39 AM |
|
I've just discovered that if you type several lines of text or copy paste some lorem ipsum then it displays correctly. However, if you just hold down a key to repeat it overextends. Very interesting. I guess my problem is solved. |
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master VI
Posts:4945
|
|
Brad Linger
Nuke Newbie
Posts:4
|
| 05/30/2007 11:39 AM |
|
Thanks so much. I'll be sure you drop you the link when I'm done. |
|
|
|
|
daveg955
Nuke Master
Posts:131
|
| 06/05/2007 12:41 AM |
|
I discovered similar although slightly different quirk with the CSS containers causing an overlap.
I made a pure CSS skins and uploaded it into my development server. Everything was fine except for one container in the left pane that I had repeating on all pages. Whatever was in a container in the content pane was overlapping it.
The problem was with the container in the left pane. The original container (before replacing it with my CSS container) was using the standard DNN Blue Image with color background. I had used a table within the container as an experiment to vertically align some images.
When I set my CSS container as the default for the site, the table data in the left-pane container got corrupted. This was not evident in edit view mode only preview mode.
Once I removed the courrpted table data, the overlap stopped. |
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master VI
Posts:4945
|
| 06/05/2007 3:45 AM |
|
One thing to check when you get strange layout options is that all html tags are closed correctly. A table based skin will be more forgiving if there are errors in the HTML code, whereas a CSS based skin will have display problems.
I go to view the page source and copy and paste the entire code into an editor such as visual web developer. I then use the editor to automatically check for errors which quickly highlights any problems with the HTML code.
Thanks,
|
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/DNNCreative
 |
|
|
daveg955
Nuke Master
Posts:131
|
| 06/12/2007 12:52 AM |
|
It never ends... [laugh] I've run into something else.
Please go to www.malamanamele.org in IE7 first. It's simple, single-page site.
Now look at it in Firefox.
I see two anamoiles with the CSS containers in Firefox and I'm wondering if you see the same thing.
One: You can scroll down the page much further than there is content, i.e. well past the copyright, terms, privacy.
Two: The containers in the top of their respective panes cover the containers below them and extend all the way to the bottom.
I use Visual Web Developer exclusively to make the CSS containers as per your tutorials. They seem to work fine in IE7 and Opera. God knows what they're doing in Safari [laugh]
I'll go back and check for improperly formed or closed HTML tags but any pointers/suggestions at this point would be - as always -greatly appreciated.
Thanks. |
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master VI
Posts:4945
|
| 06/12/2007 2:25 AM |
|
I copied and pasted the code into visual web developer to view the errors:
It showed line 64:
< link href="/Main/Portals/0/Containers/Normal Title/container.css" rel="stylesheet" type="text/css" / >
have you placed links to the stylesheets in your container html files? - you need to remove them.
If you find firefox is displaying errors - this is usually the correct view - IE tends to fudge the view together even if there are errors in your code - ie. it's good at displaying what it should look like even with errors in the code - so I tend to trust the Firefox view over IE
|
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/DNNCreative
|
|
|
daveg955
Nuke Master
Posts:131
|
| 06/12/2007 4:19 AM |
|
This is driving me nuts.
You were right... there were links to the CSS file as you stated above. I took them out. Before I uploaded them, I removed my old containers through the Host account/Skins page... I even checked the server through my FTP client to make sure they were gone.
I put the site back to good ol' DNN Blue skin and containers.
I uploaded one set of containers. Before I go any further, shouldn't it say something like "Installation successful" after uploading a container? I'm getting a little punchy since it's so late here and I've been at it all day [laugh]. |
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master VI
Posts:4945
|
|
daveg955
Nuke Master
Posts:131
|
|
Lee Sykes
DNN Creative Staff
Nuke Master VI
Posts:4945
|
|
daveg955
Nuke Master
Posts:131
|
|