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.

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

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

Best Answer

  • peregrineperegrine MVP
    edited April 2012 Answer ✓

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

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

Answers

  • 422422 Developer MVP

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

    There was an error rendering this rich post.

  • 422422 Developer MVP

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

    There was an error rendering this rich post.

  • Okay, great, so how can I do that?

  • peregrineperegrine MVP
    edited March 2012
        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);
    

    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 don't know anything about CSS, so I don't know where to put this...

  • 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

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

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

  • peregrineperegrine MVP
    edited April 2012 Answer ✓

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

    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 April 2012

    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

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

  • Thank you so much for your time. <3

Sign In or Register to comment.