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.

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.

   
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.

   

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.

   

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.

   

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.

    

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.