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, ...Photoshop to SkinPhotoshop to Skin
Previous
 
Next
New Post
5/12/2006 1:40 PM
 

Thanks for the coffee and lunch.  I understood that part.  And thanks for your response.  I'm amazed at your commitment to this forum. 

I saw Nik's response for the conversion tool and have contacted him.

But, you may have just identified the missing link for us.  I knew there was a disconnect and we couldn't figure out what is was.  But, you said the skinning specialist works between the designer and the developer.  Aha!!  We need one of us to be that.  How do we be that?  And which one of us will morph?  I vote for Allen to morph.  (heheh)

The design I want to convert to DNN is www.DataDotMotorsports.com   Still under construction as a straight HTML solution.  

And I also need to skin www.CharlotteTennisClub.com because it's live and it looks awful.  The club owner loves access to the very dynamic content though.  I'm embarrassed to put it on my portfolio the way it is and I hate it when she tells people at the club that I built her site.  (yikes)

*sigh*  Got to figure this out. 

Back in touch when I've deciphered your last reply and read the things you suggest.

Thanks - Cathy

 

 

 
New Post
5/12/2006 2:45 PM
 

Charlotte TC looks OK. I agree that it is simple but simple is beatiful. The CSS needs a bit of tweaking and also some rules for creating content. DataDMS.com design can be implemented as well; it is, to use Nina's word, a "straightforward" design.

I think that there's no need for a thir person being the skinning specialist and you would be much closer to being one. Actually no coding knowledge is needed. You need to learn XML as Nina did, but just the basics of it. And believe me, you can learn that in a single day! CSS is a more challenging effort. You are lucky though, there are plenty of CSS resources.

My advice is just as Nina's start looking at how things are done  with the default skins and its accompanying css and xml files. A few pointer you might find useful cause they use simple wording:

  • A skin is simply a component that contains the information used by DNN to present content.
  • A skin can be designed in HTML.
  • An HTML skin is composed of three parts. HTML files, CSS Files and XML files.
  • CSS Files and XML files are completely optional but are recomended for elaborate designs, some configurations and to improve performance.
  • Tokens are placeholders for SkinObjects. You use them in HTML skins.
  • SkinObjects are pieces of code with functionality.
  • Tokens are converted to SkinObjects when DNN installs or processes your skin.
  • Only use XML files when you need to apply certain properties to HTML Tokens, including CSS class assignment. 

For more in depth coverage of the terms and processes the Skinning Guide is your friend.


Do you know the truth when you hear it?
Néstor Sánchez
The Dúnadan Raptor -->Follow Me on Twitter Now!
 
New Post
5/12/2006 8:14 PM
 

Hi Cathy -

Since you've heard from Nik I'll just leave this post for now - He's regarded as the skinning expert by others in the core team.  

When a member on the board of directors steps in, they have authority over all matters involving the core team and I would not like to give conflicting comments in the way I do things, since it's only my perspective and I don't like to cause confusion.

Good luck with the tool, sounds like a great idea.You'll get great advice from Nik.

Can't wait to see the finished result.

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
11/7/2006 7:14 PM
 
Hi Nik,
This sounds like a really interesting and useful tool. I've looked around alot and don't seem to be
able to find any reference to it anywhere on the web including on your speerio.net site.
Is it still due for release? I'd love to have a test drive...

Many thanks,
Brian
 
New Post
11/9/2006 4:46 PM
 

Hey Cathy,

Sorry I didn't chime in earlier myself (I've got ~6 skinning projects going right now so my forum-browsing time has become a bit limited as of late).

I basically started the same way, except I've tended to avoid Image Ready... that's just a personal quirk of mine.

When I start with a skin, I mockup the design in Photoshop then simply use the Copy Merged command and then paste them into a new file, Save For Web... etc etc... I've never liked slices, don't really know why...

So then I pop over into DW and start setting up my skin files, usually I follow a structure of:

\\devserver\website.com\XXX-skin
-skin.html
-skin.css
-skin.xml
--//-Optional-//--
-otherskin.html
-otherskin.css
-otherskin.xml

in the folder name XXX stands for a 3 letter acronym I use to designate the client, the optional files are just in case you need mulitple skin types included in one skin package (ie. one page that has an annoying flash banner for the header)

Then just setup the skin as you would any other template inside Dreamweaver. I've actually gone back to using tables for most my DNN skins.. yes I said tables... I have spent many hours trying to get a perfect CSS-based, properly deprecated, cross-browser friendly site only to have it all shattered with the addition of a module or some other change. So I went back to my caveman days and have been mocking up most my skins with tables (considering most of DNN and it's modules generate table-based data, it really seemed to be a waste to put that much effort into CSS unless that was one of the stated requirements of the site)...

Anyway... so got the tables laid out with the images in place, now we just add the tokens,   [LOGIN] and [MENU] are your critical ones (you need to be able to get in and move around right?)... then just add your content areas... for this I use a snip of code from my personal code library:

<TABLE width="100%">
  <TR>
    <TD class="toppane" colspan="3" id="TopPane" runat="server" valign="top"></TD>
  </TR>
  <TR valign="top">
    <TD class="leftpane" id="LeftPane" runat="server" valign="top"></TD>
    <TD class="contentpane" id="ContentPane" runat="server" valign="top"></TD>
    <TD class="rightpane" id="RightPane" runat="server" valign="top"></TD>
  </TR>
  <TR>
    <TD class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top"></TD>
  </TR>
</TABLE>

This table gives you 5 Content areas, a top banner, 3 columns, and a lower banner. However you can break it down and just use bits and pieces, as long as you have a "ContentPane" set.

Once you have everything in place, just zip up your files to a XXX-skin-#.##.zip file and then upload it through the Host->Skins section. (One note, if you have nothing in your XML file, just leave it out, avoiding the panic of seeing an error when DNN parses the package). Now you can go in and start tweaking your CSS file live (another one of my preferences, not a requirement).

I hope this has made sense, it's getting near the end of the day and my brain is a bit of jelly at the moment.

One site I've recently rolled out can be seen at: http://www.parksidepediatrics.com .

Good Luck!

SB


Wells Doty Jr
Online Content Development
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Photoshop to SkinPhotoshop to Skin


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