Book Image

Joomla! 1.5 Templates Cookbook

Book Image

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.

Related Content you might be interested in

Current Title:

Small book image
Joomla! 1.5 Templates Cookbook
Jul, 2010 | 236 pages
No titles found
Table of Contents (16 chapters)
Joomla! 1.5 Templates Cookbook
Joomla! 1.5 Templates Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
Preface
Preface
Free Chapter
1
Joomla! Theming Basics
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
2
Custom Joomla! Templates
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
3
Theming the Details
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
4
Custom Page Templates
Custom Page Templates
Introduction
Understanding Module Chrome in Joomla!
Customizing the error page in Joomla!
Creating a custom site offline page
5
Styling Joomla! for Print
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
6
Joomla! Admin Templates
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
7
Social Media and Joomla!
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
8
Styling Joomla! for Mobiles
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
9
Joomla! and JavaScript
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!
10
Miscellaneous Joomla! Templating
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
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!

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. 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. 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...

Previous Section
End of Section 7
Next Section