Joomla! 1.5 Templates Cookbook

Joomla! 1.5 Templates Cookbook

Overview of this book

Templates in Joomla! provide a powerful way to make your site look exactly the way you want either using a single template for the entire site or a separate template for each site section. Although it sounds like an easy task to build and maintain templates, it can be challenging to get beyond the basics and customize templates to meet your needs perfectly.Joomla! 1.5 Templates Cookbook consists of a series of self-contained step-by-step recipes that cover everything from common tasks such as changing your site's logo or favicon and altering color schemes, to custom error pages and template overrides. It starts off with the basics of template design and then digs deep into more complex concepts. It will help you make your site more attractive and user-friendly. You will integrate your site with various social media such as Twitter and YouTube; make your site mobile-friendly with the help of recipes for creating and customizing mobile spreadsheets; and use miscellaneous tricks and tips to get the most out of your website. You get all of this in a simple recipe format that guides you quickly through the steps and explains how it all happened.

Joomla! 1.5 Templates Cookbook

Credits

About the Author

About the Reviewers

Preface

Free Chapter

Joomla! Theming Basics

Introduction

Finding the current default template

Locating Joomla! templates in your website's hierarchy

Understanding Joomla! templates

Changing your template's color variation

Adding a color variation

Changing your template's logo

Selecting the default Joomla! template

Editing the HTML template in the administration panel

Editing CSS in the administration panel

Custom Joomla! Templates

Introduction

Installing a Joomla! template

Understanding Joomla! template positions

Understanding jdoc statements

Understanding the templateDetails.xml file

Styling for component.php

Adding a custom favicon to your template

Styling Joomla! error messages

Styling Joomla! error pages

Theming the Details

Introduction

Styling the search module

Styling the search component

Using template overrides in your Joomla! template

Customizing the breadcrumb

Styling pagination

Linking back to the top of your page

Adding a random background image to your Joomla! template

Custom Page Templates

Introduction

Understanding Module Chrome in Joomla!

Customizing the error page in Joomla!

Creating a custom site offline page

Styling Joomla! for Print

Introduction

Starting your print stylesheet

Adding a print stylesheet to Joomla!

Typography for your Joomla! print stylesheet

Styling the layout of your Joomla! template for print

Styling content for print

Styling links for print

Preventing common bugs in print style

Joomla! Admin Templates

Introduction

Understanding Joomla! administrator templates

Installing a Joomla! administrator template

Changing the administrator template

Changing the logo in an administrator template

Changing the colors in the administration panel

Securing the administrator URL

Changing the icons on the Joomla! administrator dashboard

Joomla! administrator template icon graphics

Social Media and Joomla!

Introduction

Integrating Twitter with Joomla!

Integrating AddThis social bookmarking tool with your Joomla! template

Embedding YouTube and other videos in your Joomla! website

Configuring the DisQus Comments extension for Joomla!

Integrating Facebook into your Joomla! website

Styling Joomla! for Mobiles

Introduction

Adding an iPhone icon

Designing stylesheets for mobile devices

Specifying a separate stylesheet for mobile browsers

Creating a mobile stylesheet

Installing the MobileJoomla! extension

Joomla! and JavaScript

Introduction

Including a JavaScript file in your Joomla! template

Tips and tricks for minimizing page load time when using JavaScript

Maximizing backward compatibility with JavaScript

Providing Internet Explorer 6 with transparent PNG support in your Joomla! template

Installing the jQuery JavaScript library in Joomla!

Creating an image slideshow with JavaScript in Joomla!

Miscellaneous Joomla! Templating

Introduction

Comparing your template across different browsers

Validating your template's (X)HTML

Validating your template's CSS

Using conditional stylesheets in Joomla!

Fixing the double-margin bug (in Internet Explorer) in Joomla!

Installing Google Analytics

Joomla! Output Overrides

Introduction

Customizing Joomla!'s home page with module output override

Customizing Joomla! articles with component template overrides

Creating a new module style (chrome) in Joomla!

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Changing the colors in the administration panel

After changing the logo, the next noticeable touch you can make is change the color scheme used in your Joomla! administrator panel.

Getting ready

Open your administrator template's general.css file in preparation for editing it (we'll be using the Khepri template in this example; other administrator templates tend to retain the use of template.css for the bulk of their style).

How to do it...

1. Our aim is to change the blue-colored elements used in this administrator template to match the green theme that we're using. In general.css, you need to locate the .header class to affect the color of the heading.
```
div.header {
font-size: 22px;
font-weight: bold;
color: #58962A;
line-height: 48px;
padding-left: 55px;
background-repeat: no-repeat;
margin-left: 10px;
}
```
2. Next, style the other blue elements by doing a find and replace on #0B55C4, the RGB hex value for the blue used in the document, for your new green color, which is #58962A. In particular...

Joomla! 1.5 Templates Cookbook

Joomla! 1.5 Templates Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

Joomla! 1.5 Templates Cookbook

Changing the colors in the administration panel

Getting ready

How to do it...