# Alternative Voting Category Style
**URL:** https://meta.discourse.org/t/alternative-voting-category-style/101532
**Category:** Theme component
**Tags:** official, topic-voting
**Created:** [November 7, 2018, 1:54pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532 "2018-11-07T13:54:40Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [November 7, 2018, 1:54pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/1 "2018-11-07T13:54:40Z")
This theme component offers alternative styling for any specified categories that make use of the Discourse Voting plugin.
> [@Discourse Topic Voting](https://meta.discourse.org/t/discourse-voting/40121):
>
> discourse2Summary Discourse Topic Voting gives the ability to vote on topics in a specified category.[[1]](#footnote-173202-1)open_bookInstall Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately. Features To enable it, edit any category, look on the settings tab for the “Allow users to vote on topics in this category” checkbox: Once enabled, a “Votes” item is available in the top menu. The topics in that category can be voted on w…
### Installation
[Repository Link](https://github.com/discourse/discourse-alternative-voting-category-style)
`https://github.com/discourse/discourse-alternative-voting-category-style `
If you are unfamiliar with theme components and how to install them, check out the [theme installation guide](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682). And if you’d like to learn more about Discourse themes, take a look at [this guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966).
### Preview
The overall idea is based off of [this mockup](https://meta.discourse.org/t/unique-index-style-for-voting/59499/6) 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
```scss
.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 😍
---
### Author:  [@Sean\_R](https://meta.discourse.org/u/Sean_R)
#### Post date: [November 7, 2018, 2:26pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/2 "2018-11-07T14:26:22Z")
Great theme component! One thing I found was that the unlisted icon is not fitting into your design. The topic title is overlapping it.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [November 7, 2018, 2:30pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/3 "2018-11-07T14:30:34Z")
Thanks for the quick feedback! I will try to get that fixed a little later today 🙂
Edit: @Sean_R I just pushed a quick fix. I may try to tinker with it a little more to get it even better, but there shouldn’t be any more overlap!
---
### Author:  [@Sean\_R](https://meta.discourse.org/u/Sean_R)
#### Post date: [November 7, 2018, 9:16pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/4 "2018-11-07T21:16:38Z")
Looks good now
I also had to change the CSS to make the topic list wider.
**Was**
```
.voting-category.list-container {
max-width: $small-width;
```
**Changed to**
```
.voting-category.list-container {
max-width: $large-width;
```
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [November 7, 2018, 11:30pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/5 "2018-11-07T23:30:22Z")
Thanks for confirming that is fixed!
The smaller width was based on the original design. The rationale was that there was so little information displayed on each topic row that it would look odd at full width. I can imagine some people might feel the opposite - that the smaller width looks odd. A width option to toggle via a theme setting would be an easy addition. I’ll add that to my to-do list with this.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [December 2, 2018, 8:12am UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/6 "2018-12-02T08:12:40Z")
This component has been updated! The changes include:
- Support for font awesome changes
- Additional setting to toggle between small-width and large-width
---
### Author:  [@Alexander](https://meta.discourse.org/u/Alexander)
#### Post date: [April 1, 2020, 2:59pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/7 "2020-04-01T14:59:52Z")
Does this component still work?
I use an instance of [free.discourse.group](http://free.discourse.group) and am looking for an alternative for the Discourse Vote Plugin
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [April 1, 2020, 6:23pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/8 "2020-04-01T18:23:21Z")
The component still works, but it is meant to be used _alongside_ the voting plugin, not instead. It only provides an alternative style option for the voting plugin.
---
### Author:  [@Alexander](https://meta.discourse.org/u/Alexander)
#### Post date: [April 1, 2020, 6:25pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/9 "2020-04-01T18:25:23Z")
Ah, now I get it, thanks for your attention 🤗
---
### Author:  [@saim](https://meta.discourse.org/u/saim)
#### Post date: [October 7, 2020, 7:32pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/10 "2020-10-07T19:32:44Z")
Is somebody still actively using this? Tried it with the current Version of the voting Plugin (0.5), looks pretty good, but doesn’t seem to be functional anymore - at least in our instance.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [October 7, 2020, 7:41pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/11 "2020-10-07T19:41:31Z")
> [@saim](#):
>
> doesn’t seem to be functional anymore
Can you elaborate on what isn’t functioning? I just tested it out and everything seems to be working. Noting that this component is purely styling right now. You aren’t able to vote directly from the topic list.
---
### Author:  [@saim](https://meta.discourse.org/u/saim)
#### Post date: [October 7, 2020, 7:57pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/12 "2020-10-07T19:57:44Z")
thanks for the immediate reply!!!
**First**
> Noting that this component is purely styling right now. You aren’t able to vote directly from the topic list.
Ok, I did not realise that. I thought it would actually allow exactly that: Voting from the topic list. Good to know. Need to reevaluate then.
**Second**
It does not seem to show the actual data/votes. Two pictures here: one with the style activated and one deactivated.
I suspected a conflict with the theme used, but even using another one, it does not seem to solve the issue.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [October 7, 2020, 8:13pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/13 "2020-10-07T20:13:36Z")
Hmm I just tested it on an up-to-date site and I’m not having any issues with the vote count or “I voted” indicator:
Can you check to see if there are any errors in your browser’s console? Have you tried with a brand new default theme with no other components or customizations added?
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [August 30, 2021, 7:23pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/15 "2021-08-30T19:23:52Z")
You should be able to add a CSS rule to a theme/component to fix this up. I don’t have the Ratings plugin installed to test this, but I think it should be something like:
```scss
.rating-list {
margin-left: 65px;
}
```
I’m actually doing some work on this component right now (it hadn’t been touched in a long time!), so I’ll see if I can make it so that any custom topic list content is positioned correctly by default.
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [September 1, 2021, 12:13am UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/16 "2021-09-01T00:13:48Z")
Perfect, thank you 👌
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [December 5, 2021, 3:18pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/17 "2021-12-05T15:18:01Z")
I have installed this theme component and enabled it in two categories. One looks buggy, the other one looks good. The difference is that the name of the category is appearing in the list, overlapping with the vote count. The only difference I can think of, is that the category with the bug has subcategories, while the other one hasn’t.
Buggy, has subcategories:
Good, no subcategories:
In case it helps, this is the Default theme with Grey Amber color palette.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [December 7, 2021, 3:41am UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/18 "2021-12-07T03:41:19Z")
Thanks for the report! If you update the component, you should get the following fix:
[https://github.com/tshenry/discourse-alternative-voting-category-style/commit/69aca556c04b8d228b772bcb459525b0f4e0635d](https://github.com/tshenry/discourse-alternative-voting-category-style/commit/69aca556c04b8d228b772bcb459525b0f4e0635d)
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [December 7, 2021, 8:20am UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/19 "2021-12-07T08:20:47Z")
Thank you so much for this hyperfast reaction! The fix works.
PS: please add the #voting tag, this components is too good to _hide_ it. 🙂
---
### Author:  [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [December 29, 2021, 4:50pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/20 "2021-12-29T16:50:11Z")
Is there a theme component which makes the vote indicator on individual topics have that same look?
---
### Author:  [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [January 12, 2022, 4:48pm UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/21 "2022-01-12T16:48:55Z")
This component also hides the columns showing participants, views, and activity time. It might be nice to have that separated, so one could easily enable just the vote styling change without also hiding those?
Or — move
```plaintext
.posters,
.views,
.activity {
display: none;
}
```
to inside of ` @if $use_compact_width == "true" {`
?
[Next page](https://meta.discourse.org/t/alternative-voting-category-style/101532.md?page=2)