This theme component offers alternative styling for any specified categories that make use of the Discourse Voting plugin.
Installation
Repository Link
https://github.com/tshenry/discourse-alternative-voting-category-style
If you are unfamiliar with theme components and how to install them, check out the theme installation guide. And if you’d like to learn more about Discourse themes, take a look at this guide.
Preview
The overall idea is based off of this mockup created by @erlend_sh.
Notable Features
- Compact view
- More prominent vote count
- Colored icon to indicate that you voted on the topic
Settings
There is currently one setting use to specify which categories to apply the style:
Extra Customizations
If you want to customize the look of specific tags within your voting topic (see the “IN PROGRESS” tag in the preview image above), you can create an additional component and modify the following CSS to fit your needs
.voting-category.list-container {
.topic-list-item:not(.about-topic) {
// Common styling for all listed tags
[data-tag-name="in-progress"],
[data-tag-name="my-tag-one"],
[data-tag-name="my-tag-two"] {
font-weight: bold;
text-transform: uppercase;
font-family: Trebuchet MS;
}
// Specific styling for individual tags
[data-tag-name="in-progress"] {
color: #9e63d0;
}
[data-tag-name="my-tag-one"] {
color: #5bd04a;
}
[data-tag-name="my-tag-two"] {
color: #5f5dd0;
}
}
}
Future
The one thing that you may notice missing from the original mockup is an excerpt of the topic under the topic title. This feature would require changes to core or the voting plugin that will need to wait for now.
As always, please let me know if you experience any issues.
Big thanks @simon and @erlend_sh for working with me on this