different background on different page

john_hrangkhol

Is it possible in vanillaforums to have a different background for each page, like if we view dog category page i want to used dog background image and cat category page then a cat background

peregrine

easily with this plugin..

download the category image header plugin
http://vanillaforums.org/addon/categoryimageheader-plugin

doing this will replace the image header routine with your individualized .css for each category.

replace lines 108-128

with these lines.

  switch ($CatName)
       {
       case $CategoryImageHeader1:
            $Sender->AddCssFile($this->GetResource('design/one.css', FALSE, FALSE)); 
            break;
       case $CategoryImageHeader2:
           $Sender->AddCssFile($this->GetResource('design/two.css', FALSE, FALSE)); 
           break;

       case $CategoryImageHeader3:
         $Sender->AddCssFile($this->GetResource('design/three.css', FALSE, FALSE)); 
            break;

       case $CategoryImageHeader4:
            $Sender->AddCssFile($this->GetResource('design/four.css', FALSE, FALSE)); 
           break;

       case $CategoryImageHeader5:
            $Sender->AddCssFile($this->GetResource('design/five.css', FALSE, FALSE)); 
         break;

comment out line 160-162 (the if statement)

create the one.css, two.css, etc. each with a different background image
in plugins/CategoryImageHeader/design

probably a million other ways - the way above should work for you.

john_hrangkhol

sorry, i'm confused now. i don't know how to used / how this categoryimageheader plugin work?

please guide me in detail

((vanilla version: 2.0.18.4 and categoryimageheader : v1.1))

peregrine

step 1 -

replace the entire class.categoryimageheader.plugin.php in

/plugins/CategoryImageHeader

with this:

<?php if (!defined('APPLICATION'))  exit();


// Define the plugin:
$PluginInfo['CategoryImageHeader'] = array(
    'Description' => 'Change css for each category.',
    'Version' => '1.2.1',
    'RequiredApplications' => array('Vanilla' => '2.0.18'),
    'RequiredTheme' => FALSE,
    'RequiredPlugins' => FALSE,
    'HasLocale' => FALSE,
    'SettingsPermission' => 'Garden.AdminUser.Only',
    'SettingsUrl' => '/plugin/categoryimageheader',
    'Author' => "Peregrine"
);

class CategoryImageHeader extends Gdn_Plugin {


   public function __construct() {
      
   }
  
 
  public function PluginController_CategoryImageHeader_Create($Sender) {
         $Sender->Title('Category Image Header');
         $Sender->AddSideMenu('plugin/categoryimageheader');
         $Sender->Form = new Gdn_Form();
        
         $this->Dispatch($Sender, $Sender->RequestArgs);
         }
         
           
    public function Controller_Index($Sender) {      
        
        $Sender->Permission('Vanilla.Settings.Manage');
        $Sender->SetData('PluginDescription',$this->GetPluginKey('Description'));
        
      
        $Sender->Form = new Gdn_Form();
        $Validation = new Gdn_Validation();
        $ConfigurationModel = new Gdn_ConfigurationModel($Validation);
        $ConfigurationModel->SetField(array(
            'Plugins.CategoryImageHeader.ImCat1',
            'Plugins.CategoryImageHeader.ImCat2',
            'Plugins.CategoryImageHeader.ImCat3',
            'Plugins.CategoryImageHeader.ImCat4',
            'Plugins.CategoryImageHeader.ImCat5',
            'Plugins.CategoryImageHeader.ImCat6',
        ));
        $Sender->Form->SetModel($ConfigurationModel);


        if ($Sender->Form->AuthenticatedPostBack() === FALSE) {
            $Sender->Form->SetData($ConfigurationModel->Data);
        } else {
            $Data = $Sender->Form->FormValues();

            if ($Sender->Form->Save() !== FALSE)
                $Sender->StatusMessage = T("Your settings have been saved.");
        }

        $Sender->Render($this->GetView('cih-settings.php'));
    }
  
     public function Base_Render_Before($Sender) {
        
        $CategoryImageHeader1 = C('Plugins.CategoryImageHeader.ImCat1');
        $CategoryImageHeader2 = C('Plugins.CategoryImageHeader.ImCat2');
        $CategoryImageHeader3 = C('Plugins.CategoryImageHeader.ImCat3');
        $CategoryImageHeader4 = C('Plugins.CategoryImageHeader.ImCat4');
        $CategoryImageHeader5 = C('Plugins.CategoryImageHeader.ImCat5');
        $CategoryImageHeader6 = C('Plugins.CategoryImageHeader.ImCat6');
       
     
        $CatName = $Sender->Category->Name;
        $CatImage = "";
       
  
     
        switch ($CatName)
       {
       case $CategoryImageHeader1:
            $Sender->AddCssFile($this->GetResource('design/one.css', FALSE, FALSE));
            break;
       case $CategoryImageHeader2:
           $Sender->AddCssFile($this->GetResource('design/two.css', FALSE, FALSE));
           break;
       
       case $CategoryImageHeader3:
          $Sender->AddCssFile($this->GetResource('design/three.css', FALSE, FALSE));
            break;
       
       case $CategoryImageHeader4:
           $Sender->AddCssFile($this->GetResource('design/four.css', FALSE, FALSE));
           break;
       
       case $CategoryImageHeader5:
          $Sender->AddCssFile($this->GetResource('design/five.css', FALSE, FALSE));
            break;
       case $CategoryImageHeader6:
           $Sender->AddCssFile($this->GetResource('design/six.css', FALSE, FALSE));
           break;
    } 
  
}
   
     public function Setup() {
        
    }   

}

You can assign six different categories to six different css.

1) replace the

if you have a category named "cat" - go into settings for the plugin and add

e.g.

cat Add the NAME of the first Category
dog Add the NAME of the second Category
mouse Add the NAME of the third Category
rat Add the NAME of the fourth Category
snake Add the NAME of the fifth Category
monkey Add the NAME of the sixth Category

create

CategoryImageHeader/design/one.css
CategoryImageHeader/design/two.css
CategoryImageHeader/design/three.css
..
..

one.css refers to first category or cat in this case
two.css refers to second category or dog in this case.

in the file one.css

you could put elements like this.

body {
background-image:url('cat.jpg');
}
div#Content {
background: red;!important
color:yellow !important
} 

john_hrangkhol

i was able to change only background image of content, but not the page background :-( . i don't know where i did mistake...!!!

when i view page info (firefox browser) >> media >> it doesn't show the path of the image

but it show the path of the content background image

i think we missed something.

peregrine

@john_hrangkhol said:
i was able to change only background image of content, but not the page background :-( . i don't know where i did mistake...!!!

well, now you know how to change things.

when i view page info (firefox browser) >> media >> it doesn't show the path of the image

ok. I can't see your browser or what you did, I'm no mind-reader.

but it show the path of the content background image

great - is that what you wanted.

i think we missed something.

We???

You will have to experiment, I gave you a start.

If you provide links, to your site, images you want showing, a mockup of what you want. Perhaps someone can help you further.

in this case the image has to be in the design directory of the plugin.

background-image:url('cat.jpg');

body {
background-image:url('cat.jpg'); !important
}

.Mine {
background-image:url('cat.jpg'); !important
}

div#Content div.DiscussionsTabs div.SubTab {
background-image:url('cat.jpg'); !important
}

john_hrangkhol

ok i understood and thanks for helping, that help me alot in understanding its function.

I'm tryin but what i want is to change the website background image and not the Content background

john_hrangkhol

and sorry for poor English

peregrine

It probably is highly dependent on your theme, and since you haven't mentioned what your theme is, or provided a link, there ain't much to suggest.

However, e.g. with the Noise theme and the Traditional Chocolate theme
if you put this in one.css - the "external areas" will have the background image. You will probably need to to adjust your css to get exactly what you want.

#Frame {
background-image:url('cat.jpg'); !important
}

john_hrangkhol

thanks again,

it is working now , and i'm using noise theme

i couldn't give a link because my site is not online now(testing).

it will be cool if you made this plugin for vanilla community

peregrine

@john_hrangkhol said:

thanks again,

it is working now , and i'm using noise theme

great.

i couldn't give a link because my site is not online now(testing).

it will be cool if you made this plugin for vanilla community

I did - it is right up above.

download categoryimageheader.php

http://vanillaforums.org/discussion/comment/168476/#Comment_168476

and replace the above code. I don't think it is one of those must-have items.