HD-Background Selector for Joomla 3.5

Select a different background image, colour or pattern for each page on your Joomla website with the Background Selector module. You can also use this to apply random backgrounds, multiple overlaid backgrounds or day-specific backgrounds

what is this? | what's the point? | after installing | multiple backgrounds | sniffing | 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.

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.

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.

Multiple Backgrounds

After selecting the main background image there are possibilities under the "advanced parameters" section to use multiple backgrounds. You can use this for the following types of effects...

Overlay Images

This uses the CSS 3 property to apply multiple images on the same element (please note that as this is a recent CSS 3 effect it will not work on older browsers).

Random Images

This will select one of the (up to) seven images you have specified at random.

Daily Images

This will select one image per day in order. The first image is used on Sunday and the seventh image is used on Saturday (please note you will need to apply

an image to each of the image slots for this to work effectively).

Browser & URL Sniffing

Under the advanced parameters section of the module is a "browser sniffer". This functions allows you to only render the module to the screen if the viewer's browser (or device) matches that specified in your module. This means you can target something to appear on a mobile device that won't appear on a desktop.

There's also a URL sniffer, which allows you to render the module on a specific URL page. Click here for more information about URL sniffing.

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.

Also, the module's "Stress Importance" option adds the !important postfix to the CSS. In most cases this overides previous similar CSS instructions.

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 Templates > choose your template > Select index.php. 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...

{loadposition x}

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. Click here for more details on the loadposition command.

Alternatively you can use the URL sniffer module parameter, click here for more details on URL sniffing.