I'm a subscriber to the site - there is a ton of great information here!  But I think that in my case I'm not sure where to start looking. Here is my situation, please advise.

I have a DNN site already live on the web that I want to re-skin completely. It does not yet have any content, but I'm looking to get this up and running as soon as possible.  I've looked at some of the tutorials regarding skinning but I'm still not sure on how to best proceed.  I really don't want to use the house of nuke menu - I would prefer to keep things the way they are in the app and stay out of the code of the application as much as possible.  I would prefer to make the site as completely CSS-based as possible (again without having to get in to the app's code) as I'm familiar with CSS and have done several other sites that are primarily built using CSS.  Also - I would like to implement a flash file for the home page that would contain controls to navigate to different areas of the site.  I've not come across anything in the tutorials that address that (although I've not searched very hard). 

There are several sites on the "dotnetnuke.com" site that have incoporated, and styled things in ways that I would like to use as inspiration for my site.  If possible I would like to utilize flash menus and dropdowns as well.  I don't want it to get too complicated, as I want to make sure the site loads quickly, but I want to get far away from the standard look and feel of the included skins as I can! 

I'm not very familiar with asp.net or programming at all, but I do know my way around HTML, and CSS pretty well.  I would like to keep from having to pull the site down to a local installation if at all possible too (just to save time and possible complications)

Any advice on what videos I need to pay special attention to, or steps on how to best proceed would be most appreciated! 

Also - if any development can be done in dreamweaver/fireworks/photoshop that would be great to know! I'm sure there is, but I've only ever seen VWD used (and I will use that if that's the best option).

Thanks!

Let me suggest several things.

You can work with any tool that you like that will produce html, ascx, and css files.  This includes Notepad!

You don't have to get into the DotNetNuke code to build skins.

I would suggest that you spend some time with Lee's skinning tutorials to really get a feel for what is involved.  In particular look at

• How to select DOC TYPES in DotNetNuke 4.4
• How to create an XHTML Compliant DotNetNuke 4.4
• XHTML Compliant DotNetNuke 4.4 and 4.5 - part 2
• Pure CSS SEO Layouts for DotNetNuke skins
• Multiple skin layouts using skinname.css
• How to create a DotNetNuke CSS skin from an XHTML template – part 1
• How to create a DotNetNuke CSS skin from an XHTML template – part 2

But I think that you'll want to get a handle on some of the workings of DotNetNuke, too.  I'd therefore suggest that you review the list of beginner level tutorials and look at them, too.  You might need some of that to understand all of the details of the more advanced tutorials.

Also, the book Beginning DotNetNuke Skinning and Design (Programmer to Programmer) by Andrew Hay  and Shaun Walker is a pretty good book.  It also covers some more advanced techniques, too.

Okay - I've used the "Pure CSS SEO Layouts for DNN Skins" and built my basic layout.  I need to restyle the containers. 

I need to remove the button at the top right that contracts and expands the container on all of them - how do I do that?

What's confusing is that some of these videos are built on old DNN releases and I don't know if what I'm trying to do will work with the version that I'm currently working on (4.8).

Do I need to install the "house menu"?  If it's needed how do I do it for my version? Are there other tools that would be better?

I've also got a client I will be building a website for using DNN and want to make sure I have the bugs worked out of this skin issue.

The expand/contract control is called "Visibility" and can be adjusted using the Module Settings.

The older features of DotNetNuke extend right up to the present. You might miss new features in DotNetNuke, but you generally won't miss any old ones.

You only need to install the House Menu only if you want to use it. There are several add-in menus. Some are easier to use than the built-in menu. Some are more CSS friendly. My favorite choice is the Snapsis Nav Menu. If you look in the forums, you'll find (at least I hope that it's still available) a special offer.

Like Joe says, all of the tutorials will work with the latest 4.8.4 version.

For the tutorials, if they use the HouseMenu, then you will need to install the HouseMenu to follow the tutorial. For the tutorials you will need to install v1.3 of the HouseMenu skin object

If you install any of the free CSS skins, these have been created for HouseMenu v1.4.

If you wish to use the snapsis menu, then this is also possible and the changes will be minimal as the 2 menus produce unordered lists for the menu links.

Thanks,

I thought I saw a two-column layout supplement to the CSS SEO layout tutorial, but I can't find it.  Am I just seeing things, or is it out there somewhere?

Thanks - the book recommendation was great and very helpful.

Yes go to:
CSS SEO Layouts

Login, in the code downloads there is a 2pane version

okay - new problem. I've got just about everything set the way that I want it, but using the default menu, I've got a white background that I don't know how to get rid of. Is this being controlled by something other than the style sheet?

If you are looking for styling issues, I can't recommend anything better than the Web Developer's Toolbar. Just start pasting in colors where you think that they might be important and see what happens. For your case, look for styles that specify background colors. Paste in a purple color until you find the one that counts!

Thanks for the advice - I've already input a background, but everything that I do seems to get overridden by this white stripe.  I've not been able to find i thus far, and I see that it is also present in the tutorial videos as well. Not sure what to make of it.

Another problem I'm trying to fix:

I've created a single column version of this skin, however, it does not render correctly in IE7.  The main content pane is shifted left, and it does not extend the full width of the page like it does in FF. I've included the style sheet for review.

body, tr, td, table
{
    /*Set default font size for skin (titles etc will then use a percentage to specify their sizes) */
    margin:0;
    padding:0;
    line-height:1.1;
    font: small verdana, geneva, arial, helvetica, sans-serif;
    color: #666;
    background-color: #fff;
}
#wrap  
{
    min-width:600px;
    padding: 20px;
    background-image:url(images/totalbackground.jpg);
}

#logo
{
position: absolute;
top: 35px;
left: 15px;
width: 355px;
}

#loginlinks
{
position: absolute;
top: 84px;
right:10px;
text-align: right;
}

.horizontalbanner
{
    position: absolute;
    top: 11px;
    left: 400px;
    text-align: center;
    width:485px;
}

.dnn_horizontalbanner .Normal img
{
    border:0;
    margin:0;
    padding:0;
}



#menu
{
position: absolute;
top:105px;
left:50px;
width:100%;
height:32px;

}

#menu h3
{
margin:0;
font-size:80%;
position:relative;
top:0;
left: -1000px;
}

#bread
{
position: absolute;
top: 145px;
left:40px;
text-align: left;
width: 625px;
}

#search
{
position: absolute;
top:145px;
right: 10px;
}

#contentholder
{
    width:100%;
    margin-top: 12.5em; /*moves content under menu, unit is em so if a user increases text size the gap also increases */
}



#dnn_contentpane
{
padding:20px;
background-color: #FFF;
border:1px solid #ccc;
}


/*#sidebar
{
float: left;
width:24%;
}

#dnn_leftpane
{
padding: 10px;
background-color: #FFF;
border:1px solid #ccc;
}

#sidebar-2
{
float:right;
width: 22%;
}

#dnn_rightpane
{
padding: 10px;
background-color: #FFF;
border:1px solid #ccc;
}*/

#footercontent
{
    clear:both;
    padding: 10px 0 0 0;
}

#dnn_footerpane
{
padding: 10px;
background-color: #FFF;
border:1px solid #ccc;
}

/* bottom links etc in white space */

#footer
{
    padding:30px 20px 0 20px;
    color: #666;
}

here is the .htm content:

The white stripe you refer to is this the content pane?

This code sets the content pane white:

#dnn_contentpane
{
padding:20px;
background-color: #FFF;
border:1px solid #ccc;
}

For the width, you haven't metioned what code you have in your CSS for the mainbodyID

In my skin.css I have
#mainbody
{
    float: left;
    width: 76.7%;
}

Which will explain why you do not have 100% width. On DNN Creative, the 1pane skin is as follows:

< div id="wrap" >
< div id="logo" >< /div >
< div id="contentholder" >
< div id="pane1mainbody" >
        < div id="content1pane" >
            < div id="contentpane" runat="server" visible="false" >< /div >
        < /div >
< /div > < !-- end #main-body -- >
< div id="footercontent" >

etc.

and the CSS

#pane1mainbody
{
    width: 99%;
}

#content1pane
{
   width: 100%;
  background-color: #FFF;
 border: 1px solid #CCC;
}
#dnn_contentpane {
    padding: 10px;
}

Lee thanks for the reply.

No - the white stripe that I'm talking about runs right through the middle of hte main navigation menu.  In the tutorial videos it appears as it there is a white stripe that divides the Gold/Yellow background of the menu causing in effect two yellow/gold stripes - top & bottom.  I've tried everything that I can think of, but have not had any luck.

I've made the change that you mentioned and while the stretch is working the main content is shifted up above the menu. here is the code

< div id="wrap" >
< div id="logo" >[ LOGO ]< /div >
< div id="contentholder" >
< div id="pane1mainbody" >
< div id="content1pane" >
< div id="contentpane" runat="server" visible="false" >< /div >
< /div >

< /div >

< !-- end of #mainbody -- >

I've also got another design question:

I am trying to put a secondary navigation window in my right sidebar that contains all of my child pages (they fall under two different parent pages).

What is the best way to do this? I've installed the houseMenu but it doesn't seem to "hold" the settings. I've got that particular container with the housemenu set to appear on all pages. When I navigate away from the page the menu seems to disappear as if it's being reset.

I've figured out why the menu changes from page to page for my secondary window - it's only showing child pages for that particular page. How can I set it to show the same menu on each page? Should I just code it in html and include it that way? is there a better way to do this?

Lee - any advice on how to best make this entire skin fixed width? I've tried a couple different things, but because of the absolute positioning of those elements I can't quite get it to work right.

Hello,

Apologies for the delay in responding, I have been away on holiday. For the secondary navigation, if you wish to show the same child menu on all pages, using the house menu you can specify the tab ID number for the parent page:

Scope (focus or root level of the menu): -1 for entire site; 0 for children of active page; n for children of tab with id n

For fixed width, the technique I have used is to add a div tag with the ID of wrap which surrounds all of the content, and then inside the wrap ID add another div tag for the search and then absolute the search div tag from there, quick example:

< div id="wrap" >

< div id="contentarea" >
    < div id="ContentPane" runat="server" visible="false" >< /div >
    < div id="LeftPane" class="announce" runat="server" visible="false" >< /div >
< /div >


< div id="search" >[SEARCH]< /div >

< /div >

#wrap {
background:#ffffff;
margin:0 auto;
width:760px;
}

#search
{
position: absolute;
top: 12px;
right: 0;
margin: 0 15px 0 0;
}


Absolute positioning within a fixed width skin can be slightly more complicated and will need a lot more experimentation and testing than working with a fluid skin. if you are having problems, then it may be easier to just place elements such as the search box using normal positioning.

Thanks,