Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

different background on different page

edited September 2012 in Vanilla 2.0 - 2.8

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

Comments

  • peregrineperegrine MVP
    edited September 2012

    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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 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))

  • peregrineperegrine MVP
    edited October 2012

    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
    } 
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 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.

  • peregrineperegrine MVP
    edited October 2012

    @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
    }

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • :) 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

  • and sorry for poor English :)

  • peregrineperegrine MVP
    edited October 2012

    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
    }

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 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

  • peregrineperegrine MVP
    edited October 2012

    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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Sign In or Register to comment.