Different colored headers with CSS?

orangesmasher221

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?

peregrine

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?

orangesmasher221

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

vrijvlinder

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.

orangesmasher221

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

vrijvlinder

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.

orangesmasher221

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

peregrine

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.

orangesmasher221

@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...)

peregrine

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");
    });

orangesmasher221

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

vrijvlinder

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');

          }
       }

peregrine

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

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.

peregrine

.

peregrine

@peregrine said:
.

@vrijvlinder that is a pretty awesome period .

vrijvlinder

Agreed

peregrine

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>");
    }

}

orangesmasher221

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