# Tiger Stripes component

**URL:** https://meta.discourse.org/t/tiger-stripes-component/83632
**Category:** Theme component
**Tags:** unmaintained
**Created:** [March 23, 2018, 9:37am UTC](https://meta.discourse.org/t/tiger-stripes-component/83632 "2018-03-23T09:37:14Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)
#### Post date: [March 23, 2018, 9:37am UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/1 "2018-03-23T09:37:14Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/3X/e/4/e4a5dacc7ecda5d5a18f445c63da17ff0c950480.jpg)

> **Repository:** [https://github.com/fefrei/discourse-tiger-stripes](https://github.com/fefrei/discourse-tiger-stripes)  
> **Use this URL for cloning:** `https://github.com/fefrei/discourse-tiger-stripes.git`

This very simple Theme Component adds [tiger](https://meta.discourse.org/t/how-do-you-set-alternating-colors-in-the-list-of-topics/46768/10) stripes to topic lists, making every second entry in the topic list have a darker background color:

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/6/e6890c4e4d5aac13a723eeca9f78c9a8d0e7361a.png)

The darker background color is derived from the primary color and should match the background color of buttons.

---

<div class="post-metadata">

### Author: ![barreeeiroo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barreeeiroo/32/165264_2.png) [@barreeeiroo](https://meta.discourse.org/u/barreeeiroo)
#### Post date: [March 23, 2018, 11:47am UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/2 "2018-03-23T11:47:32Z")

</div>

I get “`500 Internal Error`” when importing the theme

Logs says this:

```plaintext
NoMethodError (undefined method `each' for nil:NilClass)
/var/www/discourse/app/models/remote_theme.rb:159:in `update_theme_color_schemes'

```

> **Backtrace**
>
> ```plaintext
> /var/www/discourse/app/models/remote_theme.rb:159:in `update_theme_color_schemes'
> /var/www/discourse/app/models/remote_theme.rb:135:in `update_from_remote'
> /var/www/discourse/app/models/remote_theme.rb:47:in `import_theme'
> /var/www/discourse/app/controllers/admin/themes_controller.rb:79:in `import'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_controller/metal/basic_implicit_render.rb:4:in `send_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/abstract_controller/base.rb:186:in `process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_controller/metal/rendering.rb:30:in `process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/abstract_controller/callbacks.rb:20:in `block in process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/callbacks.rb:131:in `run_callbacks'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/abstract_controller/callbacks.rb:19:in `process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_controller/metal/rescue.rb:20:in `process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_controller/metal/instrumentation.rb:32:in `block in process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/notifications.rb:166:in `block in instrument'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/notifications/instrumenter.rb:21:in `instrument'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/notifications.rb:166:in `instrument'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_controller/metal/instrumentation.rb:30:in `process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_controller/metal/params_wrapper.rb:252:in `process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/activerecord-5.1.4/lib/active_record/railties/controller_runtime.rb:22:in `process_action'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/abstract_controller/base.rb:124:in `process'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionview-5.1.4/lib/action_view/rendering.rb:30:in `process'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-mini-profiler-0.10.7/lib/mini_profiler/profiling_methods.rb:102:in `block in profile_method'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_controller/metal.rb:189:in `dispatch'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_controller/metal.rb:253:in `dispatch'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/routing/route_set.rb:49:in `dispatch'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/routing/route_set.rb:31:in `serve'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/routing/mapper.rb:16:in `block in <class:Constraints>'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/routing/mapper.rb:46:in `serve'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/journey/router.rb:50:in `block in serve'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/journey/router.rb:33:in `each'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/journey/router.rb:33:in `serve'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/routing/route_set.rb:834:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-protection-2.0.0/lib/rack/protection/frame_options.rb:31:in `call'
> /var/www/discourse/lib/middleware/omniauth_bypass_middleware.rb:24:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/conditional_get.rb:38:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/head.rb:12:in `call'
> /var/www/discourse/lib/middleware/anonymous_cache.rb:149:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/session/abstract/id.rb:232:in `context'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/session/abstract/id.rb:226:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/middleware/cookies.rb:613:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/middleware/callbacks.rb:26:in `block in call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/callbacks.rb:97:in `run_callbacks'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/middleware/callbacks.rb:24:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/middleware/debug_exceptions.rb:59:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/logster-1.2.9/lib/logster/middleware/reporter.rb:31:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/rack/logger.rb:36:in `call_app'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/rack/logger.rb:26:in `call'
> /var/www/discourse/config/initializers/100-quiet_logger.rb:16:in `call'
> /var/www/discourse/config/initializers/100-silence_logger.rb:29:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/middleware/request_id.rb:25:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/method_override.rb:22:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.4/lib/action_dispatch/middleware/executor.rb:12:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/sendfile.rb:111:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-mini-profiler-0.10.7/lib/mini_profiler/profiler.rb:282:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/message_bus-2.1.2/lib/message_bus/rack/middleware.rb:63:in `call'
> /var/www/discourse/lib/middleware/request_tracker.rb:166:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/engine.rb:522:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/railtie.rb:185:in `public_send'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/railtie.rb:185:in `method_missing'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/urlmap.rb:68:in `block in call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/urlmap.rb:53:in `each'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/rack-2.0.3/lib/rack/urlmap.rb:53:in `call'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/unicorn-5.4.0/lib/unicorn/http_server.rb:606:in `process_client'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/unicorn-5.4.0/lib/unicorn/http_server.rb:701:in `worker_loop'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/unicorn-5.4.0/lib/unicorn/http_server.rb:549:in `spawn_missing_workers'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/unicorn-5.4.0/lib/unicorn/http_server.rb:142:in `start'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/gems/unicorn-5.4.0/bin/unicorn:126:in `<top (required)>'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/bin/unicorn:23:in `load'
> /var/www/discourse/vendor/bundle/ruby/2.4.0/bin/unicorn:23:in `<main>'
> 
> ```

> **Enviroment**
>
> | hostname | community-app |
> | --- | --- |
> | process\_id | 31973 |
> | application\_version | d3943b97dfba08dc84a56f306eba987081ab5ad5 |
> | HTTP\_HOST | [community.makeroid.io](http://community.makeroid.io) |
> | REQUEST\_URI | /admin/themes/import |
> | REQUEST\_METHOD | POST |
> | HTTP\_USER\_AGENT | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36 |
> | HTTP\_ACCEPT | _/_ |
> | HTTP\_REFERER | [https://community.makeroid.io/admin/customize/themes](https://community.makeroid.io/admin/customize/themes) |
> | HTTP\_X\_FORWARDED\_FOR | XXX.XXX.XXX.XXX |
> | HTTP\_X\_REAL\_IP | XXX.XXX.XXX |
> | username | Barreeeiroo |
> | params | |
> | remote | [GitHub - fefrei/discourse-tiger-stripes: a Discourse theme component to make topic lists striped · GitHub](https://github.com/fefrei/discourse-tiger-stripes) |

---

<div class="post-metadata">

### Author: ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)
#### Post date: [March 23, 2018, 12:21pm UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/3 "2018-03-23T12:21:35Z")

</div>

Weird – it works for me, and I don’t think a theme component should be able to cause this. Maybe @sam can have a look?

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [March 23, 2018, 2:25pm UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/4 "2018-03-23T14:25:15Z")

</div>

Pretty sure that this issue was already fixed a few days ago…

@barreeeiroo are you on the very latest version of Discourse?

---

<div class="post-metadata">

### Author: ![oca](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/oca/32/156060_2.png) [@oca](https://meta.discourse.org/u/oca)
#### Post date: [February 12, 2019, 1:45pm UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/5 "2019-02-12T13:45:58Z")

</div>

Thanks !

* * *

I guess:

```plaintext
.topic-list-item:nth-child(odd) {
    background-color: #FFF;
}

```

should rather be:

```plaintext
.topic-list-item:nth-child(odd) {
    background-color: #secondary;
}

```

so it looks nice with other background color.

---

<div class="post-metadata">

### Author: ![b481](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@b481](https://meta.discourse.org/u/b481)
#### Post date: [November 26, 2020, 11:46pm UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/6 "2020-11-26T23:46:34Z")

</div>

No idea if this happens for anyone else, but after the “last visit” line, mine resets the color, breaking the grey/white pattern. It’s obviously very minor, but it is kinda frustrating. Other than that though, this is a great component @fefrei, been on my forum since day one.

 ![efw](https://global.discourse-cdn.com/meta/original/3X/b/a/ba20958b6fccbcaf2cce19efa9c9942083ac63b5.png)

---

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [May 14, 2025, 11:14am UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/7 "2025-05-14T11:14:19Z")

</div>

Just an odd little tidbit. I installed this ‘component’, but it showed up as a new theme.

Will it continue to work when my browser flips to it’s dark mode tonight?

Also, it seems the first row at the bottom of each page is less tall than all the rest, any fix for that?

 ![This image shows a list of new and unread topics related to printer issues, FAQ testing, support topics, and help documents, alongside colored tags for organizing and categorizing the topics. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/7/4/5/745c18c3aa1bd2d675995e38e95fd252a8b7c504.jpeg)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 14, 2025, 12:08pm UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/8 "2025-05-14T12:08:19Z")

</div>

> [@tknospdr](#):
>
> I installed this ‘component’, but it showed up as a new theme.

This was fixed in a PR a _loooong_ time ago:

[https://github.com/fefrei/discourse-tiger-stripes/pull/1](https://github.com/fefrei/discourse-tiger-stripes/pull/1)

@fefrei you should merge this

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [May 14, 2025, 12:32pm UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/9 "2025-05-14T12:32:41Z")

</div>

> [@tknospdr](#):
>
> Will it continue to work when my browser flips to it’s dark mode tonight?

I don’t think so. While the background of the slightly darker lines is based on a color from the color palette, the other one is hard coded to white, so it will be white even when you use a dark color palette.

> <https://github.com/fefrei/discourse-tiger-stripes/blob/a0267f2133d9f33967c058a368925695834e43b1/common/common.scss#L8>

As @oca suggested [above](https://meta.discourse.org/t/tiger-stripes-component/83632/5), using `$secondary` would fix that.

---

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [May 14, 2025, 3:20pm UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/10 "2025-05-14T15:20:42Z")

</div>

Forgive me, I’m not a coder, but I can follow directions pretty well.  
Is this something I can fix on my own, or do I have to wait for the author to make these fixes?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 14, 2025, 3:36pm UTC](https://meta.discourse.org/t/tiger-stripes-component/83632/11 "2025-05-14T15:36:49Z")

</div>

you can fork the Theme Component and make any changes you like.

> **[Fork a repository - GitHub Docs](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo)**
>
> A fork is a new repository that shares code and visibility settings with the original upstream repository.

Then, for the time being, you can use your fork.

tbh, if there’s a PR from 2019 that still hasn’t been merged, I’m kind of inclined to suggest this should be marked as “unmaintained”.

I’ve marked it as #unmaintained

The author is able to remove that if they wish.
