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 colored headers with CSS?

Okay. I am using vanilla 2.1.5 and Yaga Rank In Meta 1.0 and I am wondering how I can change the color of the discussion header for different ranks. Is it possible?

Comments

  • peregrineperegrine MVP
    edited November 2014

    in css. what have you tried? what css and web developer tutorials did you actually spend some time with.

    did you identify the class for each rank with web developer?

    did you experiment with your web developer tool?

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

  • edited November 2014

    I tried the following:

    .Rank-Admin .Item-Header{
    background-color: rgba(161, 18, 18, 0.44);
    }

    I spent about 2 weeks prior to the making of the forum on w3 schools.

    I just identified the general class which was .Item-Header

    Yes. I did experiment with the web developer tool.

    If you want to see the website yourself, it is here: http://freesims.altervista.org/index.php?p=/discussion/8/forum-bugs#latest

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited November 2014

    The class for your admin is .Rank-admin

    You can create some css rules for that such as

    .Rank-admin{
    background: red;
    padding: 10px;
    color: #fff;
    }
    

    There is no way to change the actual header specifically for the admin. You would need to add a class to it in order to be able to make it change based on role/rank.

    A plugin that can detect if admin and make the background of the discussion header another color.

  • @vrijvlinder said:
    The class for your admin is .Rank-admin

    You can create some css rules for that such as

    .Rank-admin{
    background: red;
    padding: 10px;
    color: #fff;
    }
    

    There is no way to change the actual header specifically for the admin. You would need to add a class to it in order to be able to make it change based on role/rank.

    A plugin that can detect if admin and make the background of the discussion header another color.

    Wait. So I can only change the color of the name?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yes , because you don't have that class wrapped with the discussion or header. It is part of the global style. In order to affect those differently you need a plugin that will check for rank and display the desired css style for the header or whatever you want to change that the specific rank wrote.

  • @vrijvlinder said:
    Yes , because you don't have that class wrapped with the discussion or header. It is part of the global style. In order to affect those differently you need a plugin that will check for rank and display the desired css style for the header or whatever you want to change that the specific rank wrote.

    Oh. Okay... I guess I'll wait for someone else to write it then... I have no clue how to write plugins. Heck, I don't even know how to properly change stuff with css...

  • peregrineperegrine MVP
    edited November 2014

    either change the plugin and css class adding rank to DiscussionHeader.

    or you can create a plugin

    jQuery(document).ready(function($) {
    $('.MItem.Rank.Rank-admin').parent().parent().parent().css("background-color", "yellow");
    });
    

    so just add the js to theme hooks or plugin.

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

  • @peregrine said:
    either change the plugin and css class adding rank to DiscussionHeader.

    or you can create a plugin

    jQuery(document).ready(function($) {
    $('.MItem.Rank.Rank-admin').parent().parent().parent().css("background-color", "yellow");
    });
    

    so just add the js to theme hooks or plugin.

    http://vanillaforums.org/discussion/comment/157145/#Comment_157145

    Add it to custom.css for theme? (Again... I'm sorry for my lack of knowledge in this...)

  • peregrineperegrine MVP
    edited November 2014

    take some time read the links.

    create a new plugin.

    create a folder/plugins/YagaDiscussionHeader/

    /plugins/YagaDiscussionHeader/default.php

    the default.php is this file

    <?php if (!defined('APPLICATION')) exit();
    // Define the plugin:
    $PluginInfo['YagaDiscussionHeader'] = array(
    'Name' => 'YagaDiscussionHeader',
    'Description' => 'Change Background on Discussion Header based on Yaga Rank.',
    'Version' => '1.0',
     'Author' => "P"
     );
    class YagaDiscussionHeaderPlugin extends Gdn_Plugin {
    
        public function DiscussionController_Render_Before($Sender) {
                $Sender->AddJsFile('/plugins/YagaDiscussionHeader/js/ydh.js');
                }
            }
    

    /plugins/YagaDiscussionHeader/js/ydh.js

    is

        jQuery(document).ready(function($) {
        $('.MItem.Rank.Rank-admin').parent().parent().parent().css("background-color", "yellow");
        });
    

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

  • @peregrine said:
    take some time read the links.

    create a new plugin.

    create a folder/plugins/YagaDiscussionHeader/

    /plugins/YagaDiscussionHeader/default.php

    the default.php is this file

    <?php if (!defined('APPLICATION')) exit();
    // Define the plugin:
    $PluginInfo['YagaDiscussionHeader'] = array(
    'Name' => 'YagaDiscussionHeader',
    'Description' => 'Change Background on Discussion Header based on Yaga Rank.',
    'Version' => '1.0',
     'Author' => "P"
     );
    class YagaDiscussionHeaderPlugin extends Gdn_Plugin {
           
        public function DiscussionController_Render_Before($Sender) {
                $Sender->AddJsFile('/plugins/YagaDiscussionHeader/js/ydh.js');
                }
            }
    

    /plugins/YagaDiscussionHeader/js/ydh.js

    is

        jQuery(document).ready(function($) {
        $('.MItem.Rank.Rank-admin').parent().parent().parent().css("background-color", "yellow");
        });
    

    Okay... I really need to learn to read... I thought that the link was a part of your signature...

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited November 2014

    Examples of how to make themehooks and plugins for you self and ways to add scripts

    Create a file called themescripts.js

    copy the code above by peregrine and save and place in the js folder of your theme.

    According to Bootstrap info, the script should be called by the gulp file automatically by virtue of the file being in the js folder. But not sure..

    If this is not the case, the you can also add the script in the foot of the defult.master.tpl

    {literal} <script type="text/javascript">jQuery(document).ready(function($) {
    $('.MItem.Rank.Rank-admin').parent().parent().parent().css("background-color", "yellow");
    });</script>{/literal}
    

    Or make a themehooks file call it class.mythemehooks.php

    <?php if (!defined('APPLICATION')) exit();
    
    class MyThemeHooks implements Gdn_IPlugin {
       /** No setup required. */
       public function Setup() { }
    
             $Sender->Head->AddString('
    <script type="text/javascript">jQuery(document).ready(function($) {
    $('.MItem.Rank.Rank-admin').parent().parent().parent().css("background-color", "yellow");
    });</script>');
          }
       }
    

    Or make a plugin , add the js file you made with themescripts into the plugin folder for your new plugin.

      <?php if (!defined('APPLICATION')) exit();
    
        class RankBgPlugin extends Gdn_Plugin {
    
     public function Base_Render_Before($Sender) {
    $Sender->AddJsFile('plugins/RankBg/themescripts.js');
    
              }
           }
    
  • peregrineperegrine MVP
    edited November 2014

    @orangesmasher221 said:
    Okay... I really need to learn to read...

    yes. and re-read.

    the other was simple cut and paste. shouldn't be too hard.

    this is easier. focus. take time. re-read comments. study.. be patient.

    take a few weeks studying and come back when you have more questions.

    • download the attached plugin and extract into your plugins folder.

    • It's all laid out for you

    • specific for your theme only.

    and pay attention to the links i posted for you in other discussions. re-read each one of those 3x a day (preferably after drinking 2 to 3 cups of coffee). Continue for a week, until you finish your prescription.

    If you need a refill. I'll send you more links to dosucmentation, faqs, etiquette, etc. :wink:

    If you are drinking alcohol - you only need to read them once, because you won't remember anyway.

    if you still have symptoms or your brain swells to twice its normal size, call your doctor and discontinue treatment.

    in the long run changing the plugin so it adds a rank class to same div as DiscussionHeader class would probably be better than js, but above is one way to do it and works.

    If you are going to do a plugin, don't use vrijvlinder's example - it loads the js everywhere.
    you only want it specific to the the discussions page. so use DiscussionController_Render_Before
    not Base_Render_Before unless you want to js on ecvery page that doesn't need it.

    you could also use the other examples Vrijvlinder provided (which is a good tutorial) but better to isolate to the specific page with if statements and bodyid.

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

  • peregrineperegrine MVP
    edited November 2014

    .

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

  • peregrineperegrine MVP
    edited November 2014

    @peregrine said:
    .

    @vrijvlinder that is a pretty awesome period .

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

  • peregrineperegrine MVP
    edited November 2014

    I wonder if he will provide the solution he used >:) or just leave it hanging what worked for him

    if he used template this would be better to isolate

    {if $BodyID == 'vanilla_discussion_index'}
    {literal} <script type="text/javascript">jQuery(document).ready(function($) {
    $('.MItem.Rank.Rank-admin').parent().parent().parent().css("background-color", "yellow");
    });</script>{/literal}
    {if}
    

    or with theme hooks isolate js load to discussions.

    <?php if (!defined('APPLICATION')) exit();
    class MyThemeHooks implements Gdn_IPlugin {
       public function Setup() {
            return TRUE;
       }
    
    
    
    public function DiscussionController_Render_Before($Sender) {
        $Sender->Head->AddString("
        <script>jQuery(document).ready(function($) {
        $('.MItem.Rank.Rank-admin').parent().parent().parent().css(\"background-color\", \"yellow\"); });
        </script>");
        }
    
    }
    

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

  • The editing of the tpl file worked the best. The plugin left the header 1 color even after deleting it.

Sign In or Register to comment.