[ Send this article ]
Your message has been sent.
How would you like to send this article:
[ Save this article ]
Save this article to your account for easy access.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
Complete the form below to send this article, Adding a Random Background Image to your Joomla! Template, to a friend (or to yourself). We will never share your details (or your friend's) with anyone. For more information, read our Privacy Policy.
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:
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:
Once complete, you should receive a confirmation message:
Setting relevant permissions for installing the module
If you have problems installing the module, you may receive an error message like the following one:
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:
-
From the list of available extensions on your website, you'll need to check the box next to the Background extension:
-
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.
-
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.
-
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:
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:
-
Customizing search Module and search Component using Joomla! 1.5 [article]
-
Using Javascript Effects to enhance your Joomla! website for Visitors [article]
About the Author :
Richard Carter
Richard Carter is a front-end web developer with a passion for integrating designs in a range of open source e-commerce and content management systems, including Magento, MediaWiki, Joomla!, and Drupal. His expertise has led clients including University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk, to consult his knowledge on open source systems.
Richard is 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 at twitter.com/RichardCarter.
Post new comment