Beginning DotNetNuke 4.0 Website Creation in C# 2005 with Visual Web Developer 2005 Express phần 9 potx

Copy these images to the DNN-Blue folder, and your Solution Explorer should look like mine, shown in Figure 11-12.. Copy the Horizontal Menu - Fixed Width.htm file from the Skin\DNN-Blue

Figure 11-9. A blank page based on the DNN-Blue skin

You can see the tokens in Figure 11-8 and how they get translated to controls in

Figure 11-9 You can also see the table cells in the center of Figure 11-8 between the BREADCRUMBand TERMS tokens These table cells correspond to the placement of the panes in Figure 11-9.Pretty cool, huh? But where is all the blue stuff and images shown in Figure 11-8? This pic-ture only shows the layout Remember I said that the look and feel is contained in the css file.VWD has a neat feature with which you can instantly overlay a css file onto a layout tem-plate In the Solution Explorer, click the skin.css file Now drag it over and drop it on the design panel showing the layout Make sure you drop it outside the table You can tell because

a blue box appears wherever your mouse is as you drag the css file around the design page You want the blue box to be the whole page Figure 11-10 shows the result

Figure 11-10. CSS applied to the layout

If you look at the source for this page, you will see a new line at the top of the page:

<link href=" / /Skin/DNN-Blue/skin.css" rel="stylesheet" type="text/css" />

This line of code was added by the IDE to associate this style sheet to the layout

Creating the Images

This new skin will contain three images: one is the logo, one is the horizontal gradient used in

the copyright and title bars, and one is the vertical gradient used in the menu

I created these gradients using Microsoft Paint The vertical and horizontal images are

shown in Figure 11-11

Figure 11-11. The horizontal and vertical gradients

First of all, these are two different files that I combined here to show you how they look

What do you notice? They are barely visible, the width of the vertical gradient is one pixel, and

the height of the horizontal gradient is also one pixel

I could have made these jpg images to be the size I wanted, but that would have

drasti-cally increased the size of the file Right now, these files are just 1 KB each

When I reference these images in the css file, I will use a CSS command to repeat the

image to fill out the space This is very fast and enables me to have a lightweight skin for

download

I have included these gradient images in the code with the book Copy these images to the

DNN-Blue folder, and your Solution Explorer should look like mine, shown in Figure 11-12 If

you have your project open, you may need to refresh the Solution Explorer to see the new files

Figure 11-12. The Solution Explorer, showing the gradient images

There are a couple more files that need to be in this skins folder as well Copy the skin.cssfile from the Skin\DNN-Blue folder to the Skin folder Copy the Horizontal Menu - Fixed Width.htm file from the Skin\DNN-Blue folder to the Skin folder Rename this htm file Flowers - Fixed Width.htm Your Solution Explorer should now look like Figure 11-13

Figure 11-13. The Solution Explorer with all files

Open this new Flowers - Fixed Width.htm file, and drag the new skin.css file on top of it like you did before Your screen should look like Figure 11-14

Figure 11-14. The new skin, with CSS applied

Now that you have the layout and the css file associated, it is time to edit the htm layout file

Editing the Skin

Your final skin for this page will be simpler than this one The layout will end up looking like

Figure 11-15

Figure 11-15. Final layout of the new skin

You will start by editing the source code for this layout Click the source button to view the

HTML code

In the IDE, click Tools ➤ Options Make sure the Show All Settings box is checked Scroll down and click HTML ➤ Validation In the right-hand pane, check all the options This is shown in Figure 11-16.

Figure 11-16. Setting up HTML validation

Click OK, and then click back on the source of the page All of a sudden, you will see a ton

of errors I have 59 of them, as evidenced by Figure 11-17

You can see that most of the errors are due to capitalization problems with Internet Explorer 6 Internet Explorer 6 does not allow uppercase tags This is easily fixed

Click Edit ➤ Format Document in the IDE This will format the HTML code properly so that it works in Internet Explorer 6

Not only did this reduce my error count from 59 to 3, but it also reformatted my HTML code to be easier to read (see Figure 11-18)

The errors that are left have to do with missing HTML tags The IDE likes to see some rounding tags for this code because it thinks this code will be rendered as a web page This htm code will eventually be turned into a NET user control User controls cannot have the following tags:

Figure 11-17. HTML validation errors

Figure 11-18. Reformatted document with fewer errors

Rearranging the Table

Your new layout will have the logo at the top, with the search box in the cell right next to it Below that, it will have the BREADCRUMB and user/login cells Below this will be the menu and another pane on the left with a content pane on the right side At the bottom will be the familiar copyright/terms/privacy bar

You need to delete and rearrange some cells Listing 11-1 shows the complete HTML code for this new layout

Listing 11-1. The new skin layout code

<link href=" /Skin/skin.css" rel="stylesheet" type="text/css" />

<table class="pagemaster" border="1" cellspacing="0" cellpadding="0">

<table cellspacing="0" cellpadding="3" width="100%" border="1">

Since you have not changed any of the css file classes, I am sure that this code will need

tweaking pretty soon However, it does give the layout you’re looking for

Adjusting the css File

You will start with the menu The DNN-Blue skin displays the menu horizontally You want your menu to display vertically The attributes for the DNN controls that replace the tokens are contained in an xml file called skin.xml Currently you do not have one, so you need to copy one from somewhere

Copy the file C:\DotNetNuke\Portals\_default\Skins\DNN-Blue\skin.xml into the skins folder you created for this project

Refresh your Solution Explorer and double-click this file to open it You will see XML code for the BREADCRUMB and TREEVIEW tokens This is shown in Figure 11-19

Figure 11-19. The skin.xml file, showing attributes for the tokens

The default xml file that you just copied over does not have information for the MENUtoken, so you need to add an element for this

Delete the TREEVIEW element from this xml file, and add the following element (delete the

<Object> and </Object> tags that surround the TREEVIEW element as well):

</Setting>

</Settings>

</Object>

Now you just have settings for the BREADCRUMB and MENU elements in this file While it is not

necessary to have this file (as evidenced by the lack of all the tokens in this one), you sometimes

do need to override the default values The default setting for the MENU token is horizontal

■ Note The documentation that comes with DNN has a file called DotNetNuke Skinning.pdf This

doc-ument contains a table with all the tokens and all the settings that these tokens can have Read it

Now your skin.xml file contains the correct settings

The skin.css file needs to change to reflect the images that you want to display and to

get the colors correct You will start at the beginning of the page and work your way down

Open the skin.css file in the IDE It should look like Figure 11-20

Figure 11-20. The skin.css file

To the left of the skin.css file is the CSS Outline pane, which you can use to navigate to the

different classes in the css file

If you look at the htm file, you will see that the main table that represents the whole page

is using the class pagemaster This is shown here:

<table class="pagemaster" border="1" cellspacing="0" cellpadding="0">

■ Tip You will notice that I have the border set to 1 I do this for every table in the file This way I can see the outline of each cell in design mode It makes it much easier to edit I will set this value to 0 before I actually use it

You’ll make the background color a pale yellow Change the background color for the pagemaster class to #ffff99

The next table down in the htm file represents everything that the user sees within the page This table uses the skinmaster CSS class I would like this color to be a different yellow Change the skinmaster background color to #ffff33

If you switch back to the page’s design mode, you will see these CSS changes take effect You will see the background of the whole page become a pale yellow, and the interior back-ground of the page become a darker yellow You have no use for the borders in this class, so delete them

In case you were wondering, the borders that start with moz are specific to Mozilla ers and are not standard They are intended to give a rounded edge to the table

brows-Including the Image

The gradient image you’re creating will be displayed in the rows that contain the search box and copyright To do this, you’ll change the skingradient class in the css file This class should look like the following:

Save this file and edit the source for the htm layout file You will see that the table tag taining the SEARCH token already uses the skingradient class

con-Scroll down to the cell that has the COPYRIGHT token, and include the skingradient class here The code is shown following:

Now switch to the page’s design mode, and you should see your changes in the layout, as

shown in Figure 11-21

Figure 11-21. New colors and gradient images in the layout

So far, so good Next is the controlpanel class in the css file This class controls the

back-ground color of the control panel that you see when you log into the page as administrator or

host This panel is shown in Figure 11-22

Figure 11-22. The control panel

Since baby blue is fine with me, I will leave this class alone You will notice from

Listing 11-1 that the cell containing the content pane uses the contentpane class You will

change this to use the controlpanel class The code is as follows:

The source for the htm file calls out a menupane class for the cell that contains the MENU

token You do not have the class in the css file yet, so you need to make one

Open the skin.css file and add the following code just above the contentpane class:.menupane {

Testing the Skin

At this point, you have completed the skin (you still have the container to do), and it is time to test it The first thing you have to do is package up the skin for export If you are an old hand at working with NET, you know that you can very easily create an install for a DLL or program that you created You also know that you need a manifest file that contains all kinds of informa-tion about your program

The guys at DotNetNuke decided against this They decided to package skins and containers in a zip file Personally, I agree with this approach It is very easy to implement and maintain

Now you need to create a zip file for your new skin

Packaging the Skin

Open Windows Explorer and navigate to the Flowers\Skin folder It should contain the files shown in Figure 11-23

Figure 11-23. The files contained in the Skin folder

Select all the files in here except for the DNN-Blue folder, and right-click the Flowers -

Fixed Width.htm file Select Send To ➤ Compressed (zipped) Folder This is shown in

Figure 11-24

Figure 11-24. Zipping up the files

You should get a file called Flowers - Fixed Width.zip That’s it Your skin is packaged

How easy was that?

Creating the Test Harness

In software, a test harness is a shell of a program that is used to test your code In your case, you

will test your code in a new portal

You created the Employee portal in Chapter 9 You did this to separate the functionality of

the website

You need to create a new portal in the restaurant website called SkinTest To do this, follow the instructions in the “Creating the Portal” section in Chapter 9 Use the Club or Organization Site template You will have the following pages in your new portal:

You will be uploading the skin into this new portal and testing it on the new pages in here

Uploading the Skin

Now you need to upload the skin to DNN Open your DNN SkinTest site, and log in as host.Choose Admin ➤ Skins, and click the Upload link at the bottom of the page Browse to your new skin package, and select the skin to upload This is shown in Figure 11-25

Figure 11-25. Choosing a new skin to upload

Click the Upload New File link, and DNN will upload the new skin, parse it, and install it You will get a screen like Figure 11-26

Figure 11-26. Installing the new skin

Scroll down this page to see all that the skin installer did for you At the bottom, click the

Return link, and you will be brought back to the skin manager page Choose the Flowers - Fixed

Width skin from the Skins drop-down menu, and you should see the screen shown in

Figure 11-27

Figure 11-27. The new skin installed

Notice that you do not have an image You will fix this later Click Apply to see what pens Your screen should change dramatically to show what I have in Figure 11-28.

hap-Figure 11-28. The new skin applied

Notice the lines in the page? Most of this results from the fact that you still have the border

of all the tables set to 1 The layout is pretty much acceptable, though Go to each page in turn, and see what it looks like Notice that the skin does not affect the container, which is still the DNN-Blue default

Skin Edit Cycle

OK You have installed the skin You have already found one problem in that you haven’t turned off the table cell borders However, this isn’t too much of a problem, because there is a way to quickly edit the skin and just as quickly test it

First of all, you need to find the folder where DNN put your skin This skin is being tested

in a portal, and is not available to other portals I uploaded my skin to the site, not the host

Open Windows Explorer and navigate to the C:\DotNetNuke\Portals folder You will see

the default portal, as well as some others that are named 0 through n This is shown in

Figure 11-29

Figure 11-29. DNN portals

You may have a different portal setup than me If you open each portal folder, you will see

some other sub-folders I found the Flowers skin in my portal 5 This is shown in Figure 11-30

Figure 11-30. Finding the skin

Go back to the skin IDE and change the borders of all the tables to 0 in the htm file Save the file.

Now open the folder in which you are doing development on the skin, and copy the Flowers - Fixed Width.htm file to the DNN skins folder where DNN put this skin

While you’re logged into the test portal you made, click Admin ➤ Skins to get to the skin manager Choose the Flowers - Fixed Width skin, and click the Parse Skin Package link to enable the change you just made to the htm file This is shown in Figure 11-31

Figure 11-31. Parsing the skin to get the changes

Click the Home link after this is done, and you should see the changes appear in the page You can do this repeatedly until you get your skin working the way you want—this is pretty quick

How about adding a picture for this skin? Take a screenshot of your new web page and save it to the Flowers skin folder that you are developing with Make sure that this screenshot

is called Flowers - Fixed Width.jpg Copy this file over to the portal skin folder and refresh the screen shown in Figure 11-31 It should now look like Figure 11-32