How to use category color as background color?


(probus) #1

I want to change the background color of ‘list-controls’ (the one where category dropdown is in) div to match the category color. How can I do that?


(Kane York) #2

This requires the ability to make CSS per-category, which has been requested before but never really done:

And some other topics that I can’t find right now.


(probus) #3

There is no way to do it by modifying templates?


(probus) #4

Any pointers on how this could be implemented would be greatly appreciated. I tried to search for previous topics, but couldn’t find anything useful. All I want is a function that returns the color of the currently selected category, I don’t actually need category specific css.


(Travis) #5

You could do it with javascript. I made something sort of similar for a different project. This script is changing rgb to hex (which wouldn’t be needed for you) but also has the element grabbing that you’d need. I’m not sure exactly what the classes are in discourse but this should get you started:

$(document).ready ->
  rgb2hex = (rgb) ->
    hex = (x) ->
      ("0" + parseInt(x).toString(16)).slice -2
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
    "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])
  swatches = []
  pointers = {}
  cur_i = undefined
  cur_color = undefined
  swatches = document.getElementsByName("swatch")
  pointers.swatches_i = 0
  while pointers.swatches_i < swatches.length
    cur_i = swatches[pointers.swatches_i].childNodes[1].childNodes[3]
    console.log rgb2hex($(swatches[pointers.swatches_i]).css("background-color"))
    cur_color = rgb2hex($(swatches[pointers.swatches_i]).css("background-color"))
    cur_i.innerHTML = cur_color
    pointers.swatches_i += 1
  return

(probus) #6

Thanks for the idea, somehow I hadn’t thought of that. This sort of works, but not well enough to actually use.

The call I used to copy the styles:
$(".list-controls").attr(“style”, $(".badge-category").attr(“style”))

Call this once after the initial page load. Next wrap it inside the correct hook

Discourse.PageTracker.current().on(‘change’, function(url) {
  console.log(‘change of color’);
$(".list-controls").attr(“style”, $(".badge-category").attr(“style”));
});

The biggest problem with this approach was that there is an annoying pause after the page loads and when the color updates. Also I couldn’t get it to work 100%. I tested this using the Admin panel adding it to the head of page, so it is possible it could be made better by making it a plugin. Anyway, Firefox didn’t load the page change event at all and in Chrome it did load, but didn’t load the ‘All Categories’ color for some reason unless it was the first page after refresh. After it had failed to change the color, it always took two changes of category to get it going again. I didn’t debug it further because the lag in changing colors kind of ruined the effect anyway.


(Kane York) #7

You can now use this CSS selector:

.category-extensibility {
  background-color: yellowgreen;
}


(probus) #8

That’s great, but it only works on topic pages. The list-controls div is on the main topic list page, where the nav-items etc. are. Any chance of making this work on to topic list page as well?


(probus) #9

Should I just forget about this? I’ve tried and failed. I just don’t understand Discourse enough to do this on my own. Category customizations only on the topic pages and not on the actual category page while nice are just not enough to do what I had in mind.


(Rikki Tooley) #10

I asked about this, it’s not possible with just CSS… so the only way to get at them is to use JS or modify templates. Theming Discourse is not easy at the moment.


(probus) #11

Modifying templates is no problem. I just can’t figure out what to modify. Actually, that would be preferable since I could modify the topic list as well depending on category, like have different default sort for some categories.


(Kane York) #12

As I said above, I just made a PR to add a class to topic pages based on the category:

So it actually is possible now with just CSS, just not on the category page yet…


(Rikki Tooley) #13

I think we ware both asking how to get the category’s existing colour (the one shown on the badges) and use it anywhere on the page, not special rules for each category.