[Documentation] How can I change username colour to a rainbow?

kingdomcore

.role-administrator .Comment .Meta .Author a { color: #FFC125 !important; }
.role-moderator .Comment .Meta .Author a { color: #0ecae9 !important; }
.role-member .Comment .Meta .Author a { color: #ffffff !important; }
.role-guest .Comment .Meta .Author a { color: #ffffff !important; }
.role-banned .Comment .Meta .Author a { color: #444444 !important; text-decoration: line-through !important; }

So, we have this bit of code. I want ME, the only admin, to have a rainbow coloured name. So, the first letter, "J" would be purple, the next letter "O" would be blue, and so forth. How can I achieve this? I'm the only admin, so if it has to change all usernames to JOHNNY! (my username elsewhere) then that works fine, because there's no other admins.

Any help?

peregrine

@kingdomcore @hbf - if you want this for your documentation.

Here's a tutorial on creating your simple plugin with a jquery script

1) create a jpg or png file with your name in rainbow letters or whatever image you like. Make it about 14 px in height (If you don't know how read about creating jpg files or gifs or pngs).

2) Create a directory named Johnny in the plugins directory.

  now you have  /plugins/Johnny

3) in the /plugins/Johnny directory

create a file called default.php

cut and paste this inside of it and save

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


    // Define the plugin:
    $PluginInfo['Johnny'] = array(
        'Name' => 'Johnny',
        'Description' => 'Change johnny to an icon.',
        'Version' => '1.1',
        'RequiredApplications' => FALSE,
        'RequiredTheme' => FALSE,
        'RequiredPlugins' => FALSE,
        'Author' => "Peregrine"
    );

    class JohnnyPlugin extends Gdn_Plugin {

     public function DiscussionsController_Render_Before(&$Sender) {
            $Sender->AddJsFile('/plugins/Johnny/js/linktopng.js');
        }

     public function DiscussionController_Render_Before($Sender) {
            $Sender->AddJsFile('/plugins/Johnny/js/linktopng.js');
        }    

    }

4 - Placing the image in the directory.

now create a "images" directory below Johnny for your image file.
and call the image file you created in some jpg editor and call it johnny.png

you should now have /plugins/Johnny/images/johnny.png

5 - now create a "js" directory below Johnny for your jquery script.

create a file called linktopng.js in the js directory

place this code in the linktopng.js

note: /profile/4/johnny - replace the number 4 with whatever your profile number is and replace johnny in this file with the screenname you are going to replace.

            jQuery(document).ready(function($) {

            //searches for all span tags that are in Class "LastCommentBy" that contain an anchor tag // with the text johnny.  It replaces the text "johnny" with johnny.png.  This resolves //replacement on the discussions page.

              $('span.LastCommentBy a:contains(johnny)').replaceWith('<a href="/vanilla/index.php?p=/profile/4/johnny"><img src="./plugins/Johnny/images/johnny.png" alt="johnny"></a>');

            //searches for all span tags that are in Class "Author" that contain an anchor tag // with //the text johnny.  It replaces the text "johnny" with johnny.png. This solves replacement //on the discussion page.

         $('span.Author a:contains(johnny)').replaceWith('<a href="/vanilla/index.php?p=/profile/4/johnny"><img src="./plugins/Johnny/images/johnny.png" alt="johnny"></a>');
        });

now you have /plugins/Johnny/js/linktopng.js

you are set to go, enable the plugin and see if it works.

If you believe somebody put some energy into answering the question it is customary to click the like button as well as the accept button

422

That could be done with jquery, but thats. Lot of code.

422

Odd andeven letters could be done, the best option if this is a must have is replace that username with an image.

kingdomcore

Okay, great, so how can I do that?

peregrine

    pseudocode to incorporate image for johnny.

  $Discussion = $Sender->EventArguments['Discussion'];

  if   UserBuilder($Discussion, 'First') or UserBuilder($Discussion, 'First') equals johnny

    echo sprintf(' <a class="role-administrator"  alt="role-admin" href="/profile/37101/kingdomcore"><img src="%s"></a>', $this->GetWebResource('img/rainbowadmin.png', FALSE, TRUE), $Key);

kingdomcore

I don't know anything about CSS, so I don't know where to put this...

peregrine

maybe you could find a developer for hire to write you a plug-in, or investigate learning php, css.
Sorry I can't be of more help. Why not just change your pic to a rainbow color? Seems a lot easier then putting alot of conditional code for one cosmetic event

kingdomcore

It's just an aesthetic thing. Mods have yellow names, admins have green, but head admin has rainbow. It's just cool.

peregrine

@kingdomcore @hbf - if you want this for your documentation.

Here's a tutorial on creating your simple plugin with a jquery script

1) create a jpg or png file with your name in rainbow letters or whatever image you like. Make it about 14 px in height (If you don't know how read about creating jpg files or gifs or pngs).

2) Create a directory named Johnny in the plugins directory.

  now you have  /plugins/Johnny

3) in the /plugins/Johnny directory

create a file called default.php

cut and paste this inside of it and save

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


    // Define the plugin:
    $PluginInfo['Johnny'] = array(
        'Name' => 'Johnny',
        'Description' => 'Change johnny to an icon.',
        'Version' => '1.1',
        'RequiredApplications' => FALSE,
        'RequiredTheme' => FALSE,
        'RequiredPlugins' => FALSE,
        'Author' => "Peregrine"
    );

    class JohnnyPlugin extends Gdn_Plugin {

     public function DiscussionsController_Render_Before(&$Sender) {
            $Sender->AddJsFile('/plugins/Johnny/js/linktopng.js');
        }

     public function DiscussionController_Render_Before($Sender) {
            $Sender->AddJsFile('/plugins/Johnny/js/linktopng.js');
        }    

    }

4 - Placing the image in the directory.

now create a "images" directory below Johnny for your image file.
and call the image file you created in some jpg editor and call it johnny.png

you should now have /plugins/Johnny/images/johnny.png

5 - now create a "js" directory below Johnny for your jquery script.

create a file called linktopng.js in the js directory

place this code in the linktopng.js

note: /profile/4/johnny - replace the number 4 with whatever your profile number is and replace johnny in this file with the screenname you are going to replace.

            jQuery(document).ready(function($) {

            //searches for all span tags that are in Class "LastCommentBy" that contain an anchor tag // with the text johnny.  It replaces the text "johnny" with johnny.png.  This resolves //replacement on the discussions page.

              $('span.LastCommentBy a:contains(johnny)').replaceWith('<a href="/vanilla/index.php?p=/profile/4/johnny"><img src="./plugins/Johnny/images/johnny.png" alt="johnny"></a>');

            //searches for all span tags that are in Class "Author" that contain an anchor tag // with //the text johnny.  It replaces the text "johnny" with johnny.png. This solves replacement //on the discussion page.

         $('span.Author a:contains(johnny)').replaceWith('<a href="/vanilla/index.php?p=/profile/4/johnny"><img src="./plugins/Johnny/images/johnny.png" alt="johnny"></a>');
        });

now you have /plugins/Johnny/js/linktopng.js

you are set to go, enable the plugin and see if it works.

If you believe somebody put some energy into answering the question it is customary to click the like button as well as the accept button

peregrine

If anybody wants it I may post a customizable name rainbow plugin. But I think you are one of the few.

If you want to open up a console in your browser and run this jquery it will convert all the peregrine links on this page to a rainbow johnny without the need of an icon

$('span.Author a:contains(peregrine)').replaceWith('<a href="/vanilla/index.php?p=/profile/4/johnny"> <span style="font:bold 16px ,sans-serif;color:red ;background:#ddd<span style= "color:red">J</span><span style="color:orange">O</span><span style="color:yellow">H</span><span style="color:green">N</span><span style="color:blue">N</span><span style="color:violet">Y</span></span></a>');``

here's an html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title></title>

<style type="text/css">
 span.c7 {font:bold 16px ,sans-serif;;color:red ;background:#ddd}
 span.c6 {color:violet}
 span.c5 {color:blue}
 span.c4 {color:green}
 span.c3 {color:yellow}
 span.c2 {color:orange}
 span.c1 {color:red}
</style>
</head>
<body>
<a href="/vanilla/index.php?p=/profile/5/johnny"><span class="c7"><span class="c1">J</span> <span class="c2">O</span> <span class="c3">H</span> <span class="c4">N</span> <span class="c5">N</span> <span class="c6">Y</span></span></a>
</body>
</html>

J O H N N Y

kingdomcore

Thank you so much for your time.

hbf

i put this under tutorials

http://vanillawiki.homebrewforums.net/index.php/Adding_Some_JQuery_to_a_Plugin