#1218 - Adding a theme image
-
By Chris Graham
- Added
- 9 views
| Identifier | #1218 |
|---|---|
| Issue type | Feature request or suggestion |
| Title | Adding a theme image |
| Status | Completed |
| Handling member | Chris Graham |
| Addon | General / Uncategorised |
| Description | Add a new theme image, and show how to reference it from the CSS using the 'IMG' symbol.
A good example might be to add a new background pattern. 1) Find some public domain / creative commons tile graphic 2) Add it as a theme image (Admin Zone > Style > Themes, ...), say call it 'background_tile'. 3) Go to edit the global.css for your theme 4) Find where 'outer_background' is used as a background property. 5) Change 'outer_background' to 'background_tile'. --- Of course this is an odd process as we could have just changed 'outer_background' directly, but I think best to keep examples simple where possible. If you want to do something more elaborate and are confident on it, no problem. |
| Steps to reproduce | |
| Funded? | No |
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".
Comments
add a new theme image :
1) Find a suitable image - Find some public domain / creative commons tile
graphic for your website, try this Google
search to get image ideas
http://www.google.co.uk/search?tbm=isch&q=tile+background
2) Add it as a theme image - Go to Admin Zone > Style > Themes>Manage theme
images, ...), upload your new image and say
call it 'background_tile'.
3) Edit the global.css file - Go to edit the global.css for your theme, which
you should find here :
/themes/yourTheme/css_custom/global.css ,
4) Find 'outer_background' property - Find where 'outer_background' is used as
a background
property in global.css , and change
'outer_background' to 'background_tile' , which is our
new theme image
(Click to enlarge)
(Click to enlarge)
-----------------------------------
Adding a new theme image to your website is a simple process. Following are the steps to add a new theme image:
1. Find a suitable image.
2. Upload it to the site as a theme image through Adminzone >> Style >> Themes >> Manage theme images.
3. Edit the css file through admin zone for applying the uploaded image.
Description with Example:
-----------------------------------------
1. Find a suitable image for your website.
For example, If you want to add a new background pattern for your website then find a suitable one from a public domain/creative commons tile graphic for your website.
2. You can upload an image to your website through Adminzone >> Style >> Themes >> Manage theme images. On the Themes page you can either select the 'Manage theme image' option of the default theme or your own theme(if any). Composr recommended you to create a new theme for adding your changes, so that the integrity of the default theme is not affected.
On the 'Manage theme image' page, select the 'add' button at the bottom section of the page and it will direct to a form for adding a new image to your website theme. Fill the codename for the image and upload it to the website through this form.
For example, For uploading the background pattern image, set the codename field as 'background_tile', add the image file and submit.(image_001.png)
3. For applying the uploaded image to your website theme, you have to edit the css file. You can edit the css file from the admin zone through Admin zone >> Style >> Themes >> Edit CSS. Select the 'Edit CSS' icon of your theme and select the css file to edit. Edit CSS page for the selected file contains a built-in editor for editing the css code. You can edit the css file with the codename of the uploaded image.
For example:
- Go to edit the global.css file in your theme.
- Find where 'outer_background' is used as a background property in global.css.
- And change 'outer_background' to 'background_tile' , which is our new theme image.(image_002.png)
Note: We can reference a theme image from the css using the 'IMG' symbol as "{$IMG;,codename}". eg: {$IMG;,background_tile}