Adding a Random Background Image to your Joomla! Template

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

(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

(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:


Books to Consider

comments powered by Disqus