Who can I change the background and font color of category heading as shown on the pic?

Prosper

Please what FTP file(s) can I edit to give background and text colors to the non-clickable category headings. The change will make it possible for forum users to easily detect category headings.

peregrine

put this in a DropColor plugin

plugins/DropColor/default.php

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


// Define the plugin:
$PluginInfo['DropColor'] = array(
   'Name' => 'Drop Color',
   'Description' => 'Adds colors to to disabled options',
   'Version' => '1.0',
   'Author' => "P",
   'MobileFriendly' => TRUE,
);
class Tester extends Gdn_Plugin {

        public function PostController_Render_Before($Sender) {
               $Sender->AddJsFile('dropcolor.js', 'plugins/DropColor');
        }

}

with this in the js in the folder plugin DropColor/js/dropcolor.js

jQuery(document).ready(function($) {
  $('option:disabled').addClass('item-disabled')
});

and this in you custom.css

.item-disabled { 
background-color: green; 
color: red;
}

peregrine

@Prosper

remove the old DropColor folder from the plugins and extract the zip be low and add it to your plugins.

and put this in your custom.css of your theme (or modify the css as you wish).

    .item-disabled {
    background-color: green;
    color: red;
    }

vrijvlinder

That type of drop down is controlled by the browser. It looks different depending on the browser. For example, in Safari, it can't be styled. Looks the same as all drop downs. You can possibly edit the style for firebox .

Every user will see it differently . No you can't add colors or edit that drop down very much.

The button is called select , you can add style to that. But no way to add style to the options/list that I know if to work across all browsers without some kind of script to possibly override the browser values.

peregrine

put this in a DropColor plugin

plugins/DropColor/default.php

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


// Define the plugin:
$PluginInfo['DropColor'] = array(
   'Name' => 'Drop Color',
   'Description' => 'Adds colors to to disabled options',
   'Version' => '1.0',
   'Author' => "P",
   'MobileFriendly' => TRUE,
);
class Tester extends Gdn_Plugin {

        public function PostController_Render_Before($Sender) {
               $Sender->AddJsFile('dropcolor.js', 'plugins/DropColor');
        }

}

with this in the js in the folder plugin DropColor/js/dropcolor.js

jQuery(document).ready(function($) {
  $('option:disabled').addClass('item-disabled')
});

and this in you custom.css

.item-disabled { 
background-color: green; 
color: red;
}

Prosper

@peregrine‌
It worked perfectly. Thank you.

peregrine

@Prosper‌

actually, minor change you should change this line so things don't get confused later.

class Tester extends Gdn_Plugin {

to

class DropDown extends Gdn_Plugin {

vrijvlinder

This does not work in Safari

And it does not work in Chrome, using a Mac.

If I remember correctly, this used to only work on a pc using IE , then that was abandoned and Firefox allowed some styling of that even on a Mac. I know because I did it. But unfortunately it does not work anymore on a Mac. The options dropdown is strictly controlled by the browser and the OS style. All you can see is the same thing on all browsers and mobile.

This explains it better

http://css-tricks.com/dropdown-default-styling/

peregrine

@peregrine said:
Prosper‌

actually, minor change you should change this line so things don't get confused later.

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


    $PluginInfo['DropColor'] = array(
       'Name' => 'DropColor',
       'Description' => 'Adds colors disabled option in category dropdownbox',
       'Version' => '1.0',
       'MobileFriendly' => TRUE,
       'Author' => "P"
    );

    class DropColorPlugin extends Gdn_Plugin {

    public function PostController_Render_Before($Sender) {
              $Sender->AddJsFile('dropcolor.js', 'plugins/DropColor');
        }

    }

I tested in Firefox and Chrome on linux - color changes

vrijvlinder

Not on a Mac

peregrine

one more reason to change to linux

vrijvlinder

Not enough reason... the actual reason for this , security issues where people can hijack the dropdown and add style to it which may affect the options confusing what option is for what. For example, making the text on one option bigger so it overlaps the next option and you can't select it.
Must remember that the options dropdown is an input form of sorts...

http://searchsecurity.techtarget.com/answer/Can-a-hacker-actually-post-malicious-scripts-to-any-server-using-a-drop-down-list

Prosper

Hello @peregrine - I just updated forum to version 2.1.5 from 2.1.3. I ran utility/update but failed severally. I then ran utility/structure to see that "DropColor" addon caused fatal error. I disabled the addon and ran update again and this time it was successful.
I tried enabling "DropColor" plugin again but got this error message "There was an error getting the class methods."
Please any idea on how to solve this? Thank you for your time.

peregrine

@Prosper

remove the old DropColor folder from the plugins and extract the zip be low and add it to your plugins.

and put this in your custom.css of your theme (or modify the css as you wish).

    .item-disabled {
    background-color: green;
    color: red;
    }

peregrine

@linc I added a zip file as an attachment, in this thread

http://vanillaforums.org/discussion/comment/218786/#Comment_218786

and since @prosper accepted the answer the zip attachment has disappeared from the thread.

if I post the zip again, he'll accept the answer and it will disappear again.

if I post the code of the plugin, it is cumbersome to post the code and explain where to place things, and the user can make a mistake placing files in folders, naming files etc.

I don't use github. but it seems that if you are allowed to post attachments, they should stay with the thread, not be deleted when accepted.

problem in Q&A on this forum.

https://github.com/vanilla/vanilla/issues/2252

Prosper

@linc - This is the zip file containing the "DropColor" addon by @peregrine.

peregrine

thanks for re-uploading, so no one asks me for it

although it is so esoteric not many will find it of interest, but the minute things disappear, people will ask years from now.