Get category color to use in CSS

(Krischan) #1

Hi there, I really like the color coding for the categories on /categories, but these colors are only sparsely used on the category page itself. Is there a way to retrieve the color of the active category to use in css? I would like to give each category a more distinctive look. Thanks!

(Simon Cossar) #2

The border colors are created with inline styles. You can get them with javascript. If you add this as a custom style to the </head> section of admin>customize>css/html it will reopen the DiscoveryCategorysView and define or redefine its didInsertElement method.

        didInsertElement: function() {
            var $categories = $('.category');
            this._super(); // Calls the didInsertElement method from the super class
            $categories.each(function() {
                var categoryColor = $(this).css('border-color');
                // Do something with the category color
                $(this).css('color', categoryColor);

(Krischan) #3

That’s great! Thanks so much.

(Krischan) #4

Sorry, I have another question: If I’d like to use the color in the class .topic-list>tbody>tr:first-of-type for border-top, how would I need to change this code?

(Simon Cossar) #5

This should work:

        didInsertElement: function() {
            var $firstTopic = $('.topic-list > tbody > tr:first-of-type ');
            var firstTopicColor = $firstTopic.find('.badge-category-bg').css('background-color');
            $firstTopic.css('border-top-color', firstTopicColor);

(Jay Dawg) #6

@Simon_Cossar Hi Simon not sure if you are still around on this topic but I have a similar request as above however, I want to take the category color and put it on another element

The problem I think I am having is the category color is on a span element:

<span class="badge-category-bg" style="background-color: #9EB83B;"></span>

I want to take this background color and and add it to this element id

#mobile_custom_footer {
    width: 100%;
    padding: 4px 0px 0px;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    font-size: 12px !important;
    border-top: 1px solid #ccc;

I have played with the above code but no joy so I am wondering if you or anyone can help

Thanks in advance