Tag Picker: CSS Help Needed with Tag Background/Hover Background Color

support
1

Hi everyone,

Please move this post if it’s not in the correct category; didn’t see one specific to CSS help, so I just stuck it here.

I’m having trouble with finding the CSS related to the hover background of the tag selector and the actual tag background colors, too. Right now, the background color is #ffffff and so is the text, so it’s impossible to see what the tag is.

Additionally, the background hover is this strange green color that I’ve never set anywhere else, and trying to track down the CSS for it has been a nightmare. I always think I’m going down the right path but nothing actually changes it.

I’m very new to CSS, so any pointers in how I can update this would be great (with the priority being the tag background colors so they’re legible). Thanks!

2

I think this is the different class you’ll need :

.select2-container-multi .select2-choices .select2-search-choice.discourse-tag-select2 {
     background-color: transparent !important;
}

.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple {
     background-color: transparent !important;
}

.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
    background-color: transparent !important;
}

The green line :

.select2-results .select2-highlighted {
    background: #8A8A5D;
    color: #d9d9d9;
}

Discourse uses some colors based on the theme configuration that you make to be compatible with light or dark theme. Here is the example with this class

.select2-results .select2-highlighted {
    background: dark-light-diff($highlight, $secondary, 50%, -80%);
    color: $primary;
}
4 Likes
3

Perfect!

That got me most of the way there, and then I was able to figure out the rest. In case others have the same trouble, here’s my CSS I used:

To give my tags slightly rounded corners and a drop shadow:

.discourse-tag.box {
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

This updated the hover color behind the tags:

.select2-results .select2-highlighted {
    background: #595959;
    color: #595959;}

After selecting a tag, this helped to give it a “floating” feeling in the tag selection box:

.select2-container-multi .select2-choices .select2-search-choice.discourse-tag-select2 {
    background-color: #222;}

This updated the background color of the tags (turned them blue):

.discourse-tag.box {
    background-color: #0f82af;
    color: #fff}

The Final Result:

6 Likes
4

Nice, glad I could help. It looks great !

On my forum I used a text-transform: uppercase; on the tags. I think it looks better all caps.

3 Likes