HD-Background Selector module for Joomla 2.5
|
Select a different background image, colour or pattern for each page on your Joomla website with the Background Selector module.
|
 |
|
what is this? | what's the point? | after installing | will it work on all templates? | module position? | include in article?
What is this?
HD-BG Selector is a simple module that allows you to apply a different background style to individual pages on your Joomla website. You can select background colours, images or repeated patterns. It can be applied to the main background or to specific elements (eg. module positions, columns, headers, footers, main content box, etc) on your site.
What's the point?
Joomla's templates generally have the same background style for each and every page. By applying this module to a specific page the background can be styled individually from the others, increasing the variety of your design without resorting to using multiple templates.
The module is similar to the HD-Custom CSS module but the parameters save you the time of typing out the individual CSS instructions. The background images are also pulled from the main "images" folder (or with Joomla 1.5, the "images/stories" folder) allowing you to upload images via the default media manager rather than by FTP.
What to do after installing?
Install the zip file via the administration install manager as per any other plugin. Once it has installed go to the module manager and select BG Selector. Enable the module and allocate to any module position on the menu item(s) you require.
By Default the "ID" is set to "body" meaning it will apply the style to the main body tag. For most templates this is the best place to store the background style. If the template you use conceals the body tag with a different CSS element (eg. hiding the body behind an element called #container) then change the ID (eg. change to #container). You can also use the ID to target other CSS elements on the template such as a column, a header, a footer and the main content panel.
Select the Background Image from the drop down selection box. For Joomla 1.6 and above this displays all the images stored in the main "images" folder, for Joomla 1.5 this displays the images stored in the "images/stories" folder. To add an image to the list simply upload the image (using the media manager or an FTP client) to the appropriate folder.
The following three drop down boxes determine the background image position (left, center, right, top or bottom), the attachment (whether the image will scroll with you when you scroll down the page or remain fixed) and the repeat value (no repeat, repeat horizontally only or repeat vertically only).
The colour box allows you to enter the background colour as either a predifined name (eg. "blue"), a hexidecimal value (eg. "#ff0000") or an RGB value (eg. "rgb(0,0,255)"). All background colours are always applied behind a background image.
Finally, the additional CSS box allows you to apply any additional CSS to the same page.
Will it work on all templates?
By default the module replaces the style applied to the "body" tag. With some templates the body tag may be concealed by other elements. In which case changing the ID to the correct element ID should overcome this.
Does it matter which Module Position I set it to?
If you have any problems setting the module to appear in a specific module position try creating a new module position. Go to Template Manager > choose your template > Edit HTML. Then insert the following line before the closing </head> tag.
<jdoc:include type="modules" name="css"/>
Then when allocating a module position to the Background Selector module, type "css" in the module position box.
How do I apply the module to an Article rather than a Menu Item?
In the article content include the following line at some point on your page...
Replacing X with a unique identifier of your choice.
Then when allocating a module position to the Background Selector module, type the identifier in the module position box, set the module to appear on "all pages" then clcik on apply or save.