Bede Music Box

PUBLISHING community experience distilled Joomla! 1.5 Templates Cookbook Richard Carter Chapter No.3 "Theming the Details" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter NO.3 "Them ing the Details" A synopsis of the book’s content Information on where to buy this book About the Author Richard Carter started as a freelance web designer in Leicestershire, England. He founded his current business, Peacock Carter, in 2006. Curr ently, he is the senior frontend web developer and a managing director of Peacock Carter Ltd—a web design agency based in the North East of England with specialist knowledge in open source software for business and organizations across the world. He has worked for clients including Directgov, NHS Choices, and BusinessLink.gov.uk. He tweets from twitter.com/RichardCarter and blogs at earlgreyandbattenburg. co.uk . Richard is the author of MediaWiki Skins Design and Magento 1.3 Theme Design , and has also reviewed MediaWiki 1.1 Beginner’s Guide I’d like to thank Michael, my business partner, for keeping the business running while I was busy writing and researching th e book. A brief “hello” and thanks is also due to Alex, EJ, and Joy . Joomla! 1.5 Templates Cookbook With the widespread empowering of website owners be ing able to manage their own website's content, there are a huge number of conte nt management systems available. Joomla! is one of the most popular of these content management systems with a large user base and active community who are constantly w orking to improve Joomla! for new and future users. With the popularity of Joomla! and the relative lac k of customized templates, there is much that can be done to change the appearance of y our Joomla! website—from customizing the administration panel to creating pr int-friendly views of your website content and integrating popular applications such a s Twitter and Facebook into your Joomla! website. What This Book Covers Chapter 1 , Joomla! Theming Basics , covers changing the basics of your Joomla! templates, from the color scheme using template var iations to your site's logo, and using the administration panel to edit your template's HT ML and CSS. Chapter 2, Custom Joomla! Templates, goes through more detailed templating tasks, from using CSS resets with your template to providi ng a guide to jdoc statements in your Joomla! templates. Chapter 3 , Theming the Details , covers styling search forms at both module and component view to pagination and beyond. Chapter 4 , Custom Page Templates , contains guides on creating custom error and site offline pages, and a walkthrough to module chrome. Chapter 5 , Styling Joomla! for Print , covers everything to do with print stylesheets, f rom typography to layout and troubleshooting common bug s in print CSS. Chapter 6 , Joomla! Admin Templates , contains guides to customizing Joomla!'s administration panel, from installing a new admin t emplate to changing the admin panel's colors. Chapter 7 , Social Media and Joomla! , covers guides to integrating social media content such as videos from YouTube and content from Twitte r into your Joomla! templates. Chapter 8 , Styling Joomla! for Mobiles , provides guides to styling your Joomla! website for mobile devices such as the iPhone, from creatin g handheld devices stylesheets in CSS to adding iPhone icons for your website. Chapter 9 , Joomla! and JavaScript , includes tips on minimizing page load time when using JavaScript in your Joomla! template and integ rating Lightbox and other JavaScript features into your template. Chapter 10 , Miscellaneous Joomla! Templating , includes a miscellany of content for Joomla! template designers, from using conditional comments only for Internet Explorer CSS fixes to fixing Firefox/Mozilla bugs and more. Appendix , Joomla! Output Overrides , covers the use of template overrides in Joomla!. Introduction Although we've seen how to alter much of our Joomla! website, there's still much we can do to improve and polish our Joomla! template to perfection. Styling the search module Joomla! is a powerful content management system that is capable of supporting websites with hundreds and even thousands of pages. When websites become this large, it's often important to provide your website's visitors with a search feature as a means of locating the information on your website that they are looking for. One option that Joomla! provides for your visitors to search your website is the search , which is a block displayed within your template. Theming the Details Identify the assigned to your Joomla! template's search form, which is assigned by a statement within your template's le. In the rhuk_milkyway template—the one that we've been working with—the search feature is assigned to the block by default with this statement: It appears to the top-right of the template: If we now look at the page's HTML source, the HTML generated by Joomla! for the search feature looks like this: How to do it... Chapter 3 2. By adding CSS to change the search eld's state when a visitor focuses within it, you can help improve your Joomla! template by orientating visitors to their whereabouts border-color: #09C /* blue */}3. Once you've uploaded the altered le, you will now see a blue border surrounding the search eld: How it works... By using the , the browser changes the attributes we de ne to make it clearer to our website's visitors that their input device (for example, keyboard) is focused on the search input eld. Theming the Details Understanding Joomla! template positions Styling the search component Styling the search component Al ong with providing the search module, which is embedded within your Joomla! template depending on the module position it is assigned to, there is the Joomla! search component. Firstly, you need to access the search component on your Joomla! website. You can do this by , assuming that your Joomla! installation is installed in the root directory of the rhuk_milkyway template as your currently enabled template, you should see that the search component looks like this: Chapter 3 Ope n your template's primary CSS le; for our example, this is . It is also worth studying the source of the search component page; you'll nd that the search form is contained within a ed with an How to do it... 1. In your template's CSS le ( ), begin by styling the overall form rst: Some browsers do not yet support the property in CSS, so you may just see the search form with squared corners. This changes the look of the search form as follows: 2. Next , you'll style the search query eld, which is identi able by the Theming the Details This helps to distinguish the search eld from the other elds in the form: 3. Lastly, you'll add some padding to the table cells used to lay out the search How it works... By app lying CSS to the relevant elements generated by Joomla!, it's possible to rede ne what the search form provided by Joomla!'s search component looks like. Styling the search module Using template overrides in your Joomla! template Chapter 3 Using template overrides in your Joomla! template You ca n use template overrides in your Joomla! template to rede ne the output HTML that Joomla! creates for the modules and components on your installation. This can be useful when you are unable to achieve the style you want for your Joomla! template with the markup provided in the base template that you are using. In this example, you'll be changing the search component's Search button, as displayed , assuming that you have Joomla! installed at One suc h thing that you may want to change is the Search button. In this example, we'll change it to a so that we're able to use an image for the Search button rather than the browser's default rendering of the w e can see in the previous screenshot. How to do it... 1. Save the search button graphic that you want to use in place of the Search button directory as 2. Next, you need to copy the contents of the le located in directory of your Joomla! installation into the directory. You may need to create the subdirectory and its child directories ( ) if they do not already exist. Locate the line that reads: Theming the Details 3. Replace this line with: 4. Your new search component form now looks like this: How it works... By defaul t, Joomla! looks in a component's own directory within the currently enabled Joomla! template for a custom template override. If Joomla! fails to nd this le, it looks in directory for the relevant le with which to generate the required HTML by the component. Styling the search module Styling the search component Customizing the breadcrumb To start rede ning your breadcrumb's style, open the le for your template; rhuk_milkyway template for this demonstration. This means that your CSS le will be located in the directory of your Joomla! installation. If you visit a page other than the home page in your Joomla! website, you'll be able to see Chapter 3 As you can see, the rhuk_milkyway template de nes the style for the breadcrumb in the le. nes the breadcrumb for the Features page is as shown: How to do it... 1. You can customize the breadcrumb by changing the CSS, and altering the color and size of the breadcrumb's content: Theming the Details 2. Once the altered CSS le has been uploaded, you can see your changes: 3. The next st ep to customizing your breadcrumb is to alter the image used for the separator arrows, located at You'll replace this image with your own new one (which has been enlarged in this image to make it easier to view). 4. Once uploaded, your new breadcrumb looks a little more tting for your website: How it works... without a great deal of work. Styling the search module Styling pagination Chapter 3 Styling pagination Some content in your Joomla! website may run over multiple pages (for example, some search results). By styling pagination, you can again help to distinguish your Joomla! template from others. Theming the Details Our primary i nterest in the previous part is the class assigned to the element that contain s the pagination feature's content. By default, the pagination (as seen on the search results page) looks like this: How to do it... 1. Now that you are aware of the relevant class to style, you can add it to your template's content of your pages: Producing more semantic markup for pagination As you can see in the previous section, the HTML that Joomla! currently generates for the pagination feature is quite verbose—unnecessarily long and untidy. We'll change our template's le to use more semantic (meaningful) HTML for this feature by adding each item to a list item within an unordered list element ( The HTML for pagination is de ned within the le, located in the directory of your template. If you edit this le, remember that you need to escape certain characters such as double quotation marks, that is, . You can mitigate the need to do this by using single quotation marks ( ) rather than double quotation marks ( Other templates using semantic markup that comes with the default Joomla! installation already provides semantically correct markup for pagination. Chapter 3 1. Open the le and you will see four PHP functions (assuming that you are looking within the rhuk_milkyway template), but the function which is of interest to us is the PHP function. Currently, th e code for this function looks like this: Theming the Details &#xli00; $html .= 'li'; &#xstro;&#xng c;&#xlass;&#x="ac;&#xtive;&#x"000; $html .= 'strong class="active"' . $page['data'] . &#x/str;&#xong0; '/strong'; if($page['data']['active']) { &#x/li0; $html .= '/li'; &#xli00;&#x/li0; $html .= 'li' . $list['next']['data'] . '/li'; &#xli00;&#x/li0; $html .= 'li' . $list['end']['data'] . '/li'; &#x/ul0; $html .= "/ul"; 4. If you add the fo llowing CSS to your template's le, everything will be styled as you intended before: Chapter 3 How it works... By applying CSS t o the relevant ed in the HTML for Joomla!'s pagination feature, it's possible to quite drastically alter the pagination's appearance for your Joomla! template. It's also possible to change the HTML generated by Joomla! in some circumstances, as we saw with our template's le. One bene t of changing the HTML that Joomla! outputs is that you can add that make it easier to style elements of your Joomla! website with CSS. Customizing the breadcrumb Linking back to the top of your page If your website c ontains a number of very long articles or pieces of content, it's wise to include back link at the bottom of each page. Open your Joomla! template's le. For the purposes of this example, we'll rhuk_milkyway template, though the technique can be applied to any Joomla! template. How to do it... Theming the Details 2. Create an anchor called above the line where the statement is included in your page: 3. Beneath the statement that includes the content, now add the link to the top of the page: 4. You can now add a little style for your link by de ning CSS for your template's le: Chapter 3 5. Once the changed les have been uploaded, you can see your link appear towards the bottom of every page in your Joomla! website: How it works... statement inserts the page's content into our Joomla! template, so this is where we want to allow our website's visitors to skip back to the top. Giving the value for the attribute in the element (inserted below the content) creates a link to an anchor called within the page, which we create above the content block in the form There's more... There is an extension available for Joomla! that provides similar functionality; it's called Return to Top for Content Items , and is available from the Joomla! website at Downloading the extension requires you to be logged into the extension developer's website. Rather than inserting a Theming the Details Styling the search module Styling pagination Adding a random background image to your Joomla! template In distinguishing your Joomla! template from others, there are a number of extensions for Joomla! to help you, including one that allows you to display a random image as your template's background image for the element . You need to install the extension called Background . You can nd the le's download link on the Joomla! website at . Once you have saved the extension les somewhere on your computer, log in to your website's Joomla! administration panel (if Joomla! is installed Install/Uninstall option from the in the primary navigation: Chapter 3 You will then be presented with a form, from where you can upload the extension's le. le from your computer, and then click on the Upload File & Install button: Theming the Details The error is most likely because two directories on your server do not have cient permissions: Use Joomla!'s FTP layer to manage the necessary le permissions for you. You can edit guration le, which is called , in the root of your Joomla! website. Simply add these variables into the le if they don't exist already: How to do it... 1. Firs tly, you need to enable the extension from Joomla!'s Chapter 3 2. From the list of available extensions on your website, you'll need to check the box next to the Background extension: Theming the Details 3. Now cl ick on the Background 4. Towards the right of the screen, there are options for the extension. Of particular interest to us is the value of the option that we need to change to Yes Chapter 3 5. Once the extension has been installed and enabled, you can upload the images you want to appear as background images on your Joomla! website by using Joomla!'s feature. You can also customize the CSS in the eld to allow the background image to repeat either vertically ( ). When you refresh the frontend of your Joomla! website (that is, not the administration panel), you'll see a random image appear at the top-left of the template. Styling the search module Styling pagination Where to buy this book You can buy Joomla! 1.5 Templates Cookbook from the Packt Publishing website: https://www.packtpub.com/joomla-1-5-templates-cookb ook/book Free shipping to the US, UK, Europe and selected As ian countries. For more information, please read our shipping policy . Alternatively, you can buy the book from Amazon, BN .com, Computer Manuals and most internet book retailers. PUBLISHING community experience distilled www.PacktPub.com