Random colors for tags



  • It would be cool if tags got random colors so that they wouldn't all be simply gray.


  • Admin

    You can modify the color of tags in the acp. Or globally through the custom css tab.



  • What is an "acp"? And how can you modify the individual tags with a custom css? @baris


  • Admin

    ACP = administration control panel

    upload-3f4c14da-f3e5-48d1-b04e-49239dfb18bb

    You can target the specific tags with the data-tag attribute in css

    For example

    [data-tag="nodebb"] {
        background-color: red;
    }
    


  • Ah, okay. Thank you.

    Though I still think it could be nice if they got random color on creation or if the users could color the tags when they create a new one.


  • Community Rep

    Random Colors?!? That's my jam!

    $(document).ready(function(){
    	var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    
    	$('[data-tag]').each(function () {
    		var $tag = $(this);
    		var tag = $tag.attr('data-tag');
    		var x = tag.charAt(0) || 'm';
    		var y = tag.charAt(1) || 'm';
    		var z = tag.charAt(2) || 'm';
    		x = x.toLowerCase();
    		y = y.toLowerCase();
    		z = z.toLowerCase();
    		x = letters.indexOf(x);
    		y = letters.indexOf(y);
    		z = letters.indexOf(z);
    		x = x === -1 ? 12 : x;
    		y = y === -1 ? 12 : y;
    		z = z === -1 ? 12 : z;
    		var hue = (x * 14 + z * 14) % 360;
    		var sat = 100 - z * 2;
    		var lum = 64 - y;
    		var color = 'hsl('+hue+','+sat+'%,'+lum+'%)';
    		$tag.css('color', color);
    	});
    });
    

    Totally adding this to Rainbows! 🙂


  • Admin

    @baris, if you want to do this, please reuse the random colour selector tool that we use during category creation 👍


  • Admin

    @julian I like @yariplus solution better, I don't see random colour tags being a core feature


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.