# \[Userstyle\] Transparent theme for forums

**URL:** <https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973>\
**Category:** API And Third-Party Apps\
**Created:** [May 16, 2017, 11:01pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973 "2017-05-16T23:01:34Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [May 16, 2017, 11:01pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/1 "2017-05-16T23:01:34Z")

</div>

Thought the forums were a bit bland, so I made a userstyle for it. It’s a transparent theme for use with a background image of your choosing.

I made this for myself, with a specific background in mind, so it will probably not look great with just any image, but I’m sure you can find one which looks good if you’re willing to compromise. The background image URL is located at the top of the style so it’s easy to change, though there is also an option to set it permanently. Currently there are a few other options available as well, though they might not work exactly as intended; as I am not using them myself they have not been extensively tested.

If you have any thoughts or complaints feel free to voice them.

> **Screenshots**
>
> Front page
> 
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/f/7/f7b1564f2ff86770a14d598434b748698710f844.jpg)
> 
> * * *
> 
> Browsing
> 
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/1/d/1dfa900e5a66675a35d52772ebc48a6e9ae06870.jpg)
> 
> * * *
> 
> User summary
> 
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/3/1/311a02a229cf80dcf4c59f6d5a4cc1ab933df137.jpg)
> 
> * * *
> 
> Writing replies
> 
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/2/6/26a46b4fd76930210b7393b10e0468d6d941b5dd.jpg)
> 
> * * *
> 
> Notifications
> 
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/8/0/80aa9dfe469696d9723048aaa0763e28d0d2aa1d.jpg)

The theme can be installed through [userstyles.org](https://userstyles.org/styles/142733/wanikani-forums-transparent-theme)

> **[WaniKani Forums: Transparent Theme](https://userstyles.org/styles/142733/wanikani-forums-transparent-theme)**
>
> Free website themes & skins created by the Stylish community on Userstyles.org

* * *

> **Version history**
>
> v.1.2.19. Lots of bug fixes due to changes in the Discourse platform  
> v.1.2.18. Removed the annoying message about private messages not being private  
> v.1.2.17. Fixed tracking glyph colors and the tracking menu  
> v.1.2.16. Fixes after recent forum changes  
> v.1.2.15. edited for compatibility with my Spongebob time cards script  
> v.1.2.14. added compatibility with my Spongebob time cards script  
> v.1.2.13. Fixed some things after forum updates  
> v.1.2.12. Fixed color of visited threads in ‘Latest’ tab and changed the color of categories in a few places  
> v.1.2.11. Fixed dropdown selections… for the third time. Made topic titles white on black  
> v.1.2.10. Fixed the colour of the “who liked” text and made categories slightly less white  
> v.1.2.9. Styled the new “Also writing” box  
> v.1.2.8. Fixed a few changes in colour due to recent forum update  
> v.1.2.7. Changed the loading spinner into a rotating heart instead to match the default  
> v.1.2.6. Changed the loading spinner into a fading heart and added background image option  
> v.1.2.5. And the user summary page  
> v.1.2.4. Made ticked box mark green in notifications as well  
> v.1.2.3. Fixed the white bar in topic maps  
> v.1.2.2. Made solved thread markers green again  
> v.1.2.1. Fixed clicking on spoilers  
> v.1.2.0. Added some options  
> v.1.1.5. Fixed a bunch of stuff which broke after forum updates  
> v.1.1.4. Refixed the solutions thing  
> v.1.1.3. Fixed the new “solution” thing; fixed the thread timeline for smaller screens  
> v.1.1.2. Fixed mentions’ text colour in preview and added color to recent edits  
> v.1.1.1. Fixed a # autocomplete that I thought I had already fixed  
> v.1.1.0. Reorganised the code, fixed bugs, edited some small stuff.  
> v.1.0.6. Added moderator highlights, fixed show replies button hover background, fixed 0 review count color.  
> v.1.0.5. Number of lessons in header are now the right color  
> v.1.0.4. Fixed oneboxes in quotes, a button border, and something else  
> v.1.0.3. Made the header static when opening images.  
> v.1.0.2. Removed a margin edit which caused problems on the front page for some. Fixed a few unstyled elements in preview when writing replies.  
> v.1.0.1. Fixed tracking settings hover. Styled advanced search, which I had missed.  
> v.1.0.0. Finally done, still need to make the css itself look a bit less like puke

---

<div class="post-metadata">

**Author:** ![Rinion](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/rinion/32/75654_2.png) [@Rinion](https://community.wanikani.com/u/Rinion)\
**Post date:** [May 16, 2017, 11:05pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/2 "2017-05-16T23:05:28Z")

</div>

Thank you for this. Now, I just need to spend the next week or two deciding which image to use for the background…

---

<div class="post-metadata">

**Author:** ![alexbeldan](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/alexbeldan/32/63446_2.png) [@alexbeldan](https://community.wanikani.com/u/alexbeldan)\
**Post date:** [May 16, 2017, 11:06pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/3 "2017-05-16T23:06:31Z")

</div>

Everything about this is so pretty. I see you got rid of that small box in the reply window.

---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [May 16, 2017, 11:07pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/4 "2017-05-16T23:07:58Z")

</div>

Or, you know, you could always make a theme specifically for the background you want 😉

@alexbeldan yeah, I couldn’t change its colour at all, but `display: none` on the element we discussed did the trick ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/e/c/ec22939d3238301c79cba78c9fd14257c683d5bc.png)

---

<div class="post-metadata">

**Author:** ![Glias](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/glias/32/481441_2.png) [@Glias](https://community.wanikani.com/u/Glias)\
**Post date:** [May 16, 2017, 11:09pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/5 "2017-05-16T23:09:19Z")

</div>



---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [May 16, 2017, 11:10pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/6 "2017-05-16T23:10:38Z")

</div>

\<I love you too (⁄ ⁄^⁄ᗨ⁄^⁄ ⁄)\>

---

<div class="post-metadata">

**Author:** ![Glias](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/glias/32/481441_2.png) [@Glias](https://community.wanikani.com/u/Glias)\
**Post date:** [May 16, 2017, 11:15pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/7 "2017-05-16T23:15:47Z")

</div>

(/ω＼)

---

<div class="post-metadata">

**Author:** ![Rinion](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/rinion/32/75654_2.png) [@Rinion](https://community.wanikani.com/u/Rinion)\
**Post date:** [May 16, 2017, 11:17pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/8 "2017-05-16T23:17:30Z")

</div>

That’s a nice proposition, but I still need at least a week to choose the background. Because I have too many.

---

<div class="post-metadata">

**Author:** ![natethegreat](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/natethegreat/32/59841_2.png) [@natethegreat](https://community.wanikani.com/u/natethegreat)\
**Post date:** [May 16, 2017, 11:18pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/9 "2017-05-16T23:18:42Z")

</div>

![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/5/8/5841094a3a3627b56ad73ee411dc2b14dc2850d3.jpg)  
now this is more like it ( ͡° ͜ʖ ͡°)

---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [May 16, 2017, 11:23pm UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/10 "2017-05-16T23:23:15Z")

</div>

Haha, I just used the same I did for my MAL, so I had already gone through that some time ago

---

<div class="post-metadata">

**Author:** ![valeth](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/valeth/32/625496_2.png) [@valeth](https://community.wanikani.com/u/valeth)\
**Post date:** [May 17, 2017, 1:29am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/11 "2017-05-17T01:29:58Z")

</div>

Nice theme. 👍

Just one thing I noticed:  
Are the topics supposed to be below the categories?  
Doesn’t quite look right.  
Maybe it’s just a browser issue on my end.

 ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/6/5/655cd7eee538454f51e8fe7620a398e414038a95.jpg)

---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [May 17, 2017, 1:37am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/12 "2017-05-17T01:37:13Z")

</div>

Oh. Those are supposed to be to the right. I have a feeling that’s happening because I set the .topic-list margin-left to 4.1% instead of the original 4.0%. It looks fine to me, though. Maybe it would be better to set it to 46px. Would you mind trying to set it to 46px instead?

edit: nvm. It seems it jumps down when the width reaches 570px when the margin is 4%, 820px when 4.1% and even larger when it’s 46px. 4% doesn’t give the right overlap, though, so I guess the theme isn’t going to work if you have a small screen

---

<div class="post-metadata">

**Author:** ![valeth](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/valeth/32/625496_2.png) [@valeth](https://community.wanikani.com/u/valeth)\
**Post date:** [May 17, 2017, 1:42am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/13 "2017-05-17T01:42:40Z")

</div>

I had to set it to at least 44px for it to appear on the right.

The problem is probably that the .topic-list also has a width set to 48%.

---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [May 17, 2017, 1:50am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/14 "2017-05-17T01:50:35Z")

</div>

Oh, yeah, that sounds plausible. Do you know how I could best make the overlap to the right perfect without it jumping down? 4.1% and 46px margin were the two options that I found worked.

---

<div class="post-metadata">

**Author:** ![valeth](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/valeth/32/625496_2.png) [@valeth](https://community.wanikani.com/u/valeth)\
**Post date:** [May 17, 2017, 1:51am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/15 "2017-05-17T01:51:43Z")

</div>

Just tested it with margin 4.1% and width 47.9% and it seems to work just fine like this.

---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [May 17, 2017, 1:53am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/16 "2017-05-17T01:53:16Z")

</div>

The overlap is a few pixels off to the right with 4.1% margin and 47.9% width for me  
 ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/2/d/2df52fee5fa087225f875c2de849f60d52bbcd2b.png)

Maybe I should just leave it at 4% and 48% so that it looks like it would without the theme. The poor overlap is barely noticeable

---

<div class="post-metadata">

**Author:** ![capnbmo](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/capnbmo/32/702189_2.png) [@capnbmo](https://community.wanikani.com/u/capnbmo)\
**Post date:** [May 17, 2017, 1:56am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/17 "2017-05-17T01:56:37Z")

</div>

I think I am missing something…  
 ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/8/5/85d67c4d727fa85023388bfa474e0492511b1820.PNG)

---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [May 17, 2017, 1:57am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/18 "2017-05-17T01:57:54Z")

</div>

A background and this userscript, it seems

> [@\[Userscript\] Lesson/Review Count in Forums](https://community.wanikani.com/t/Userscript-LessonReview-Count-in-Forums/16428):
>
> Lesson/Review Count in Forums [image] And if you don’t have reviews until later: [image] Instructions:warning This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely. Install a script manager in your browser (TamperMonkey or GreaseMonkey) Install this script from here: [Wanikani Forums Lesson/Review Status](https://greasyfork.org/en/scripts/27969-wanikani-forums-lesson-review-status) Go to or refresh the forums page. If it asks for your APIv2 key: …

---

<div class="post-metadata">

**Author:** ![valeth](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/valeth/32/625496_2.png) [@valeth](https://community.wanikani.com/u/valeth)\
**Post date:** [May 17, 2017, 1:59am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/19 "2017-05-17T01:59:56Z")

</div>

Yeah, I can see a difference between Firefox and Chromium rendering.

Weird.

---

<div class="post-metadata">

**Author:** ![capnbmo](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/capnbmo/32/702189_2.png) [@capnbmo](https://community.wanikani.com/u/capnbmo)\
**Post date:** [May 17, 2017, 2:12am UTC](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973/20 "2017-05-17T02:12:38Z")

</div>

Yeah I was trying to be funny. I fixed it now 😉

 ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/6/7/670a30bfe5d2dbe7401dab405027fe6f0938c065.jpg)

[Next page](https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973.md?page=2)
