Creating and Styling Container Images using DotNetNuke

Exclusive offer: get 50% off this eBook here
DotNetNuke 5.4 Cookbook

DotNetNuke 5.4 Cookbook — Save 50%

Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS

$26.99    $13.50
by John K Murphy | September 2010 | Cookbooks Open Source

In the previous articles, Creating a Simple Skin using DotNetNuke and Deploying and Exploring Skin Objects using DotNetNuke, we saw recipes on how to create a simple skin and also took a look at Skin Objects in DotNetNuke.

In this article by John K. Murphy, author of DotNetNuke 5.4 Cookbook, we will cover the following topics:

  • Creating custom container images
  • Styling a container with images
  • Styling a menu with images

Creating custom container images

Containers can do more than just act as placeholders for module content. By expanding the container skin to include images we can create more elaborate containers limited only by our creativity.

Styling a DNN container using images is a two-part process. First we must create the images we need and save them as a set of graphic files. Then we must design the container to position the images around the container. In this recipe we will see how to create the custom images for styling a container. In the next recipe Styling a container with images we'll see how to position these images to create the final container.

Getting ready

Here is a diagram that shows what the final container will look like. We need to create the five images highlighted in red. As you can see in this diagram, we need only create images for the distinctive elements. CSS can fill in the gaps by repeating the background image as necessary to fit the size of the container.

DotNetNuke 5.4 Cookbook

Creating images for a container is a four-step process:

  • Decide which sides of the container will use images. In this example we will create images for the top and bottom container edges and leave the left and right sides as a simple border line.
  • Decide the size of the images. A container border can be very narrow or very wide. In this example we will create a 27 pixel wide border with the images.
  • Decide which images will tile to support variable-sized containers. As containers can stretch or shrink, we need to use an image that can tile. That is, the image can be repeated as many times as necessary to fill the width of the container. In this example, we will pick one image to tile across the top and another to tile along the bottom. As the sides will be just a border line we won't need to worry about tiling vertically.
  • Choose a drawing application (such as MS Paint) to create the images and save them to a temporary folder. You can use a variety of formats—in this example we will save the images as GIF files to save space.

How to do it...

  1. Start by launching your favorite drawing application (such as MS Paint).
  2. Set the image dimensions to 98 pixels wide and 27 pixels high. There's nothing special about these dimensions, they just look good for this particular design.
  3. Draw the image for the upper-left corner of the container. This image will be the background for the title of the module, so it needs to be an image that can tile horizontally as the length of a container title varies.

    DotNetNuke 5.4 Cookbook

  4. Save the image as a GIF file called ContainerUL.gif.
  5. Next, create a new image with dimensions 80 by 27 pixels. This image marks the end of the module title and the beginning of the top container border. It does not tile and is used in this example to connect the upper-left corner to the border image that runs across the top of the container.

    DotNetNuke 5.4 Cookbook

  6. Save the image as a GIF file called ContainerUC1.gif.
  7. The next image is the top border of the container and will tile horizontally as the width of the container changes. Set the attributes to be 12 by 27 pixels.

    DotNetNuke 5.4 Cookbook

  8. Save the image as a GIF file called ContainerUC2.gif.
  9. For the border along the bottom of the container, we need two more images. The first is the lower-left corner. Make this image 90 by 27. This image will tile across the bottom for the width of the container.

    DotNetNuke 5.4 Cookbook

  10. Save the image as a GIF file called ContainerLL.gif.
  11. The last image is for the lower-right corner. This image doesn't tile. Make it 100 by 27 pixels.

    DotNetNuke 5.4 Cookbook

  12. 12. Save the image as a GIF file called ContainerLR.gif.
  13. At this point you should have five images in a temporary folder that look something like this:

    (Move the mouse over the image to enlarge.)

There's more...

In this recipe we saw how to create images for a container and a little bit on how the images can form the borders of a container. In the next recipe we will see how to create the container that will use these images.

DotNetNuke 5.4 Cookbook Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS
Published: September 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Read more about this book

Styling a container with images

As we saw in the previous recipe, the first step to styling a container with images is to create the images. In this recipe, we will take the second step and expand the simple ASCX container by adding the images that will create a graphic border around the container. We will also demonstrate changing the font and text color.

Getting ready

To follow along with this recipe you must have completed the following recipes:

  • Creating a simple ASCX container
  • Creating custom container images

How to do it...

  1. Start by locating the default container folder within your test DNN portal (\Portals\_default\Containers).
  2. Next, create a new folder to hold the container files. Call this folder ASCXImageContainer.
  3. Create a new folder inside to hold the images: ASCXImageContainer\images.
  4. Copy the five images you created in the previous recipe to this new folder. You should now have the following files:
    • ContainerUL.gif: The upper-left corner of the container
    • ContainerUC1.gif: The first upper center image
    • ContainerUC2.gif: The second upper center image
    • ContainerLL.gif: The lower-left corner
    • ContainerLR.gif: The lower-right corner
  5. With the images in the correct folder, launch the Development Tool.
  6. To create the ASCX file, select New File… from the File menu.
  7. In the New File dialog, select Web User Control and click on Open.
  8. The first step is to place the following directive at the top of the file:

    <%@ Control language="vb"
    CodeBehind="~/admin/Containers/container.vb"
    AutoEventWireup="false" Explicit="True"
    Inherits="DotNetNuke.UI.Containers.Container" %>

  9. Next, place necessary register directives for the Skin Objects we need to support the container:

    <%@ Register TagPrefix="dnn" TagName="ACTIONS"
    Src="~/Admin/Containers/SolPartActions.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="ICON"
    Src="~/Admin/Containers/Icon.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="TITLE"
    Src="~/Admin/Containers/Title.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="VISIBILITY"
    Src="~/Admin/Containers/Visibility.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON1"
    Src="~/Admin/Containers/ActionButton.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON2"
    Src="~/Admin/Containers/ActionButton.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON3"
    Src="~/Admin/Containers/ActionButton.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON4"
    Src="~/Admin/Containers/ActionButton.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON5"
    Src="~/Admin/Containers/ActionButton.ascx" %>

  10. To position the images, we start with an encompassing table to set the style of the container, then include a table for the top of the container, a place for the ContentPane, then another table to hold the images for the bottom of the container:

    <table width="100%" border="0" align="center" cellpadding="0"
    cellspacing="0" class="ASCXImage_Master">
    <tr>
    <td class="ontainerUC2">
    <table height="27" border="0" cellpadding="0"
    cellspacing="0">
    <tr>
    <td valign="top" class="ContainerUL">
    <dnn:ACTIONS runat="server" id="dnnACTIONS" />
    </td>
    <td valign="top" class="ContainerUL">
    <dnn:ICON runat="server" id="dnnICON" />
    </td>
    <td valign="top" class="ContainerUL">&nbsp;
    <dnn:TITLE runat="server" id="dnnTITLE"
    CssClass="ASCXImage_Title"/>
    </td>
    <td valign="top" class="ContainerUC1">&nbsp;</td>
    <td valign="bottom" class="ContainerUC2">&nbsp;</td>
    </TR>
    </table>

    <table width="100%" border="0" align="center"
    cellPadding="0" cellSpacing="0">
    <tr>
    <td class="ASCXImage_Content">
    <div runat="server" id="ContentPane">
    </div>
    </td>
    </TR>
    </table>
    <table width="100%" height="21" border="0" cellpadding="0"
    cellspacing="0">
    <tr>
    <td valign="middle" class="ContainerLL">&nbsp;</td>
    <td valign="middle" class="ContainerLR">&nbsp;</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

  11. Finally, we create the table to hold the action buttons that sit outside of the border images:

    <table width="100%" height="25" border="0" cellpadding="2"
    cellspacing="0">
    <tr valign="bottom">
    <td align="left" nowrap>
    <dnn:ACTIONBUTTON1 runat="server"
    id="dnnACTIONBUTTON1"
    CommandName="AddContent.Action"
    DisplayIcon="True" DisplayLink="True" />
    </td>
    <td height="22" align="right" nowrap>
    <dnn:ACTIONBUTTON2 runat="server"
    id="dnnACTIONBUTTON2"
    CommandName="SyndicateModule.Action"
    DisplayIcon="True"
    DisplayLink="False" />&nbsp;
    <dnn:ACTIONBUTTON3
    runat="server" id="dnnACTIONBUTTON3"
    CommandName="PrintModule.Action"
    DisplayIcon="True"
    DisplayLink="False" />&nbsp;
    <dnn:ACTIONBUTTON4
    runat="server" id="dnnACTIONBUTTON4"
    CommandName="ModuleSettings.Action"
    DisplayIcon="True"
    DisplayLink="False" />
    <dnn:ACTIONBUTTON5
    runat="server" id="dnnACTIONBUTTON5"
    CommandName="ModuleHelp.Action"
    DisplayIcon="True" DisplayLink="False" />
    </td>
    </tr>
    </table>

  12. Select Save WebUserControl1.ascx As… from the File menu.
  13. Browse to the ASCXImageContainer folder and save the file as ASCXImageContainer.ascx.
  14. Next we create the CSS file by selecting New File… from the File menu.
  15. In the New File dialog, select Style Sheet and click on Open.
  16. Replace the contents of the file with:

    /* Set the containing width and border color */
    .ASCXImage_Master { width: 100%; background-color: transparent;
    BORDER: #A0A0A0 1px solid; padding: 0px; }
    /* Set the title font */
    .ASCXImage_Title { font-family: Impact; font-size: 12px; color:
    #ffffff; font-weight: normal; }

    /* Set the padding */
    .ASCXImage_Content { padding-left: 5px; padding-right: 5px;
    padding-top: 5px; padding-bottom: 0px; font-size: 15px; color:
    #404040; }

    /* Set the images to draw the box around the container */

    .ContainerUL { background: url(images/ContainerUL.gif) repeat-x;
    height: 27px; }
    .ContainerUC1 { background: url(images/ContainerUC1.gif) norepeat;
    width: 80px; height: 27px; }
    .ContainerUC2 { background: url(images/ContainerUC2.gif) repeat-x;
    height: 27px; }
    .ContainerLL { background: url(images/ContainerLL.gif) repeat-x;
    height: 27px; }
    .ContainerLR { background: url(images/ContainerLR.gif) no-repeat;
    width: 100px; height: 27px; }

  17. Select Save StyleSheet1.css As… from the File menu.
  18. Browse to the ASCXImageContainer folder and save the file as container.css.
  19. You can also make a preview image of the new container, something like:

    DotNetNuke 5.4 Cookbook

  20. Save the image file as ASCXImageContainer.jpg.
  21. To see how the new container will look on our site, start by logging in as the SuperUser.
  22. Look under the Admin menu and select Skins.
  23. Select the ASCXImageContainer from the Containers: drop-down list.
  24. The new ASCXContainer will now appear:

    DotNetNuke 5.4 Cookbook

  25. To see how the container looks, click on the Preview link.

    DotNetNuke 5.4 Cookbook

  26. We can see that the images form a border around the container with the module title on the left side next to the hover menu. In addition, you can see the action buttons we created in step 11 appearing below the container. Also note how the image for the top and bottom line automatically fill to the full width of the container.

Styling a menu with images

In this recipe, we will take the simple ASCX skin and show how to skin a menu by combining the menu control with background images.

Skinning a DNN menu using images has two parts: the first is a set of images that form the background of the menu; the second is the text that appears in the menu as provided by the menu control.

In this recipe we will examine in detail the professional-looking menu created for the template skin. We will see all the pieces that go into a menu, how to create background images for them and how to style the text. When all the pieces are in place we'll have a menu looking like this:

DotNetNuke 5.4 Cookbook

Getting ready

To follow along with this recipe you must have completed the following recipes:

  • Downloading and installing a skin
  • Creating a simple ASCX skin

How to do it...

  1. Start by locating the default skin folder within your test DNN portal (\Portals\_default\Skins).
  2. Next, create a new folder to hold the skin files. Call this folder ASCXMenuSkin.
  3. Create a new folder inside to hold the images ASCXMenuSkin\images.
  4. Find the folder holding the template skin from the recipe Downloading and installing a skin.
  5. Locate and copy these images into the ASCXMenuSkin\images folder.
    • menu_bg.png
    • menu_hov.png
    • menu_left.png
    • menu_right.png
    • submenu_hov.png

  6. With the images in place, we can now open the sample ASCX created in the recipe Creating a simple ASCX skin and expand it to use the menu images.
  7. Launch the Development Tool.
  8. Select Open File… from the File menu.
  9. Browse to the SampleASCXSkin folder and select the SampleASCXSkin.ascx file.
  10. Find the menu Skin Object between the register and the login DIV:

    <%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/
    Login.ascx" %>

    <div >
    <dnn:NAV runat="server" id="dnnNAV"
    ProviderName="DNNMenuNavigationProvider"
    IndicateChildren="false"
    ControlOrientation="Horizontal" />
    </div>

    <div id="login_style" class="user">

  11. Replace the DIV containing the menu with this CSS-styled DIV :

    <%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/
    Login.ascx" %>

    <div class="menu_style">
    <dnn:NAV runat="server" id="dnnNAV"
    ProviderName="DNNMenuNavigationProvider"
    IndicateChildren="false"
    ControlOrientation="Horizontal"
    CSSControl="mainMenu" />
    </div>

    <div id="login_style" class="user">

  12. Select Save SampleASCXSkin.ascx As… from the File menu.
  13. Browse to the ASCXMenuSkin folder and save the file as ASCXMenuSkin.ascx.
  14. As the real work is in the CSS file, we need to define the styles that will provide the images, fonts, and colors to the menu. Select Open File… from the File menu.
  15. Browse to the SampleASCXSkin folder and select the skin.css file.
  16. Scroll down to the bottom of the file and begin by adding the following classes:

    /* step 1: the main menu */

    .mainMenu {font-family: Verdana, Arial,
    Helvetica, sans-serif; cursor: pointer; font-size: 13px; fontweight:
    bold;}
    .mainMenu_bg {background: url(images/menu_
    bg.png) repeat-x top left; margin: 0 19px 0 7px; height: 40px;}
    .mainMenu_left {background: url(images/menu_left.
    png) no-repeat top left;}
    .mainMenu_right {background: url(images/menu_
    right.png) no-repeat top right;}
    .mainMenu .root {text-align: center; line-height:
    40px; padding: 12px 12px 12px 12px; color: White;}

  17. If you save your files at this point and then view the skin from the portal, the menu would look like:

    DotNetNuke 5.4 Cookbook

  18. The next piece to add is the menu hover and active menu. These are the images that will display when the mouse hovers over the main menu text or when the menu is active. It is a narrow image, but repeat-x will cause it to expand horizontally to fill the length of the menu text. Add this code to the bottom of the CSS file:

    /* Main menu hover */
    .mainMenu .hov{ color:#fff; background:url(images/menu_hov.png)
    repeat-x top left;}

    /* Main menu selected */
    .mainMenu .sel, .mainMenu .bc {
    color:#FFF;
    background:url(images/menu_hov.png) repeat-x top left;
    }

  19. This creates an image that displays when the mouse hovers over the menu item and we will use the same image when the menu is active:

    DotNetNuke 5.4 Cookbook

  20. The last step is to provide the styles for the submenus. Add the following code to the bottom of skin.css file:

    /* general submenu css */
    .mainMenu .m {width: 160px; font-size: 11px;
    font-weight: bold; z-index: 1000; line-height: 2em;}
    .mainMenu .m .mi {background-color: #242424;}
    .mainMenu .m .icn {padding-left: 5px; width: 20px;}
    .mainMenu .m .mi * {color: white; margin-right: 5px;}
    /* change * to .txt with latest webcontrols */
    .mainMenu .m .sel, .mainMenu .m .bc {background: url(images/
    submenu_hov.png) repeat-x top left;}
    .mainMenu .m .hov {background: url(images/submenu_
    hov.png) repeat-x top left;}

  21. This creates the images for when the mouse hovers over the submenus:

    DotNetNuke 5.4 Cookbook

  22. Select Save skin.css As… from the File menu.
  23. Browse to the ASCXMenuSkin folder and save the file as skin.css.
  24. You can also make a preview image of the new container, something like:

    DotNetNuke 5.4 Cookbook

  25. Save the image file as ASCXMenuSkin.jpg.
  26. To see how the new skin will look on the site, log in as the SuperUser.
  27. Look under the Admin menu and select Skins.
  28. Select the ASCXMenuSkin from the Skins: drop-down list.
  29. The new ASCXMenuSkin will now appear:

    DotNetNuke 5.4 Cookbook

  30. This is a very simple example, but it shows the basics of skinning a menu.

How it works...

In DNN skins, styles can be applied to HTML elements like DIVs, table TDs, and SPANs. In this recipe we added additional DIVs and styles to set the font and style of the menu text and to create graphic background and edge pieces.

Summary

This article explained the following recipes on how to style your site by creating custom skins and container images:

  • Creating custom container images
  • Styling a container with images
  • Styling a menu with images
DotNetNuke 5.4 Cookbook Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS
Published: September 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


John K Murphy

John K Murphy is a software industry veteran with more than 25 years experience as a programmer and database administrator. A graduate of the University of West Virginia he began writing computer games in the 1980's before pursuing a career as a  computer consultant. Over the years, John has enjoyed developing software in most major programming languages while striving to keep current with new technologies.

In his spare time, John enjoys scuba diving, skydiving and piloting small planes. He lives with his wife and two children in Pittsburgh, Pennsylvania.

Books From Packt


Silverlight 4 User Interface Cookbook
Silverlight 4 User Interface Cookbook

Microsoft Dynamics GP 2010 Cookbook
Microsoft Dynamics GP 2010 Cookbook

Microsoft Windows Workflow Foundation 4.0 Cookbook
Microsoft Windows Workflow Foundation 4.0 Cookbook

Building Websites with DotNetNuke 5
Building Websites with DotNetNuke 5

DotNetNuke Skinning Tutorial
DotNetNuke Skinning Tutorial

MySQL Admin Cookbook
MySQL Admin Cookbook

NHibernate 3.0 Cookbook
NHibernate 3.0 Cookbook

Oracle Database 11g – Underground Advice for Database Administrators
YUI 2.8: Learning the Library


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
n
a
X
a
D
4
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software