|
|
|
|
In this section of the tutorial, you will identify all the elements that require customization, by analyzing the pages that contain MX Kollection 3 elements (the list, form and contact page), and then create new elements that will match the template design.
The basic template page uses a green theme, seen below:
The NeXTensio list and form, as well as the contact form will replace the section containing text in the image above. However, none of the existing skins match the selected design. None of the skins use green for buttons or backgrounds.
The finished application must display links as buttons, and the button styles must match the general design: to use some green on the background.
The easiest way to start when creating a new skin is to start from an existing one, and modify its elements to integrate it into the design, as shown in the User Manual. The skin used as a basis for this tutorial is the Aqua skin.
The first step to take before starting any work is to identify the elements you need changed. To accomplish this, open the pages in the browser, and decide which elements must be changed for each of them:
For the NeXTensio List: all buttons on the page: the buttons that replace the edit and delete links, the top and bottom rows buttons for adding a record, editing and deleting multiple records, and the navigation buttons.
For the NeXTensio Form:all available buttons.
For the Contact Form: only the submit button for the form must be changed, to match the rest of the site.
The main focus will be on the buttons. These must be created as images with a photo editing software (Fireworks, Adobe Photoshop etc), based on the site color scheme.
To find out how many and what size the new images must be, open the includes/skins/aqua/images folder. In this folder, all images used for the skin are stored: buttons, backgrounds, widget and error elements. The files that pose the most interest at this point are:
button_big.gif - it is displayed as the buttons on the top and bottom row
button_small.gif - which is not used in the current skin
button_smallest.gif - used for all other buttons on the list, form and contact form.
In order to see exactly which files are used by the skin and in which manner, simply note down the styles used by the different elements as shown by Dreamweaver, and then open the nxt.css file - for the NeXTensio list and form, and the tng.css file - for the contact form. Locate the style classes noted earlier, and check the files that are used.
For example, the Add new link on the NeXTensio bottom and top row uses the KT_bottombuttons class. This class is defined in the nxt.css file, as follows:
.KT_tng .KT_tngform .KT_topbuttons input, .KT_tng
.KT_tngform .KT_bottombuttons input{
font-family: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
font-size: 12px;
width: 110px;
height: 20px;
border: 0px;
background-image: url(images/button_big.gif);
background-position: 0% 50%;
}
As you can notice from the code above, when viewed as buttons, the image used is images/button_big.gif. The path is relative to the CSS file, therefore the actual folder is the one specified earlier. Another important element supplied by the CSS code is the size of the image to use. In this case, the image to use for the button must have a width of 110 pixels, and a height of 20 pixels.
Do the same for the other buttons, to discover the file names and sizes
The edit and delete links shown next to each record in the NeXTensio list use the button_smallest file, with the following size: width: 50 pixels and height 20 pixels.
Once the required elements for the customization are identified, you can start creating them. If using the template provided with the tutorial, the button replacement images are also provided in the zip package.
Once the new images for the buttons are created, you can start creating the actual skin, and applying it onto your site.