rdo2006
Nuke Active Member
Posts:28
 |
| 03 Apr 2008 5:25 PM |
|
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! |
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 03 Apr 2008 5:27 PM |
|
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! |
|
|
|
|
jncraig
DNN Creative Staff
Nuke Master II
Posts:2517
|
| 03 Apr 2008 8:05 PM |
|
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
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.
|
|
Joe Craig
DNN Creative Support
Subscribe to the website |
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 24 Jun 2008 2:43 PM |
|
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.
|
|
|
|
|
jncraig
DNN Creative Staff
Nuke Master II
Posts:2517
|
| 24 Jun 2008 6:45 PM |
|
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.
|
|
Joe Craig
DNN Creative Support
Subscribe to the website |
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3426
|
| 25 Jun 2008 5:38 AM |
|
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,
|
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/leesykes
 |
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 24 Aug 2008 9:36 AM |
|
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.
|
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3426
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 02 Sep 2008 3:24 PM |
|
| 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? |
|
|
|
|
jncraig
DNN Creative Staff
Nuke Master II
Posts:2517
|
| 02 Sep 2008 7:45 PM |
|
| 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! |
|
Joe Craig
DNN Creative Support
Subscribe to the website |
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 03 Sep 2008 11:50 AM |
|
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.
|
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 03 Sep 2008 2:53 PM |
|
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;
}
|
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 03 Sep 2008 2:57 PM |
|
here is the .htm content:
|
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3426
|
| 04 Sep 2008 4:05 AM |
|
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 Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/leesykes
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 09 Sep 2008 2:26 PM |
|
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. |
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 09 Sep 2008 3:22 PM |
|
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 -- > |
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 09 Sep 2008 6:57 PM |
|
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. |
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 10 Sep 2008 8:19 AM |
|
| 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? |
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 14 Sep 2008 2:15 PM |
|
| 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. |
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3426
|
| 24 Sep 2008 2:06 AM |
|
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,
|
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/leesykes
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 25 Sep 2008 3:01 PM |
|
thanks for the help Lee.
I'm making progress, but I've run to a problem. I'm trying to change my font - you can see my site here - but I cannot change the menu font for ie7! It works fine in FF. I've tried several different things but no results. Also the positioning for the top margin gets skewed in ie7 as well as the line-height style. Do you haev any ideas as to why this is? |
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 25 Sep 2008 3:30 PM |
|
| Also - I tried to set up the house menu as a possible fix for this, but it does NOT work in this skin set up. |
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3426
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 26 Sep 2008 12:24 PM |
|
Thanks Lee - I'll go back through and see if I missed something. Unfortunately it doesn't appear in FF, so I can't use the web toolbar.
I looked at the snapsis menu, however, it's not free and free right now is very important. When I tried to use the house menu it dropped all the links to the bottom of the page and they were vertical instead of horizontal (despite what the XML said). Not sure even where to begin with that. |
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 26 Sep 2008 2:41 PM |
|
| btw - do you know of a free image/media module that's good? I need to get one integrated for my portfolio, but I've thus far not seen one. |
|
|
|
|
rdo2006
Nuke Active Member
Posts:28
|
| 26 Sep 2008 5:46 PM |
|
| I've figured out that the at least part of the problem is how "em" units are handled between the browswers for the spacing problem. I've finally got it all returned to the way I had it originally but it doesn't quite look right in FF (large space below menu bar and top of the content panes). I have no idea what the problem was with the fonts - I just decided that it wasn't that big of a deal and changed them back. |
|
|
|
|
leesykes
DNN Creative Staff
Nuke Master III
Posts:3426
|
|