Customizing Themes
|
| To customize a PostNuke theme, you need a clear understanding of HTML. If you feel your knowledge of standard HTML needs some brushing up, try browsing W3Schools (www.w3schools.com) for a good start. PostNuke 0.75 and its themes are fully compliant with the HTML 4.01 Strict definition. It's important that you at least maintain that standard. PostNuke is also compatible with XHTML standards, and it's possible to code entirely new themes in XHTML. The main area of XHTML in which PostNuke is more transitional is in its heavy use of tables. Although the newer standards are desirable, it was decided that a browser-compatible layout still requires tables. Any theme you edit should be fairly compliant, and you should code to XHTML standards whenever possible. The following sections provide a quick run-through of key definition rules. Crash Course in XHTMLThe following rules are very easy to implement and are fully backward compatible with older standards. You should adhere to these specifications whenever possible, even if you are only making a minor change to customize an existing theme. Tip You can check the quality of your XHTML for free by using the World Wide Web Consortium's (W3C) Markup Validation Service at validator.w3.org. Formatting RequirementsAll elements and attribute names must be written in lowercase: Correct: <a href="mypage.html"> Incorrect: <A HREF="mypage.html"> All tag pairs must be properly nested: Correct: <b><i>Welcome to MySite.Com</i></b> Incorrect: <b><i>Welcome to MySite.Com</i></b> All elements must be closed. Single tags must close themselves: Correct: <p>Content within a nonempty element pair.</p> Correct: <li>The first item in my list.</li> Correct: <img src="/books/1/160/1/html/2/my.gif" width="25" height="55" border="0" alt="picture of me" /> Correct: This is content before a line break.<br /> All attribute values must be encased in quotation marks: Correct: <table border="0" cellpadding="10" cellspacing="10"> Incorrect: <table border=0 cellpadding=10 cellspacing="10"> Attribute/value pairs cannot be minimized, or in other words, every attribute must have a stated value. Correct: <option value="somevalue" selected="selected"> Incorrect: <option value="somevalue" selected> Correct: <input type="checkbox" checked="checked"> Incorrect: <input type="checkbox" checked> Tip As in the previous examples, if an attribute does not have multiple values, use the common shortened name as the value. The Name attribute is now replaced by the id attribute: Correct: <input type="checkbox" /> Incorrect: <input type="checkbox" name="sendemail" /> Required ElementsThe <head> and <body> elements can no longer be omitted, and the <title> element is now a required element within the <head> element. PostNuke generates these tags for you automatically, so unless you are developing a hybrid site with static pages, these required tags should not be an issue. All XHTML documents must have a DOCTYPE declaration. PostNuke generates an HTML 4.01 Transitional Document Type Definition (DTD) DOCTYPE declaration by default for all pages. The declaration appears at the top of every page and specifies the constraints on the page code. The HTML 4.01 Transitional allows pages displayed by PostNuke to use any HTML elements in the strict 4.01 DTD and any deprecated elements and attributes, which used to be standard but are being phased out of the specification. PostNuke 0.75 itself is compliant with both 4.01 Strict and most XHTML specifications, but to be certain PostNuke works for users who might not be completely familiar with the standards, the weaker Transitional DTD has been used. Deprecated ElementsDeprecated elements are no longer in current XHTML specifications. Backward-compatible browsers still support these elements, but when you write new XHTML code, you should stop using the deprecated elements if at all possible. The following Table 10.1 lists the major deprecated elements to look out for and includes modern alternatives you can use instead.
Deprecated AttributesSimilar to the preceding list of tags, some element attributes are now deprecated and should be replaced with cascading style sheet (CSS) equivalents. Some older attributes do not have direct CSS replacements because they violate the markup philosophy.
Cascading Style SheetsXHTML uses the same style sheets you should already be applying to your HTML. CSS1 is widely supported and should be very safe to use. CSS2 has good but incomplete support among the current browsers. If you want to use CSS2 elements, you need to consider the browser flavors and versions used by the majority of your site visitors to ensure viewing consistency. Tip You can check the quality of your CSS for free by using the W3C CSS Validation Service at jigsaw.w3.org/css-validator/. A table of current browsers showing which CCS2 elements are supported can be found here: www.quirksmode.org/dom/w3c_css.html. Older browser support is detailed at this address: www.devx.com/projectcool/Article/19813, and an extensive matrix of CSS properties and browsers is here: www.csscreator.com/attributes/. Editing ThemesNow, you perform a series of changes to one of the core PostNuke themes included with your installation. Editing an existing theme that's close to your needs is always easier and faster than developing a new theme from scratch. But, no one wants to have a website that looks exactly like hundreds of others. Thankfully, it only takes a few simple changes to give your site a unique look. First go to the theme directory on your server, /themes/, and look through the list of themes. pnDefault is meant to be a template theme for you to build upon; it is the only Xanthia theme included with PostNuke that incorporates all of the XTE features. The other themes are ports of older PostNuke themes, but the conversions only used the Xanthia features necessary to duplicate the original designs. You can use the other themes as additional examples of how themes can be built, but use the pnDefault source if you want to be certain all of the in-browser configuration options are available. Copy the entire directory tree of the pnDefault theme. Name the copy "TestTheme," or use some other theme name if you have a design already in mind. Now browse your site, and go to the Xanthia Administration page. Click the View Themes link and you see the table of themes, only now an additional theme called TestTheme is listed. It's currently inactive, so click the Add Theme link. Tip Don't develop directly on your active theme. Your site visitors might become confused, and if you save a theme error, you could break your site. Instead use the theme preview option: /index.php?theme=yourtheme. You can see from the View Theme feature under Actions (Figure 10.3) that the new theme works but looks exactly like the PostNuke theme. You use the built-in tools to create and polish a variant of this theme so you can see how it's done. Leave an extra browser window open and pointing to the View Theme URL: http://www.yoursite.com/index.php?theme=TestTheme. After you have made a series of changes to the theme, you simply need to click Reload on that browser, and you can view and test your alterations (see Figure 10.5). Figure 10.5. Testing the pnDefault duplicate. From the Xanthia Administration Menu, select Edit Theme and then click Block Zones. Notice how the new theme name is already applied to the different screens. Xanthia themes are titled purely from their root folders' names. Review the list of zones already defined for you. On this page, you can delete those in the listing or name new zones. You can ignore this area for the time being. Next enter the Theme Zones page. These zones are defined mainly in terms of their positioning on the page and not their function, with the exception of the News zones. Some of these zones are required for the theme to work, but others are additional zones you can optionally use to make more uniquely designed areas in your theme. The Configure link provided for each zone only allows you to change their assigned template. To make more extensive changes, you need to change existing templates or create new ones in your XHTML editor, which you can then assign to a zone on this page. The third link in the navigation bar, Theme Templates, is designed to let you make quick changes to the live template files. Editing files through the web form changes the database entries, but those changes are wiped out when you reload the templates from the theme's source files. To prevent this, make your changes to the source files directly, and click the Reload Templates function to update the site. All template files for our TestTheme are located in: /themes/TestTheme/templates/ Figure 10.6. pnDefault provides Block Zone examples. The first change you make is to remove the gradient image in the page and block headers. Later, you set new color variables for the theme, and you can't change an image's color using the web form. To ensure everything matches, the image has got to go. The file is called bar_back_horizon.gif. It's referenced in only one theme template file, master.htm, and in seven of the block templates. Tip You can easily track down code references to images using your browser and a good editor. Right-click an image and view it in Mozilla, or use the Save As option in Microsoft Internet Explorer to determine the image's filename. Then open all template files in your editor and perform a search across all files for the name. You instantly see which files include references to the image you see in your browser. Open master.htm in your editor. About 40 lines down into the code, you should see this line: <div style="background-color:<!--[$color1]-->;background-image:url(<!--[$imagepath]-- >/bar_back_horizon.gif);width:100%;"> Remove the code starting at background-image and ending with .gif);. The changed line is as follows: <div style="background-color:<!--[$color1]-->; width:100%;"> It now refers only to the color variable you can define using the online tools. The second reference is down near the bottom of the file at about line 139. The line is nearly identical to the previous one; just remove the background-image style. Submit your changes and reload your testing browser. You might need to reload the master.htm template from the preceding table to see changes, depending on your Xanthia settings. The header and footer bars should be a light gray, the default Color1 setting for pnDefault. Notice how the text is a similar gray and hard to read. It's a very good rule of thumb that when using an image background, you should set the color behind it to a similar hue and brightness. If the image fails to load, or if a site visitor turns images off for their browser, your site still works fine and looks similar to what you intended. As a quick fix, this template's Color5 setting is much darker, and you can change both of the previous lines to use it instead of Color1 to fix the readability of the text. You work more in-depth with colors shortly. Return to the Theme Templates page and look at the list of block templates. Just as you did previously, remove the CSS image reference from the following files: dsblock.htm, isblock.htm, msgbox.htm, lsblock.htm, rsblock.htm, tcblock.htm, and bcblock.htm. The HTML in these files is very short and nearly identical. Just replace this line: <div style="background-image:url(<!--[$imagepath]-- >/bar_back_horizon.gif);"> with this line: <div > Save each file, reload the templates, and then reload your test browser. The image header bar on all of the blocks should be gone now, and the blocks all show a white background, as shown in Figure 10.7. The white behind the block title text is due to the page background color; the block titles are currently defined without a color behind the text. Before applying color variables to the templates, you should become familiar with the theme palette. Figure 10.7. pnDefault without hard-coded theme images. Dynamic StylesheetsClick the Theme Colors link in the Xanthia navigation menu. The pnDefault theme conveniently includes seven predefined color palettes. You can develop an entirely new palette, but for now you edit the TestTheme templates to take additional advantage of the colors stored in the database. pnDefault initially has the Shades of Grey palette chosen, but you need something a little warmer, such as the Cream Soda or Autumn palettes. Set one as the current theme palette, and then click the Configure link for that palette. You are presented with the color tool shown in Figure 10.8. Figure 10.8. Xanthia palette editing tool. You change colors by clicking the element button in the top controls, and then clicking a color in the palette wheel on the right. The results of the change are seen in the bottom-left chart. The primary drawback to this tool is that the color wheel only supports the limited "web-safe" color set. Web-safe colors were initially developed to enable web designers to create colors that appeared identical on all browsers and operating system platforms. Advances in video technology and the perpetual desire to have designs with greater depth have significantly reduced the relevance of web-safe colors. You can select a color from the wheel, and then click the Brighter and Darker control buttons, but it can take many clicks to reach more subtle variations. With the background selected, deselect the Red and Green boxes so only Blue is affected. Then click the Darker button until blue reaches F0; it removes blue from the white and makes the background a light yellow. That was a minor color change, but it still took many clicks. You learn other methods for adjusting the colors in Chapter 15, "Customized Themes." You can also change the palette's link colors. The links are the cool browser defaults of blue and violet, but to match the theme better, replace those colors with warmer choices. Click the Link button in the top button panel. Then click on one of the dark reds in the top-right of the wheel. The example colors chart changes automatically to reflect your new color choice. Click the VLink button and select a dark brown from the top of the wheel. Finally, change the Hover color to bright red. Now change the name below the table from "Cream Soda" to "Warm Test" and click the Submit These Colors link. You can rename any palette as easily as changing the colors. Reload your theme test browser window to view the change; you do not need to reload templates to see palette changes. You can see certain areas where the color change did not take effect, such as the blue and black in the header, and the blue Terms of Use text in the footer. That is because those colors are also hard-coded into the theme. Color and images references made directly in files always overrides variables in the database. Figure 10.9. Xanthia palette editing tool. Editing TemplatesAs mentioned previously, template changes are not permanent unless you open the files directly in an editor. Open the master.htm template in your editor as you did earlier. Scroll to about line 29, where you see this code that controls the topmost row on the page: <div ><!--[$ZUPPERTOP]--> -- <a href="http://www.postnuke.com" >postnuke.com</a> - <a href="http://mods.postnuke.com" >mods.postnuke.com</a> - <a href="http://support.postnuke.com" >support.postnuke.com</a> - <a href="http://themes.postnuke.com" >themes.postnuke.com</a> --</div> Remove the PostNuke link content inside the div, and replace it with the datetime call from line 41. Add in a background-color style to the div using the $color6 variable. The finished code should appear something like this: <div style="background-color:<!--[$color6]-->;"><!--[$ZUPPERTOP]--><!-- [datetime]--></div> On the next line is a reference to the file logo_back.gif. This is the image creating the cloud-gradient effect in the blue that remained after applying the new palette. The background-color style just after the image reference appropriately sets the field to the main blue found in the logo_back image, but the color is hard-coded to match the specific blue because it was available in the palettes. You will not use a background image and color5 will do well there, so remove the image references and place the color variable appropriately. After you are done, this line: <div style="background-image:url(<!--[$imagepath]-->/logo_back.gif); background- color:#247ed8;padding:0.1em;width:100%;"> should match this one: <div style="background-color:<!--[$color5]-->; padding:0.1em; width:100%;"> Just below that is a reference to the $ZLOGO Block Zone. No logo has been defined, but add one now. Included in the book's downloadable materials is the file postnuke-logo1.gif. Place the image at this location: /themes/TestTheme/images/postnuke-logo1.gif After the $ZLOGO call, add in an image tag to the new logo like this: <br /><!--[$ZLOGO]--><img src="/books/1/160/1/html/2/<!--[$imagepath]-->/postnuke-logo1.gif" /><br /> Just after the logo are the displaygreeting and datetime spans. We placed a reference to the date at the top of the page already, so that is no longer needed. But the greeting is a nice addition that will also look a little more balanced if aligned to the right where the date is, so replace the date call with the greeting, and remove the extra spans. You need to add a textalign style to the div for everything to flow correctly. These are the original lines of code: <div style="background-color:<!--[$color5]-->; width:100%;"> <span style="float:right;"><!--[datetime]--></span><span class= "boxtitle"><!--[displaygreeting]--></span> </div> That you simplify to <div style="background-color:<!--[$color5]-->; width:100%; text- align:right;"><!--[displaygreeting]--></div> You also do not need the shadow image on line 40 with this example, so change the background-image to background-color with the color5 variable like so: <div style="background-color:<!--[$color5]-->; height:4px; overflow:hidden;"></div> Reload your theme's templates at the main Xanthia themes table, and then refresh your test browser's window. You should see a very clean header done in the palette's oranges, as shown in Figure 10.10. Figure 10.10. Editing your theme's header. The text in the header needs to be formatted, and to do that you need to edit the style.php file in your theme's style folder. Scan through the CSS code in the file; a sample of the code follows: .title { BACKGROUND: none; font-size: {$text}px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none } .content { BACKGROUND: none; font-size: {$text}px; FONT-FAMILY: geneva,arial,Verdana, Helvetica } Note that it is formatted like any other .css file, but using a .php extension allows it to be parsed with PHP variables, such as the $text variable shown in the previous code. Refer to the master.htm file when determining which styles need to be edited. First change the datetime call, which is under the pn-navtabs class. Scroll to about line 253 in style.php and take a look at this entry. The text color is set as a variable, but the background is set to #000000, or black. We overrode this sheet style by coding the background variable directly into the template, but it's still a good idea to clean up the entry here by removing that line. You could alternatively use the variable "._XA_TCOLOR2." formatted similar to the color line below it. Next set the alignment to text-align:right and add text-transform:uppercase and padding:2px to make the text display more uniformly. When you are finished, the style should look similar to this: .pn-navtabs { font-family:Verdana,Arial,Helvetica; color:'._XA_TCOLOR2.'; font-size:{$text}px; font-weight:normal; text-align:right; text-transform:uppercase; padding:2px; } The greeting test is a little too close to the background color, so you edit that style next. You can see the code in line 37 within master.htm, and it shows the boxtitle style is being applied. boxtitle is also heavily used by block templates, so any change made to it here also changes the blocks. But, in truth, the greeting message is different and should have its own style. So to remedy the situation, copy the boxtitle style at line 139 and create a new style called "greeting": .greeting { background:none; color:"._XA_TBGCOLOR."; font-size:{$text}px; font-weight:bold; font-family:Verdana,Helvetica; text-decoration:none; } Change the master.htm code at line 37 to use the new style, and reload the templates to preview your theme. The header's looking good now, but you should fix the footer to match this set of changes. Scroll to the bottom of master.htm, to line 133, and examine the code also shown next: <div style="background-image:url(<!--[$imagepath]-->/dropshadow_up.gif);height:4px; overflow:hidden;"></div> <div style="background-color:<!--[$color5]-->; text-align:center;width:100%;"> --- <a href="modules.php?op=modload&name=Legal&file=index"><span style="color:#A9DDFF;"><!--[pnml name="_TERMS"]--></span></a>-- <!--[$ZSCHANNELBOT]--> </div> <div style="text-align:center;"><!--[footmsg]--></div> Just as in the header, you don't need the shadow image, but this time, remove the entire div. The second div contains the link to the site _TERMS, but it has a hard-coded color reference, and the style of the span around it is also boxtitle. You can fix both problems by creating a new style class called "terms." Use the .greeting style you made earlier as a template. Duplicate the style again to make another entry labeled .footer, and create an Anchor tag variant using inheritance and color1 for the text. Then in master.htm, add a background-color reference using color4 to the footmsg div. You should have these styles: .terms { background:none; color:"._XA_TBGCOLOR."; font-size:{$text}px; font-weight:bold; font-family:Verdana,Helvetica; text-decoration:none; } .footer { background:none; color:"._XA_TBGCOLOR."; font-size:{$text}px; font-weight:bold; font-family:Verdana,Helvetica; text-decoration:none; } .footer A { background:none; color:"._XA_TCOLOR1."; font-size:{$text}px; font-weight:bold; font-family:Verdana,Helvetica; text-decoration:none; } And the master.htm footer code should appear as follows: <div style="background-color:<!--[$color5]-->; text-align:center;width:100%;"> <span >---</span> <a href="modules.php?op=modload&name=Legal& file=index"><span ><!--[pnml name="_TERMS"]--></span></a> <span >---</span> <!--[$ZSCHANNELBOT]--> </div> <div style="background-color:<!--[$color6]-->; text-align:center;"><span ><!- -[footmsg]--></span></div> Reload your templates and take a look at the header and footer together. Both use the palette and go together well, even though there are minimal differences in their formatting. You can use layout differences to add variety and character to your site designs. You take the same path now with the block styles. Xanthia is capable of providing separate custom template styles for every block, but most sites need more minor variation. You will make a left column with a freestanding menu and flowing blocks beneath, while the right column blocks will float on their own. Return to the master.htm template and look over the table beginning at about line 41. This table controls the column formatting for the main content area of every page. Remove the padding:0.5em; from the div around the table; its spacing prevents background changes from locking against the browser sides. The left column is set at line 44, and you can add a background-color style after the width to set the column apart. Use color1 for the change. After the color, add padding:5px; to the column to make up for the earlier padding change. Also add this padding to the center column at line 52 and the right column at line 124. Two spacer images called pixel.gif are set between the three columns at lines 50 and 122 with widths of 15 pixels. Change both images to a five-pixel width, so they have the same formatting they had before the padding changes. Save these changes, reload your templates, and refresh your test screen. It should be similar to Figure 10.11. Figure 10.11. Customizing your column layout. Now, you complete the left column changes by editing the lsblock.htm template file (the name stands for "left-side block"). You can see by looking at your Zone Settings page that the Main Menu has its own template, mainmenu.htm, so changes to the other left blocks do not affect it. The lsblock code is relatively simple compared to the master template edits we have been doing. Remove the background-color reference in the surrounding div; the left column has its own background color now. Two styles are named in the file: boxtitle and boxcontent. Add the word "left" to the end of both; you make two new styles, boxtitleleft and boxcontentleft, to control the appearance of left blocks. Find the two entries in style.php at around line 140. Duplicate them as described previously. You need to add a background-color to the title and adjust its text color accordingly. Slightly change the content area's border to make it fade into the new background color. Apply these changes so that the new styles are as follows: .boxtitleleft { background:none; color:#FFFFFF; font-size:{$text}px; font-weight:bold; font-family:Verdana,Helvetica; text-decoration:none; background-color:"._XA_TCOLOR6."; padding:2px; text-transform:uppercase; } .boxcontentleft { font-size:{$text}px; margin-top:.1em; padding-left:.5em; padding-right:.5em; border-color: "._XA_TCOLOR1."; } Reload your test browser and see how even with minimal changes the blocks are now more a part of the left column than separate entities (example shown in Figure 10.12). Without lines around them or color to differentiate where one block begins and the next ends, the left blocks flow together into a single column. The modular blocks might only be, for the most part, squares laid out on the page, but you don't have to keep it that way. You can blend content areas into an over design with creative placements to create nearly any effect. Figure 10.12. Blending blocks into the background. The final change to this theme formats the right blocks. Keep these areas floating, but even when left in a blocky format, you still have options to the design. Try taking the horizontal band elements and apply them to the separate blocks. Load up the rsblock.htm and check the styles. It is identical to the original lsblock.htm, and needs the same customization changes. Remove the background-color line and change the style class names to "boxtitleright" and "boxcontentright." Match your file's entries to these styles: .boxtitleright { background:none; color:"._XA_TTEXT1COLOR."; font-size:{$text}px; font-weight:bold; font-family:Verdana,Helvetica; text-decoration:none; background-color:"._XA_TCOLOR3."; padding:2px; text-transform:uppercase; } .boxcontentright { font-size:{$text}px; padding-left:.5em; padding-right:.5em; border-top:0px; border-right:0px; border-bottom:5px solid "._XA_TCOLOR5."; border-left:0px; background-color:"._XA_TCOLOR1."; } You can see the effects of these changes in Figure 10.13. Compare the new design with the original shown in Figure 10.5. Throughout this example, you maintained most of the original layout and code, but it's certainly possible to go much further with the edits to produce a more unique theme. The edited theme now also illustrates the power of dynamic style sheets. Apply some of the other palettes included with pnDefault, and you can see how easily the tone of your site can be changed by color alone. Figure 10.13. pnDefault, with minor edits. Of course, if you want to develop a truly customized theme for your PostNuke site, your best bet is development from scratch. In Chapter 15, you examine what it takes to design and develop a new Xanthia theme. |
|
EAN: 2147483647
Pages: 207