Info: This was requested by few users in the past, would be good for websites such as movie reviews, game reviews, or any other website which might use background images to express their articles or in a way of adverts. There are plugins available already for such background change however they are commercial products and requires more input and so on...
Template: Game Magazine ( Will probably work on other templates , might need small changes )
Template Version: Joomla 1.7 v2.5
Difficulty: Very Easy.
Mod Settings: Can be switched on / off from Template Features > Advanced Settings >
Usage: Once you have done the mod simply follow below stages.
A: Enable "Background Identifier"
Joomla Admin > Extensions > Template Manager > gk_game_magazine - Default > Advanced Settings > Background Identifier
B: Go to a page where you want to add a background on your frontend. You will see xx.jpg in top of your website. As an example i am going to use 30.jpg
C: Rename your image to xx.jpg depending on your page id and upload your image to joomla root/images/backgrounds/
In my example filename and location will be joomla root/images/backgrounds/30.jpg
D: Do few more if you have to otherwise switch of " Background Identifier " and on the same page enable "Automatic Backgrounds".
That's it.
How it looks :
Mod Template Settings
- Code: Select all
http://i41.tinypic.com/9tjyg5.jpg
Background ID Identifier Enabled
- Code: Select all
http://i39.tinypic.com/2nscto9.jpg
MOD STARTS HERE:
Please backup your files before starting this mod.
1. Adding Mod Settings to Template Features.
Find File: \templates\gk_game_magazine\templateDetails.xml
Find Line: 575 to 578
Which is
- Code: Select all
<field name="cwidth_position" type="list" default="head" label="TPL_GK_LANG_COLUMNS_WIDTH_POSITION" description="TPL_GK_LANG_COLUMNS_WIDTH_POSITION_DESC">
<option value="head">TPL_GK_LANG_HEAD</option>
<option value="style">TPL_GK_LANG_STYLE</option>
</field>
Add below code after above:
- Code: Select all
<field name="backgroundauto" type="list" class="gk_switch" default="0" label="TPL_GK_LANG_BACKGROUND" description="TPL_GK_LANG_BACKGROUND_DESC">
<option value="1">TPL_GK_LANG_ENABLED</option>
<option value="0">TPL_GK_LANG_DISABLED</option>
</field>
<field name="backgroundhelper" type="list" class="gk_switch" default="0" label="TPL_GK_LANG_BACKGROUNDHELPER" description="TPL_GK_LANG_BACKGROUNDHELPER_DESC">
<option value="1">TPL_GK_LANG_ENABLED</option>
<option value="0">TPL_GK_LANG_DISABLED</option>
</field>
2. Adding required language strings to templates language file.
Find File: \language\en-GB\en-GB.tpl_gk_game_magazine.ini
Find Line: End of document
Add below strings:
- Code: Select all
TPL_GK_LANG_BACKGROUND="Automatic Backgrounds"
TPL_GK_LANG_BACKGROUND_DESC="You can have different background images based on article or menu ids"
TPL_GK_LANG_BACKGROUNDHELPER="Background Identifier"
TPL_GK_LANG_BACKGROUNDHELPER_DESC="Displays article id for you to easily identify article or menu ids so you can rename your images"
3. Adding php code for background change condition.
Find File: \templates\gk_game_magazine\layouts\blocks\head.php
Find Line: 55 to 57
Which is:
- Code: Select all
if($this->getParam("css_custom", '') != '') {
$this->addCSSRule($this->getParam('css_custom', ''));
}
Add below code after above:
- Code: Select all
// include Background Override
if($this->getParam("backgroundauto", '0')) {
$backgroundid=JRequest::getInt('id', 0);
$backgroundfile= JPATH_SITE . DS . 'images' . DS . 'backgrounds' . DS . $backgroundid . '.jpg';
if (file_exists($backgroundfile))
$this->addCSSRule('body { background-image: url("' . $this->URLbase() . 'images/backgrounds/' . $backgroundid . '.jpg") ; }');
else
$this->addCSSRule('body { background-image: url("' . $this->URLbase() . 'images/backgrounds/bg.jpg") ; }');
}
4. Add php code for Background identifier
Find File: \templates\gk_game_magazine\layouts\default.php
Find Line: 37
Which is
- Code: Select all
define('GK_COM_USERS', $option == 'com_users' && ($view == 'login' || $view == 'registration'));
Add below code after above.
- Code: Select all
$backgroundid=JRequest::getInt('id', 0);
Find Line: 64 to 68
which is
- Code: Select all
<div id="gkPage" class="gkMain gkWrap">
<div id="gkPageWrap">
<div id="gkPageTop" class="clearfix">
<?php $this->loadBlock('logo'); ?>
</div>
Replace it with below
- Code: Select all
<div id="gkPage" class="gkMain gkWrap">
<div id="gkPageWrap">
<?php if($this->getParam("backgroundhelper", '0')): ?>
<div id="gkBackground">
<h2><?php echo $backgroundid ?>.jpg</h2>
</div>
<?php endif; ?>
<div id="gkPageTop" class="clearfix">
<?php $this->loadBlock('logo'); ?>
</div>
5. Add css class for background identifier. You can use any css file as long as that file is loaded in your site.
Find File: \templates\gk_game_magazine\css\template.css
Find Line: 12
Which is
- Code: Select all
/* Basic elements */
Add below code after it
- Code: Select all
#gkBackground { background: -moz-linear-gradient(19% 75% 90deg,#ababab, #c9c9c9, #c7c7c7 100%); color: fff; text-align: center; }
6. Create folder for background images.
Create a new folder in joomla root/images/backgrounds
7. Upload an empty index.html file from any of other joomla folders to stop indexing background folder.
8. Create a default background image.
Either copy \templates\gk_game_magazine\images\bg.jpg to backgrounds folder or simply create a new one and name it bg.jpg. This file will be used if particular page does not have a background image.
MOD ENDS HERE
Because I've tried to explain it in detail it might seem a long procedure however it wont take more then few minutes.
See you around...
