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, ...DNN4 skin from Photoshop, Help meDNN4 skin from Photoshop, Help me
Previous
 
Next
New Post
8/17/2006 2:53 PM
 

I need help creating a DNN4 skin from a Photoshop or Illustrator file.  Nothing really fancy, I just have tired of searching and reading and not finding a good tutorial yet for this basic step. I am no good at slicing it seems. Every skips this part as it is so easy I guess. But not for me.

I will keep trying, but I may end up paying for some kind soul to convert my Photoshop or Illustrator design into the right amount and arrangement of tables for an HTML skin.

What do I need to tell someone / or give someone to take this first step?  I can point you to my current DNN4 website which is using the stock DNN green skin, and ask for help to just slightly adjust that skin. Or I can post a PSD file showing an example of the changes I had in mind.

My DNN4 brain is shot. Like most of you, I run the whole portal and I have been already spent getting it just to work, let alone make it look unique.

Thanks!

 
New Post
8/18/2006 8:02 AM
 
Hi
Mostly I don't slice anything.
I use a background image in one div and put several other ones in it with absolute positioning, for all the contentpanes.
But you should know some CSS if you do it that way.


 
New Post
8/18/2006 8:04 AM
 

Dear solarspin

Convert your photoshop picture in a html file with the specific tool in Photoshop.
Make a skin.css file with the necessary styles and put this file in the same folder as the .htm (.html) file.
Put some tokens in this HTML file like [MENU], [BREADCRUMB],...) and make contentpanes...
Make a .XML file where you declare the different tokens in the same folder as the .htm (.html) file.
Test if this works in frontpage, dreamweaver...
Make a .jpg picture of the skin that you are making with the same name as the .htm (.html) file.
Remove the footer of the html file (</body> and </html>)
Remove the header of the html file (<html><head></head><body>).
Zip all these files.
Upload the zip file to dnn. (host or admin... skins)
If everything is OK it works.
Take a look at the documentation.

Of course you can make directly a .ascx file...


Vriendelijke groeten
Gilbert Vanden Borre
 
New Post
8/18/2006 12:16 PM
 

I find it helpful to modify a default skin rather than build something new from scratch. It lets you add the new design one small chunk at a time, and you can test and make nessesary adjustments at each step. If there are problems, you already have the problem code isolated and therefore waste less time.

Here's how i would do it:

Setting up a new skin

1) Go to your skins folder: something like "C:\Inetpub\wwwroot\DNN\Portals\_default\Skins"

2) Make a copy of the directory 'DNN-Blue' and rename it 'Custom'

3) Go into your new ''Custom' skin folder, and delete everything except

  • Horizontal Menu - Fixed Width.ascx
  • Horizontal Menu - Fixed Width.jpg
  • skin.css

4) Rename:

  • Horizontal Menu - Fixed Width.ascx ---to--> CustomSkin.ascx
  • Horizontal Menu - Fixed Width.jpg ---to--> CustomSkin.jpg

5) Load your new skin into DNN by logging into your portal as admin or host, go to and set either the Admin->Skins menu, Select 'Custom' from the skins dropdown, then when the page refreshes click the 'apply' link below the 'CustomSkin' item.

Now you're ready to start skinning...

6) Hello World: Open up CustomSkin.ascx in your HTML editor (i recommend macromedia dreamweave 8 - you can grab a 30 day trial from adobe.com). If you did everything right, any changes you make to this file will now be reflected on your dnn site. So go to the top of the html and type "Hello World" between the last <%@ Register tag and the first table tag. Go back to your DNN site and hit refresh, see if your changes appear at the top.

Start hacking the design up...

Load up your design in photoshop and first focus on an easy part of the site, like the header or footer. Work out if you can just cut the images up and place them in a table, or if you need to make some background images to lie undernearth your text/images. To be honest it takes practice/experience to cut up a design properly, and if your designer hasn't made the site with the restrictions of HTML/CSS in mind your job will be much much harder.

I would add blocks of the design to the top of the page, and if it works and looks right then start plugging in the controls that add the functionality (you'll see them in the .ascx file, dreamweave design view shows them as [login] [language] etc but if you look closely at the code its actually a .net control.

Containers

With DNN sites, everything is a module that you can add, remove or move around with a page, and those modules are always wrapped up in a mini-skin called a container. Container skins are kept completely seperate from site skins, and its a bit beyond the scope of this, but hopefully if you can nail the site skin you should be able to figure out the container skins, its the same basic idea, just on a smaller scale.

Hope this helps.

 
New Post
8/18/2006 3:14 PM
 

. Hi, this is helpful, Thanks so far. I have read the documentation. I know what the tokens are and why they are there. I guess it is mostly the slicing and getting the HTML right.

I have tried to slightly adjust one of the default skins. So I will continue that road. But I am trying to learn and understand the best tools to make it smoother when I wnat to go from a original nice looking PSD or AI file of a web page form to a DNN skin. I understand the container system.

The first thing I want to do to the DNN BLue, lets say, is to add a thin row in the top, of the table I guess, because I want to put a thin row of color up at the top of every page with our main university 3 menu links and the red color all our sites use. I cannot do this using the logo area. But I want it above the main horizontal top menu.

THanks for helping folks.  :)) 

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...DNN4 skin from Photoshop, Help meDNN4 skin from Photoshop, Help me


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