New TF.TV Dark Theme - inspired by vlr.gg

#1

Fake

0 Frags – +

Stylus theme for TF.TV based on the styling of vlr.gg. Dark and Light themes available

https://raw.githubusercontent.com/fakemanoan/TFTV-Stylus-Theme/dark/screenshots/Dark/Home.png

Something I have been working on in my spare time.

Requires the Stylus extension to work, available for most web browsers. Tested on Chrome.

Additionally, there is a HQ icon style I made too. Improves the legibility of certain icons, especially when zoomed in. The file size is quite large however.

Show Content

https://raw.githubusercontent.com/fakemanoan/TFTV-Stylus-Theme/dark/screenshots/PNGVSSVG.png

Credits:
- Me: the CSS, class icons and nerd stars
- Roblan11: TFTV logo
- Flags: https://github.com/lipis/flag-icons

Download Links:
Theme Download from userstyles.world

HQ Icons Download from userstyles.world

WIP and any improvement/suggestions are welcome. Maybe a tampermonkey script in the future too, idk.

Enjoy!

Stylus theme for TF.TV based on the styling of vlr.gg. Dark and Light themes available

[img]https://raw.githubusercontent.com/fakemanoan/TFTV-Stylus-Theme/dark/screenshots/Dark/Home.png[/img]

Something I have been working on in my spare time.

Requires the Stylus extension to work, available for most web browsers. Tested on Chrome.

[url=https://github.com/fakemanoan/TFTV-Stylus-Theme/tree/dark/screenshots]Pictures[/url]

Additionally, there is a HQ icon style I made too. Improves the legibility of certain icons, especially when zoomed in. The file size is quite large however.
[spoiler][img]https://raw.githubusercontent.com/fakemanoan/TFTV-Stylus-Theme/dark/screenshots/PNGVSSVG.png[/img][/spoiler]

[b][h]Credits:[/h][/b]
- Me: the CSS, class icons and nerd stars
- Roblan11: TFTV logo
- Flags: https://github.com/lipis/flag-icons

[b][h]Download Links:[/h][/b]
[url=https://userstyles.world/style/6123/teamfortress-tv-dark-theme-vlr-gg-inspired]Theme Download from userstyles.world[/url]

[url=https://userstyles.world/style/6125/teamfortress-tv-hq-icons]HQ Icons Download from userstyles.world[/url]

WIP and any improvement/suggestions are welcome. Maybe a tampermonkey script in the future too, idk.

Enjoy!

#2

Fake

0 Frags – +

Changelog:

Show Content

19.04.2024
Added light mode as an option
Clean up CSS
Fix box shadows of some items
Clean up rounded corners of some elements

16.04.2024
Prevent some elements clipping off the page
Fix up some buttons
Fix drop shadows in some areas
Round off corners in a bunch of places
SVG discord icon
Bit of clean up

31.03.2024
Separator bars look proper when zoomed in
Header no longer looks ugly
Fixed some element alignment issues
Rounded off corners of some elements
Tweaked colours
Inbox fixes

21.08.2022
New header separation bits. Might look better, might look worse.
Fix for + and - frags in posts
Margin tweaks
Rounded corners for thread frag counts
Couple of small tweaks

[b][u]Changelog:[/u][/b]
[spoiler]
[b]19.04.2024[/b]
Added light mode as an option
Clean up CSS
Fix box shadows of some items
Clean up rounded corners of some elements

[b]16.04.2024[/b]
Prevent some elements clipping off the page
Fix up some buttons
Fix drop shadows in some areas
Round off corners in a bunch of places
SVG discord icon
Bit of clean up

[b]31.03.2024[/b]
Separator bars look proper when zoomed in
Header no longer looks ugly
Fixed some element alignment issues
Rounded off corners of some elements
Tweaked colours
Inbox fixes

[b]21.08.2022[/b]
New header separation bits. Might look better, might look worse.
Fix for + and - frags in posts
Margin tweaks
Rounded corners for thread frag counts
Couple of small tweaks[/spoiler]

#3

Brock

2 Frags – +

Now I will no longer be suddenly blinded by a flash of white when jumping between discord and tftv, thank you.

#4

roblan11

1 Frags – +

Thanks for the credit! Let me know if you need any other files / formats.
Looks sick! I love the subtle margin changes to make the layout a little more compact, looking forward to using it!

#5

mitch

6 Frags – +

@enigma...

you know its time

@enigma...

you know its time

#6

Fake

5 Frags – +

Hey all sorry about the bump. Added a light mode option to the style. You can change it on install, or just by selecting Light/Dark in the style settings. Also if you are savvy enough you can easily customise the colours yourself.

Image:

Show Content

https://raw.githubusercontent.com/fakemanoan/TFTV-Stylus-Theme/8d10a1b9276431b16e1ac5b767f5855bcbd26167/screenshots/Light/Home.png

Worth noting that you should get the style from userstyles.world for the latest version, and not userstyles.org. The one on userstyles.org is old and probably wont get updated.

Hope you like it

Hey all sorry about the bump. Added a light mode option to the style. You can change it on install, or just by selecting Light/Dark in the style settings. Also if you are savvy enough you can easily customise the colours yourself.

Image:
[spoiler][img]https://raw.githubusercontent.com/fakemanoan/TFTV-Stylus-Theme/8d10a1b9276431b16e1ac5b767f5855bcbd26167/screenshots/Light/Home.png[/img][/spoiler]

Worth noting that you should get the style from userstyles.world for the latest version, and not userstyles.org. The one on userstyles.org is old and probably wont get updated.

Hope you like it

#7

minicircle

1 Frags – +

Really nice work. Not super sold on the use of petite caps for the "Past News Articles" text that you've inserted into the front page since it looks a bit out of place relative to the rest of the text on the site, but that's easy enough for people to change after installing if they want to. Also, I feel like the text should be "Community News" instead of "Past News Articles" since the items are essentially the same as the ones under the "Community News" module in the left sidebar. Not a big deal, though. Ultimately, the execution of this userstyle is fantastic.