Lessons on making your own Skin & containers > Forums > DotNetNuke Skins and Resources by ThinkofDesign

Forums

Unanswered Active Topics

Forums Search

Forums > DotNetNuke > Skinning in general

Lessons on making your own Skin & containers

pumpkin

New Member
Posts: 6

Posted: 12/09/2005 01:47 PM
Last Edit:

Do you have beginner lessons on making skins and containers. I have visited polyduck.com and several other sites to learn how to make skins but I need a super basic lesson. A basic lesson that might include folder names and where to place the htm and css documents as well as the images (within the folders) then what to zip so that it can be uploaded. I understand how to upload, kind of, but I'm a little confused regarding the host and site button (under site settings) because if I want to see my newly installed skin my only choice is to select the site button to view my skin (if I select the host button I can only select the default DNN skins and containers). Also, please note that I am using dreamweaver and too my site is hosted so I do not have a server/database.

If you could help that would be splendid! Thank you much!

Vasilis

Yellow Member
Posts: 315

Posted: 12/09/2005 02:34 PM
Last Edit:

Hi pumpkin,

I will have a super simple tut for skinning very soon, thanks for asking!

Till then... you can find a lot of useful information for skinning in the default skinning document, have you tried that?

With DNN you can have multiple portals running with one installation, that's why there is a host and a portal level. Skins which are installed at host level can be used by all portals... where skins that you install - upload as admin within a portal can be used only for that portal.

Regarding the folders, the skins you install at host level can be found at your \Portals\_default\Skins\ directory. The skins you install at admin level can be found at your \Portals\0\Skins\ directory if you have only one portal running. For more you have to know the portal's id. It's \Portals\PortalID\Skins\

You can use one or more folders to organize your skin files as long as you use the correct paths in your HTML and CSS code. The main folder's name where you put your files is also the skin's name. All your files must be in there.

Don't hesitate to ask more questions, this way I can understand better what is important for a good but simple skinning tutorial.

Did you manage to run my DW extension?

pumpkin

New Member
Posts: 6

Posted: 12/12/2005 03:54 PM
Last Edit:

Hello Vasilis,

Thank you for your response. Well my site is being hosted so I don't know where to find the \Portals\_default\Skins\ directory or the \Portals\0\Skins\ directory. At my hosted site within the file manager, with in my host root I have the following files and folders:

Cache
Containers>
DNN-Blue
DNN-Gray
DNN-Green
DNN-Red
DNN-Yellow
_default
Logs
LogConfig
Skins>
DNN-Blue
DNN-Gray
DNN-Green
DNN-Red
DNN-Yellow
_default

What would be really great is if I could create the folders arrangement on my desktop (for the skins and the containers), zip them when I'm finished and then upload the zipped skins to my site. Ha ha that would be great!

When might you have the beginner skinning lesson done. I'm going from site to site kind of begging for help. Things are so much easier when you know how to do them

. This is quite the struggle but I know it's got to be easier than it seems so I am hoping you can help. Much thanks you! Happy holidays.

Vasilis

Yellow Member
Posts: 315

Posted: 12/12/2005 04:11 PM
Last Edit:

Hey,

Of course you can do it like this, having the skin's folder on your desktop, with all the skin's files in it and then zip it and upload it! But this way you have to zip and upload every time you make a change!

If you really want to learn skinning, you have to install DNN locally on your machine. This way you can make your experiments and when you are ready then you zip your files and upload them to your host.

Once again... did you manage to install and run my DW extension?

pumpkin

New Member
Posts: 6

Posted: 12/12/2005 04:55 PM
Last Edit:

Yes, I did install and am able to run the DW extensions. Where do I find the DNN to install locally. I didn't know I had to install that locally to make skins. Thanks!

Vasilis

Yellow Member
Posts: 315

Posted: 12/12/2005 05:04 PM
Last Edit:

You have to register at dotnetnuke.com and then you 'll be able to find and download the latest version at the downloads page.

Keep me posted!

Vasilis

Yellow Member
Posts: 315

Posted: 12/13/2005 04:51 AM
Last Edit:

Hey Vasilis,

I hope that we understand each other. I do not have sql server on my home computer, I have my site hosted and the host has uploaded the modules for me. Do I still need to download the DNN locally to my machine? Where should I place it and what will I be doing with it? Ha ha! You probably think I'm a ding dong but I bet I'm the average beginner.
Thanks

If you want to create just a skin and nothing more then you can do it on your hosted DNN but if you want to learn how to create skins, you have to install DNN locally!

To install DNN locally you need:
1)IIS
Installing IIS on Windows XP Pro
For XP Home: Download ASP.NET Cassini Sample Web Server

2).Net Framework
Download and install Microsoft .NET Framework Version 2.0

3)MS SQL
or the free version:
Download and install Microsoft SQL Server 2005 Express Edition

When you are ready, download DotNetNuke AND the zip with the Docs and focus on DotNetNuke Installation Guide.pdf and DotNetNuke Skinning.pdf

pumpkin

New Member
Posts: 6

Posted: 12/15/2005 04:00 PM
Last Edit:

Hello Vasilis, Thank you for your prevous suggestions but all I really needed to know was how to attach the css to the html so I could see the result.

I've now read the whitesheet for skinning and have to say it really didn't help. I've taken your suggestion and have deconstructed some of your free skins. I now have questions regarding the OrangeFuturism skin. I am confused with line 26 of the code (using dreamweaver)


<DIV class=leftbg>
<DIV class=rightbg>

I understand the first DIV class=leftbg but I don't see where the DIV class=rightbg reference comes into play? I know that on the css the class ="rightbg" calls image bg_rightpane.gif but I don't see how that image fits in regards to the portal.jpg.
Could you please clarify why there is a reference to that image.

pumpkin

New Member
Posts: 6

Posted: 12/15/2005 04:03 PM
Last Edit:

Not sure why the html didn't appear but I'll take it out of the bracets this time:
HTML

HEAD
META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"
LINK REL="stylesheet" TYPE="text/css" HREF="skin.css"
/HEAD
(all other html)
BODY
/body
/html

Vasilis

Yellow Member
Posts: 315

Posted: 12/15/2005 08:50 PM
Last Edit:

OK, let's see

Not sure why the html didn't appear but I'll take it out of the bracets this time

If you want to post code here, just wrap it with a code tag.

Hello Vasilis, Thank you for your prevous suggestions but all I really needed to know was how to attach the css to the html so I could see the result.

You don't have to do anything for the skin.css to be attached to your skin... DNN will do that when you upload the skin to your site.

I use two DIVs there, one inside the other, because I want to apply two different background styles at the same area... it's just a CSS trick.

portal.jpg has nothing to do with the skin code... it's there just because DNN takes skinfilename.jpg images as preview images so when you browse the admin > skins area, you can preview the skins.

Vasilis

Yellow Member
Posts: 315

Posted: 12/16/2005 05:30 AM
Last Edit:

Awh, what?
I think you mean portal.jpg not portal.css and I get that the portal.jpg thumbnail is for DNN used after the skin is uploaded as a image reference but isn't the portal.html suppose to look like the portal.jpg ? I just didn't know why the class="rightbg" calls image bg_rightpane.gif if the image is not viewable? you said you wanted to apply two different background styles at the same time but when can I see the bg_rightpane.gif is my question. You say it's a css trick so does that mean that since there are 2 divs within one td that only the first will appear div class="leftbg" ?

Yes and I totally get that I don't have to attach code to the html for the css to work, I get that DNN does that for us that question was referring to my initail question about skinning which was how can I view the html doc and see the effects of the css on my home computer.

Lastly, now I'm tearing into your container.htmls and css and am wondering why the container_left.html has no images reference neither on the html or the css? Again the portal.jpg shows a background for Home, Forums, Gallery, Blog buttons. Where are those images referenced? I hope I'm not bugging you I'm really starting to understand and really appreciate your time.

Thanks again!

Yes, I meant portal.jpg! I fixed that also at the original post! It shows a demo site locally on my machine.

bg_rightpane.gif will appear when there are no containers in the right pane, so it is viewable!

You can create your skin locally like a static HTML page with a reference to your skin.css. When you are done, remove the html, head, body tags and anything within your head section, zip your files and upload the skin. Of course you have to include some DNN tokens for the skin to work... At least one: [CONTENTPANE]

container_left.html has no images references because it doen't use any images... it's a very simple container!

Home, Forums, Gallery, Blog etc. are not buttons! It's the default DNN menu with just a button like background image for the root items!

logangreer User is Offline

New Member
Posts: 3

Posted: 05/02/2006 05:22 PM
Last Edit:

OK, I have downloaded your DreamWeaver extension and used it to make a somewhat functional skin. However, I am unable to get the content panes to work. The code for the panes looks like this:

< div runat="server" id="LeftPane" >
< div runat="server" id="CenterPane" >
< div runat="server" id="RightPane" >

I have the whole thing set up locally on my computer with a database and everything so I have been messing with some of the default skins and they worked fine. I decided it was time to try my own from scratch, but alas! The containers dont work! When I try to live preview it loads everything just fine except the containers. I am in Admin mode right now and all it says under the [LOGO] is:

An error has occurred.
Unhandled error loading module.

Please HELP! It's driving me nuts. Thanks for your time and skills. I am brand new at this.

Logan.

logangreer User is Offline

New Member
Posts: 3

Posted: 05/02/2006 05:28 PM
Last Edit:

ok for some reason that post got completely messed up. The last part was supposed to be first and... well its too complicated. All I know is that the containers wont work and it says:

An error has occurred.
Unhandled error loading module.

The code for the containers looks like this:

< div runat="server" id="LeftPane" >
< div runat="server" id="CenterPane" >
< div runat="server" id="RightPane" >

Help.

Vasilis

Yellow Member
Posts: 315

Posted: 05/02/2006 05:43 PM
Last Edit:

The only thing you need is a ContentPane... That's all!

Rename your CenterPane with ContentPane:

< div runat="server" id="LeftPane" >< /div >
< div runat="server" id="ContentPane" >< /div >
< div runat="server" id="RightPane" >< /div >

The next time, don't push your self that much... just ask ! :-)

Cheers,

Vasilis

ActiveForums 3.7