Adding a Random Background Image to your Joomla! Template

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Templates Cookbook

Joomla! 1.5 Templates Cookbook — Save 50%

Over 60 simple but incredibly effective recipes for taking control of Joomla! templates

$23.99    $12.00
by Richard Carter | July 2010 | Joomla! Open Source

With the widespread empowering of website owners being able to manage their own website's content, there are a huge number of content 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 working to improve Joomla! for new and future users.

In the first article we have learned How to Style the search Module and Search Component

In the Second article we have learned How to Customize your Template

In the third article of the article series by Richard Carter, author of Joomla! 1.5 Templates Cookbook we will learn to Add a random background image to your Joomla! template

(Read more interesting articles on Joomla! 1.5 here.)

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

Getting ready

You need to install the extension called Random Background. You can find the file's download link on the Joomla! website at http://extensions.Joomla.org/extensions/style-a-design/templating/6054. Once you have saved the extension files somewhere on your computer, log in to your website's Joomla! administration panel (if Joomla! is installed at example.com, the administration panel is typically accessible at example.com/administrator), and select the Install/Uninstall option from the Extensions option in the primary navigation:

Adding a random background Image to your Joomla! Template

You will then be presented with a form, from where you can upload the extension's .zip file. Select the file from your computer, and then click on the Upload file & install button:

Adding a random background Image to your Joomla! Template

Once complete, you should receive a confirmation message:

Adding a random background Image to your Joomla! Template

Setting relevant permissions for installing the module

If you have problems installing the module, you may receive an error message like the following one:

Adding a random background Image to your Joomla! Template

The error is most likely because two directories on your server do not have sufficient permissions:

  • /tmp
  • /modules

Use Joomla!'s FTP layer to manage the necessary file permissions for you. You can edit Joomla!'s configuration file, which is called configuration.php, in the root of your Joomla! website. Simply add these variables into the file if they don't exist already:

var $ftp_host = ''; // your FTP host, e.g. ftp.example.com or
just example.com, depending on your host
var $ftp_port = ''; // usually 21
var $ftp_user = ''; // your FTP username
var $ftp_pass = ''; // your FTP password
var $ftp_root = ''; // usually / or the directory of your
Joomla! install
var $ftp_enable = '1'; // 1 = enabled

Joomla! 1.5 Templates Cookbook Over 60 simple but incredibly effective recipes for taking control of Joomla! templates
Published: July 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

(Read more interesting articles on Joomla! 1.5 here.)

How to do it...

  • Firstly, you need to enable the extension from Joomla!'s Module Manager in the administration panel:

    Adding a random background Image to your Joomla! Template

  • From the list of available extensions on your website, you'll need to check the box next to the Background extension:

    Adding a random background Image to your Joomla! Template

  • Now click on the Background link to view the extension's settings. Notice that the extension needs to be assigned to a position within your template to function.

    Adding a random background Image to your Joomla! Template

  • Towards the right of the screen, there are options for the extension. Of particular interest to us is the value of the Choose random image option that we need to change to Yes.

    Adding a random background Image to your Joomla! Template

  • 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 Media Manager feature. You can also customize the CSS in the Additional CSS field to allow the background image to repeat either vertically (background-repeat: repeat-y) or horizontally (background-repeat: repeat-x). 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:

    Adding a random background Image to your Joomla! Template

See also

  • Styling the search form
  • Styling pagination

Summary

Congratultions. you have covered a lot of ground in this article.In this article you have learned how to add a random background image to your Joomla! template


If you have read this article you may be interested to view:


Joomla! 1.5 Templates Cookbook Over 60 simple but incredibly effective recipes for taking control of Joomla! templates
Published: July 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North East of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle upon Tyne. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter and @PeacockCarter.

This is his sixth book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt


Mastering Joomla! 1.5 Extension and Framework Development
Mastering Joomla! 1.5 Extension and Framework Development

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

Joomla! 1.5 Site Blueprints
Joomla! 1.5 Site Blueprints

Joomla! 1.5 Templates Cookbook
Joomla! 1.5 Templates Cookbook

Amazon SimpleDB Developer Guide
Amazon SimpleDB Developer Guide

Spring Python 1.1
Spring Python 1.1

Amazon SimpleDB Developer Guide
Amazon SimpleDB Developer Guide

Drupal 6 Panels Cookbook
Drupal 6 Panels Cookbook


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
F
6
8
e
C
q
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software