Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...skinning designskinning design
Previous
 
Next
New Post
12/7/2008 11:54 PM
 

I am new to DNN, I read the Skinning guide. I think I understood most of it, but the only thing I am no clear is how do actual design a skin.

I downloaded a free skin from the Internet to see how it was built. I opened the HTML file but it only shows the tokens for DNN, it does not show styling. If am designing a skin how do I see what am doing or how to assign the style.

 

Thank you,

Gus G.

 
New Post
12/8/2008 1:21 AM
 

Gus-
As simple as the concept is, skinning is a big topic.  Check this thread for a few helpful skinning links:
http://www.dotnetnuke.com/Community/Forums/tabid/795/forumid/109/postid/270571/scope/posts/Default.aspx

VIEWING CSS WHILE EDITING SKIN
Your method of creating skins can vary quite a bit depending on your personal level of knowledge of code and of the tools you use.  It sounds like you're probably using a text editor at the moment.  You'll want to check into editors that offer combination WYSIWYG / Source Code views (preferably at the same time).  Dreamweaver is a well-known example that's been around forever.  If you're tight on budget, there are a number of shareware editors that are well worth the money.  Check out HTMLPad (http://www.blumentals.net/htmlpad/) or perhaps the long-running CoffeeCup HTML editor (http://www.coffeecup.com/html-editor/).

Once you are using an editor that gives you WYSIWYG view, you'll need to add a CSS file reference in your skin's HTML file in order to see the CSS while you edit.  DotNetNuke automatically links your skin's CSS with the HTML file (ascx file, actually) if you use conventional filename/placement for your CSS. 

SKIN OBJECTS and EDITING LAYOUT
If your skin's layout relies heavily on skin objects (i.e., it simply doesn't show well without the rendered objects in place) then you may prefer to edit a "live" copy of a skin directly within DNN (edit the skin's ASCX file in order to see the final skin-objected product as you go) and then, when it's complete, work backwards towards constructing the skin's HTML source that will render your finalized ASCX.  If you decide to "edit live", I'd strongly recommend that you use a test copy of DNN if you're not already doing so.

Again -- there are a number of approaches to coding skins.  I don't know of any one approach that is deemed to be the more "correct" approach.


Good luck!
-mamlin


esmamlin atxgeek.me
 
New Post
12/8/2008 10:29 AM
 

Thanks,

I am using VS  2008 as my HTML editor. I downloaded a free skin, look at the HTML file of the skin, it does not have any reference to the CSS file.

My question is how does DNN know how to create the ASCX file and map the CSS classes if there is no reference in the original HTML file.

Thank you,

 

Gus

 
New Post
12/8/2008 12:06 PM
 

There are some CSS files that are loaded by default, like skin.css.

In the top post of the Forum you will find a link to the skinning documentation

 
New Post
12/8/2008 12:40 PM
 

Gus wrote
Thanks,  I am using VS  2008 as my HTML editor. I downloaded a free skin, look at the HTML file of the skin, it does not have any reference to the CSS file.

My question is how does DNN know how to create the ASCX file and map the CSS classes if there is no reference in the original HTML file.

Thank you, Gus

VS2008 is a perfectly fine editor (and perhpas even a bit of overkill if you're only doing skinning).  The JavaScript support in VS2008 can come in especially handy if you create JS-enhanced skins.

As far as "HTML versus ASCX", the skin creation process dictates that you define your skin and skin objects using HTML (you create a "pseudo-skin").  When you upload your HTML-based skin using the DNN skin upload interface, DNN parses the HTML and creates the final ASCX file for you.  Why?  It does this in order to better support your skin across multiple versions of DNN.

Example:  Let's say you had started making skins a couple of years ago and created a skin for DNN 4.02 that uses a certain skin object.  As of DNN 4.9 (two years later), that skin object (the object's rendered code and/or the way it is referenced by DNN in the ASCX file) may have changed quite a bit.  By creating a "pseudo-skin" in HTML and letting DNN convert this to ASCX, your skin can often work across multiple versions of DNN despite changes to the DNN skin objects.  In short, each version of DNN knows how to implement the skin for itself so you don't have to create a new version of your skin every time a new version of DNN is released.

Hope that clears things up a little-
-mamlin


esmamlin atxgeek.me
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...skinning designskinning design


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out