# Alternative Voting Category Style

**URL:** https://meta.discourse.org/t/alternative-voting-category-style/101532
**Category:** Theme component
**Tags:** official, topic-voting
**Created:** [07.Ноябрь.2018 13:54:40 UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532 "2018-11-07T13:54:40Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [07.Ноябрь.2018 13:54:40 UTC](https://meta.discourse.org/t/alternative-voting-category-style/101532/1 "2018-11-07T13:54:40Z")

</div>

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

 ![preview](https://global.discourse-cdn.com/meta/original/4X/1/f/1/1f1471680151eff969a06a0636c021629cd50a82.png)

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:

 ![voting-settings](https://global.discourse-cdn.com/meta/original/4X/5/f/e/5fe06db407498bb832d28833773f52016c3a1dec.png)

### 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 😍

---

_[View the full topic](https://meta.discourse.org/t/alternative-voting-category-style/101532)._