Joomla: Custom background installation.

Leave a comment

February 8, 2013 by aubreykloppers

I first uploaded the images I wanted to add as a custom background each in a seperate folder into the /images/background

Example:
Let’s say I want to use a picture called rail_img.jpg.
Create a folder called rail in /images/background/, then upload the picture in this new folder.

Next go to the css/background folder and copy the street.css file. Next rename it, and edit the contents. Upload this file to /css/backgrounds

Example:
Copy the street.css file, and rename it to rail.css
Open the file and change

#page {   
    background: #9FC3D1 url(../../images/background/street/street_img.jpg) 50% 50% no-repeat fixed;  
    background-size: cover;  
}

to

#page {   
    background: #9FC3D1 url(../../images/background/rail/rail_img.jpg) 50% 50% no-repeat fixed;  
    background-size: cover;  
}

Finally, upload this file to /css/backgrounds

Okay, last step.
Open the config.xml file and find the following:

<field name="background" type="list" default="gradientblue" label="Background" description="Select the background.">  
        <option value="gradientblue">Gradient Blue</option>  
        <option value="gradientgreen">Gradient Green</option>  
        <option value="gradientgrey">Gradient Grey</option>  
        <option value="ambientpink">Ambient Pink</option>  
        <option value="ambientturquoise">Ambient Turquoise</option>  
        <option value="ambientsunset">Ambient Sunset</option>  
        <option value="wood">Wood</option>  
        <option value="street">Street</option>  
        <option value="grass">Grass</option>  
        <option value="desert">Desert</option>  
        <option value="bridge">Bridge</option>  
        <option value="animated:default">Animated Default</option>  
        <option value="animated:red">Animated Red</option>  
</field>

Add your background to the list by inserting the following between the field tags

<option value="rail">Rail</option>

It is important that the value matches the name of the css file you created earlier.

That was the final step. If everything worked out your background should now be listed in the template settings.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: