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

304 CHAPTER 11 ■ CREATING A DNN SKIN 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 BREADCRUMB and 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 CHAPTER 11 ■ CREATING A DNN SKIN 305 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. 306 CHAPTER 11 ■ CREATING A DNN SKIN 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.css file 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. CHAPTER 11 ■ CREATING A DNN SKIN 307 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. 308 CHAPTER 11 ■ CREATING A DNN SKIN 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 sur- 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: • <HTML> • <FORM> • <BODY> These tags will be supplied by the web page that the control is inserted into. These last three errors are fine. CHAPTER 11 ■ CREATING A DNN SKIN 309 Figure 11-17. HTML validation errors Figure 11-18. Reformatted document with fewer errors 310 CHAPTER 11 ■ CREATING A DNN SKIN 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"> <tr> <td valign="top"> <table class="skinmaster" width="770" border="1" align="center" cellspacing="0" cellpadding="0"> <tr> <td id="ControlPanel" runat="server" class="contentpane" valign="top" align="center"> </td> </tr> <tr> <td valign="top"> <table class="skinheader" cellspacing="0" cellpadding="3" width="100%" border="1"> <tr> <td valign="middle" align="left"> [LOGO]</td> </tr> </table> <table class="skingradient" cellspacing="0" cellpadding="3" width="100%" border="1"> <tr> <td class="toppaneindex" id="TopPaneIndex" runat="server" valign="top" align="center"></td> <td class="skingradient" valign="middle" align="right" nowrap> [SEARCH]</td> </tr> </table> CHAPTER 11 ■ CREATING A DNN SKIN 311 <table cellspacing="0" cellpadding="3" width="100%" border="1"> <tr> <td width="100%" valign="top" align="center"> <b> ::</b>&nbsp;[BREADCRUMB]<b>:: </b></td> <td width="200" valign="top" align="right" nowrap> [USER]&nbsp;&nbsp;[LOGIN]</td> </tr> </table> </td> </tr> <tr> <td valign="top" > <table cellspacing="0" cellpadding="0" width="100%" border="1"> <tr > <td class="menupane" id="MenuPane" height="100px" runat="server" valign="top" align="left">[MENU]</td> <td class="contentpane" id="ContentPane" runat="server" valign="top" align="center"></td> </tr> </table> </td> </tr> <tr> <td align="center" valign="middle">[LINKS]</td> </tr> <tr> <td valign="middle" align="center"> [COPYRIGHT]&nbsp;&nbsp;[TERMS]&nbsp;&nbsp;[PRIVACY] </td> </tr> </table> </td> </tr> </table> 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. 312 CHAPTER 11 ■ CREATING A DNN SKIN 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 MENU token, 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): <Object> <Token>[MENU]</Token> <Settings> <Setting> <Name>display</Name> <Value>vertical</Value> CHAPTER 11 ■ CREATING A DNN SKIN 313 </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. [...]... TopIndexPane CHAPTER 11 ■ CREATING A DNN SKIN Most search engines give weight to indexing pages based on words they find at the beginning of a page Adding a spot at the top of your page where you can insert a phrase concerning your website will give you a better chance of rising up in the search engine hit results Other Skinning Tasks You have finished the basics of creating and testing a new skin... had you create skin and container folders within the Flowers folder you’re using for developing this skin and container pair Within the Skin folder, you created a DNN-Blue folder and copied some files from the DNNBlue skin into it to use as a template I will have you do the same thing for the container Copying a Template Open the Flowers\Container folder, and create a new folder within it called DNN-Blue... 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 CHAPTER 11 ■ CREATING A DNN SKIN Figure 11-23 The files contained in the Skin folder Select... 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 317 318 CHAPTER 11 ■ CREATING A DNN SKIN 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... this The last thing to do is go to the working Flowers\Skin folder and replace all the files in the Flowers - Fixed Width.zip file with the new files you edited Also, don’t forget to add the new files (logo.jpg and Flowers - Fixed Width.jpg) as well CHAPTER 11 ■ CREATING A DNN SKIN Creating a Container Now, the last thing to do in a skinning operation is create a container to go with it In your case,... following pages in your new portal: • Home • Events • Photo Gallery • Discussions • Contact Us • Guestbook 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,... you did with the skin files Rename the zipped file Flowers.zip This is shown in Figure 11-44 Figure 11-44 The container package Now that you have the container all packaged up, you need to install it into your SkinTest portal Log into your SkinTest portal as host Click Admin ➤ Skins You should have the same page as shown in Figure 11-45 333 334 CHAPTER 11 ■ CREATING A DNN SKIN Figure 11-45 The SkinTest... portal’s home page with the new container This is shown in Figure 11- 49 Figure 11- 49 The new container applied Take a screenshot of your new container in use, and save it to your portal container folder Name the file Image Header - White Background.jpg (assuming it is a jpg file) My container folder for this DNN container is C: \DotNetNuke\ Portals\5\Containers\Flowers Now when you log in as administrator and... Figure 11-30 Finding the skin 321 322 CHAPTER 11 ■ CREATING A DNN 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... that contains the MENU token You do not have the class in the css file yet, so you need to make one 315 316 CHAPTER 11 ■ CREATING A DNN SKIN Open the skin.css file and add the following code just above the contentpane class: menupane { padding-right: 4px; padding-top: 6px; } You will also need to adjust the settings in the MainMenu_MenuContainer class This is shown following: MainMenu_MenuContainer { . 5. This is shown in Figure 11- 30. Figure 11- 30. Finding the skin 322 CHAPTER 11 ■ CREATING A DNN SKIN Go back to the skin IDE and change the borders of all the tables to 0 in the .htm file padding-left: 6px; padding-right: 4px; padding-top: 0px; width: 100 %; height: 100 px; border: 1px solid black; } You can see that I use the vertical gradient image and that I repeat it in. CREATING A DNN SKIN 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