rdo2006
Nuker
Posts:11
 |
| 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
Nuker
Posts:11
|
| 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
Nuke Master II
Posts:2024
|
| 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
Nuker
Posts:11
|
| 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
Nuke Master II
Posts:2024
|
| 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
Nuke Master II
Posts:2987
|
| 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 |
|
|
rdo2006
Nuker
Posts:11
|
| 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
Nuke Master II
Posts:2987
|
|
rdo2006
Nuker
Posts:11
|
| 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
Nuke Master II
Posts:2024
|
| 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
Nuker
Posts:11
|
| 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
Nuker
Posts:11
|
| 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
Nuker
Posts:11
|
| 03 Sep 2008 2:57 PM |
|
here is the .htm content:
|
|
|
|
|
leesykes
Nuke Master II
Posts:2987
|
| 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 |
|
|