Chapter 3 [ 57 ] Joomla! Templates are usually packaged up in a zipped format and installed using the built-in Joomla! upload / unzip feature. They come in all shapes and sizes and are designed in such a way that when they are installed and activated, they will display your Joomla! content with their designated structure and design: Using templates has a number of benets, including: A new template can be applied instantly to your website content. This exibility means a completely different design may be given to your website with little effort. Multiple styles can be applied to your website by using a number of templates. If you are looking to provide different design layouts to different areas of your CMS, then this is an important feature. The template contains all CSS and website styling. This is all self-contained and can include overrides. By going into your "Templates area", you can easily make adjustments to your current template, and include custom changes into this folder, protecting the "Core Joomla! Framework". An important styling element of a Joomla! Template is the CSS. These .css les contain important layout and style information, which contributes to your Joomla! website design. Template CSS Cascading Style Sheets are a web developer's best friend! They provide us with the opportunity to be completely consistent with our site styling, and provide additional layout and design options than plain HTML usage can offer. • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Text, Characters, and Fonts in Your Joomla! Site [ 58 ] Before CSS was used, nearly all of the styling in an HTML document was contained in the HTML code. Color, layout, styling, fonts, among others had to be specically listed in the code, often repeatedly throughout the HTML document: <html> <body> <p><font size="2" face="Verdana"> This is a paragraph of text. </font></p> <p><font size="5" face="Times" color="red"> This is another paragraph. </font></p> </body> </html> Here text is styled using an older HTML method, where the styling is within the HTML code. By using a CSS method, it allows us to put most of this styling information into a separate document ( .css le). This information can be referenced in the HTML easily, resulting in a more efcient process and considerably simpler HTML code. The HTML code is as follows: <html> <body> <p>This is a paragraph of text.<p> </body> </html> The CSS code is as follows: p { font-family:Helvetica ,Arial,sans-serif; font-size: 1em; color: #000000; text-align: left; width: 100%; } The previous HTML and CSS code shows the styling of a p tag. CSS information can be embedded into the HTML document, but for a Joomla! Template it is usually included in a separate document. Quite often Joomla! Templates contain multiple CSS les to separate the design elements. When using CSS, a separate stylesheet for a handheld device may be used to accommodate the This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 3 [ 59 ] smaller screen resolution, a custom stylesheet could be used just for the Internet Explorer 6 browser, and so on. Your Joomla! Template can contain coding to tell the browser what stylesheet to load in, depending on what type of appliance the user is viewing your website with. The Joomla! Template CSS le is usually located in the following directory /templates/yourtemplate/css/template.css. If you are using a pre-built Joomla! Template, you may see multiple CSS les inside the CSS directory. It is important to note that the names of these CSS les may differ between Joomla! Templates, but the template.css le is the standard naming convention for the main CSS le. Certain WYSIWYG editors rely on this naming convention to work correctly. We could devote a whole book to the complexities of CSS. For this chapter, however, we are just going to highlight the font property, and its available values. CSS font properties Let's take a look at the numerous properties we can manipulate the text with when using CSS: Font family The font family property is a prioritized list of font names for an element. It is possible (and good practice) to specify more than one font typeface in case the user does not have the font you are specifying loaded on their computer system. In CSS, your browser will use the rst font that it recognizes; hence we always list our font families in a priority order: body { font-family: Arial,Courier,sans-serif; line-height: 1.3em; margin: 0px; font-size: 12px; color: #333; } This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Text, Characters, and Fonts in Your Joomla! Site [ 60 ] In the previous example, the font Arial will be used ahead of the font Courier. There are two types of font-family values: 1. Family Name The name of the font typeface. For example: Helvetica, Courier, Arial. 2. Generic Family The name of one of the ve generic font categories. For example, serif, sans- serif, and so on. In a Joomla! Template CSS le, the font family is usually applied to the body tag. This species a main font to be used for your website body text. If you require additional styling to other Joomla! text elements, then we dene those accordingly using further CSS. body { font-family: Arial,Helvetica,sans-serif; } In the previous example, the browser will look for the font Arial, then Helvetica, and if for some unknown reason the user didn't have those fonts installed on their computer device, then the browser would substitute an available sans-serif font to use. Where you use font families having more than one word in the name, it is important to surround these font names with double quote marks. While some browsers can read these fonts without the quote marks, problems can occur if the white space in between the words is considered or ignored. body { font-family: Arial,"Times New Roman",sans-serif; } Note the Times New Roman in quotation marks. Font size The font size property in CSS sets the size of your text. Font sizing methods that you can utilize in CSS can either be of absolute (xed), or relative size. 1. Absolute: Sets the text to a specic size Absolute sizing is useful if a xed output or container is known. Using this method you can get the text to sit exactly as you wish into that dened area. ° ° This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 3 [ 61 ] Does not allow the user to adjust the text sizing in some browsers. For this reason it is considered poor for accessibility. 2. Relative: Allows the user to change their text size in all browsers. The font size is based off the default font setting in the browser. The user can change this default value if they wish. Sets a size of the text that is relative to the surrounding elements. The debate regarding which method to use is as on-going as which font typeface is best for the screen. Specifying in pt or px (absolute methods) has been classied as non-W3C accessible, but allows you to style text in a conned container with more design control. If the layout of your text is important, then you may require this styling method to align your text as you wish. If text can just spill out on the page and be resized by the user if required, then relative is the preferred and accessible method of managing font size. Relative sizing can be done using em measurement or % (percent). As a general rule: 1em = 16px = 12pt = 100% Meet the units In CSS there are four different units with which we can measure the size of the text as it is displayed in the web browser. Setting the text size using em To cater for all browsers and retain accessibility standards on your website, most designers are trying to adopt the em relative text sizing method. This is the preferred text resizing method by the W3C standards. The way em sizing works is: 1em is equal to the current font size of the element in question. If you have not set a font size in other areas of your CSS, then it will take the user's default browser font size. The default text size in browsers is 16px, and usually a font such as Arial font or Times. This means the default size of 1em = 16px. If you were to set a font size for the body, say 18px, then 1em = 18px. ° ° ° ° This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Text, Characters, and Fonts in Your Joomla! Site [ 62 ] For general body text, you may see something similar to this Joomla! CSS le: body { font-family: Helvetica,Arial,sans-serif; line-height: 1.3em; margin: 0px 0px 0px 0px; font-size: 12px; color: #333; } Once the main body text font size has been specied, as in the previous example, other text elements in your CSS can then be set relative to this using em's: h2, .contentheading { padding: 0; font-family: Arial, Helvetica,sans-serif; font-size: 1.4em; font-weight: normal; vertical-align: bottom; color: #333; text-align: left; width: 100%; } Setting the text size using percent Sizing using percentages works, as you would probably expect a percentage to work. Just like em's, using a percentage styling method is relative. If the parent item has a font size of 24px, and the child has a percentage of 50%, then it will be displayed with font size of 12px. Just like em's , one popular technique for sizing using percentages is to set a parent font size on the body of your CSS, and then use percentages for all other styling. Everything will be relative to that one parent size which is set: .tool-text { font-size: 95%; margin: 0; } This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 3 [ 63 ] Setting the text size using pixels Pixels are xed size units that are used in screen media. One pixel is equal to one dot on your screen and when using pixels to size your text you are telling the browsers to render the text exactly that number of pixels high. Using pixels to dene our text size provides us with excellent control over the size and layout of the text. Using pixels, however, does not allow the ability to scale upwards for visually impaired users, nor scale downwards for mobile devices. Sizing your text using pixels will allow browsers such as Firefox and Safari to still retain some text control, but when viewing with Internet Explorer 6 the user will not be able to resize this absolute styled text. All in all, setting font sizes with px is an accurate method, but do take into consideration the IE 6 lack of accessibility. Setting the text size using points The unit of points (pt) is usually associated with print media. Points are much like pixels in that they are of xed size and cannot be scaled to size. Just like pixels are accurate for screen resolutions, points are accurate on paper. 72pts = one inch It is not good practice to use pt styling for your Joomla! Template CSS, but it would be good to use points when creating a separate print.css stylesheet. An example of print CSS may look like: body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; } Font style The "font style" property sets the style of your specied fonts. The values are: Normal The browser will display a normal font style Italic The browser will display an italic font Oblique The browser will display an oblique font • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Text, Characters, and Fonts in Your Joomla! Site [ 64 ] When written down in the CSS, the font-style property may look like this: body { font-style: italic; } Font weight The font weight property sets the width of the font. For example, how thick or thin the text should be displayed. The values are: Normal Denes normal characters Bold Denes thick characters Bolder Denes thicker characters Lighter Denes lighter characters You can also use the values: 100-900. This method denes thick to thin characters and offers a further level of control. As an indication, the value 400 is the same as normal, and the value 700 is the same as bold. p { font-weight: bold; } Using CSS, it is possible to dene each of the font properties within your document, or you can dene all of the values into one shorthand property. This is called simply font. The "font" property in CSS can include the "line-height" value. This element allows you to set the space between the text lines: p { font: italic bold 900 12px/14px arial; } • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 3 [ 65 ] Alternative methods to use custom fonts in your web pages So, we really like a specic font and wish to use this for our menu or heading, but we know that the reader won't have this installed on their computer system. What can be done? One of the most popular methods is to use images in place of the text. By using an image method, you can design your typeface in a graphics program (in the font of your choice) and then put that into your website page. This means that the user ends up viewing the words in your selected font. For Joomla! Templates, you will often see this method used for menu and module icons, among others. Image replacement techniques can also be performed using a PHP / JavaScript Library called FaceLift Image Replacement (FLIR), pronounced "eer". This technique automatically replaces any text on the web page with an automatically generated picture if the font is not found on the user's machine. FLIR is open source and doesn't require other tools to be used on the server, nor any plugins to be loaded on the user's browser. FLIR requires PHP and the GD Image Library to be installed on the server. The following is an example of FLIR in action on the home page at http://facelift.mawhorter.net. Scalable Inman Flash Replacement (sIFR) is another method of replacing short passages of plain text, with that rendered in the font of your choice. The sIFR method uses a combination of Flash, JavaScript, and CSS. sIFR is a new technology growing in popularity. sIFR is also open source, and requires the Flash player plugin to be installed in the reading browser. Initiatives for real-time downloading of specic fonts to the user's browser are being developed and browser support being phased-in, and I'm sure in the near future will be available. There are even a number of sIFR extensions now available for Joomla! These will be mentioned in the following sections. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Text, Characters, and Fonts in Your Joomla! Site [ 66 ] Joomla! text and typography extensions The majority of professional Joomla! Templates now available have "Typography" and text / font features built directly into them. Pre-congured class styling have been included into the CSS sheets, allowing the end user a vast array of text styling at their ngertips. From administration driven "What font do you want to use?" parameters, through to included .class styling, your template can take on a stunning new text look with small changes: The majority of modern professional Joomla! Templates now contain pre-styled typography options which provide style and interest within your site pages: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 . Brick, , 08724 Text, Characters, and Fonts in Your Joomla! Site [ 66 ] Joomla! text and typography extensions The majority of professional Joomla! Templates now available have "Typography". Drive, , Brick, , 08724 Text, Characters, and Fonts in Your Joomla! Site [ 62 ] For general body text, you may see something similar to this Joomla! CSS le: body { font-family: Helvetica,Arial,sans-serif; . "Core Joomla! Framework". An important styling element of a Joomla! Template is the CSS. These .css les contain important layout and style information, which contributes to your Joomla!