New Forum Theme - Step by Step Guide ( Both Dark and Light Theme )

[Bloc]

Hi everyone,

Since you all requested old forum colors instead of the current forum theme, I made something for you. I tried to be as loyal as possible to old colors, while trying to keep the new modern look of the Forum. However, there are some things you need to know before,

• This is not an official theme.
• I made this for at most around 2 hours with playing around. So, don't expect this to work 100% flawlessly for all pages. However, I tried to check every single page to make sure everything is smooth.
• Style code(CSS) is messy as hell. I would rather jump from a bridge to give this to someone to show my professional value, but who cares, it's for the greater good. I guess..
• You need to install a third-party plugin. I will explain the simple steps. So no IE support ( Who the hell uses that anyway ). No mobile browser support as well - sorry Although I made it responsive for future usage.
• According to mods, Taleworlds will create a theme like this as well. So this is a temporary solution. If you guys like it so much, maybe they can directly adopt it. I don't know.
• Keep the main theme as Taleworlds, don't make it XenForo-default because it will make it look weird.

What has changed?

• Overall, all color codes are changed to make it look more light but also more Taleworlds-like​
• For 4k+ screen sizes, old-style had max-width which was limiting the post width and making it look too tiny and weird. Now it's gone. No more pixel waste.​
• Changed selection colors to reddish Taleworlds color.​
• Profile photos are not supporting transparency and they are not rounded-circular.​
• Side scrollbar stylized.​
• Main chat-like icon changed to dot/circle, like in good old days.​
• Changed overall font, to make it look fancier and more readable. I think it looks better.​
• Added some shadows, card and bunch of stuff that you probably won't notice and don't care​

Let's get started?

1. First thing first, you need Stylus Go to this link ( https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en ) and install stylus plugin to your browser. I'm not owner of this plugin and never worked in their development. So if you don't trust it, just skip this whole thread because it won't work without Stylus check bullet 1.1. If you feel like you are Edward Snowden and wanna check their code, you can actually do that because they are open source. Check this Github Page.
   1. 1
      

      If you don't want to use Stylus for some reason, you can also do it on Tampermonkey:
      
      - Save the CSS code from Bloc's step 4 somewhere on your computer.
      - Install Tampermonkey from here.
      - Open the extension's dashboard and create a new userscript by clicking the plus button.
      - Paste this into the text box:
      

      // ==UserScript==
      // @name oldtheme
      // @namespace http://tampermonkey.net/
      // @version 0.1
      // @description try to take over the world!
      // @author You
      // @include https://forums.taleworlds.com/index.php*
      // @resource THE_CSS [INSERT FULL CSS URL HERE]
      // @grant GM_addStyle
      // @grant GM_getResourceText
      // ==/UserScript==
      
      
      
      var cssTxt = GM_getResourceText ("THE_CSS");
      GM_addStyle (cssTxt);

      
      You can use a local URL too, but you'll have to allow the extension to access local file URLs. If you don't want to worry about that, you could attach the CSS somewhere on the web to use a normal URL. I think it can work on Chrome-based mobile browsers that allow the mobile version of Tampermonkey (didn't try it yet though).

2. Assuming that you installed the plugin and able to see that tiny Stylus icon on your plugins bar, while you are in any Taleworlds Forum page, click to that and you will see a pop-up. You will see an url like shown in the image. Under the "Write style for:" , click only forums which will allow you to create a forum style.
3. 
4. Clicking to that will open a window. At the top there is a field where you can change the name. Type something like "Cool TW Theme". And for the code field, copy and paste this at below. (CTRL+A to text (Make sure you copied all.. It's a huge text) it will select all. Right click, copy.) (Go to link, its too big now to paste here)
   Darklord Theme:
   
   https://pastebin.com/raw/Zs4XZx6Q
   Darktimes Theme:
   
   https://pastebin.com/raw/yQ6s8Scq
   Light TW Theme:
   
   https://pastebin.com/raw/bagF3TVT
   
   If copy paste takes too much time, use this link to download it. Open it with your favourite editor and copy piece by piece
   Darklord -
   Light TW -
   Darktimes -
   And after you paste it to code field click Save and boom, you now have oldie theme.
5. Enjoy

What about Mobile?
Check this, from DuskVoyager

You can make it work on mobile too:

- Download the Tampermonkey app.

- Save the newest CSS code on your computer.

- Upload your CSS file somewhere accessible at all times, and make sure the direct link to the file (no redirects) isn't extremely long.

Spoiler: the extremely overcomplicated method I prolly didn't need to use anyway

I managed it by hosting the file on my server, tunneling via ngrok, saving a snapshot of the ngrok URL on Wayback Machine, and then copying the URL of the iframe of the snapshot.

- Create a new userscript on your phone (the others aren't so important, but make sure anything starting from the @include line is written correctly), then save and enable it:

// ==UserScript==
// @name         oldtheme
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include        https://forums.taleworlds.com/index.php*
// @resource    THE_CSS [COPY FULL DIRECT CSS URL HERE]
// @grant       GM_addStyle
// @grant       GM_getResourceText
// ==/UserScript==



var cssTxt = GM_getResourceText ("THE_CSS");
GM_addStyle (cssTxt);

PS. The newest version's resource link:

https://web.archive.org/web/20200131161049if_/https://878ad556.ngrok.io/style1

FAQ

Spoiler: Why do I have to download this plugin?

Since it's not official, and since we are good people who don't want to hack forum, we can't make changes on our own. Therefore, we need to do this manually for now. Plugin is simply adding style code onto your page when you request it.

Spoiler: This looks bad, I wanna go back. How can I do that?

You can directly delete the plugin if you are not using for anything else. Or you can simply delete the style file. Just go Taleworlds Forum page, click Stylus and click three dots, say delete. Done.

Spoiler: How much do I owe you?

Since I didn't do this for money or something, you don't owe me anything at all. Have fun!

Spoiler: I think you forgot to change XXX's color.

Just reply to this thread with tagging me. Let's see what we can do. It would be easier if you can provide a Screenshot as well.

Spoiler: I have a suggestion!

Feel free to say anything you want. It's a forum theme after all, I would be glad to listen all suggestions and such.

Screenshots

Spoiler: New Screenshots

Spoiler: Old Screenshots

 

[Eärendil Ardamírë]

Thanks for the work you have put into it

No browser support as well

Only looks like I need to wait a bit more ^^
Thanks regardles! Maybe it's of help for the responsible persons

 

[Bloc]

Thanks for the work you have put into it

Only looks like I need to wait a bit more ^^
Thanks regardles! Maybe it's of help for the responsible persons

Ah damn it, it should be "No mobile browser" support. I did a mistake in there, fixed now. But if you already understood it as mobile browser, then yeah you need to wait a bit more unfortunately.

 

[Eärendil Ardamírë]

Ah damn it, it should be "No mobile browser" support. I did a mistake in there, fixed now. But if you already understood it as mobile browser, then yeah you need to wait a bit more unfortunately.

That changes it again. Will look into it with more concentration tomorrow when I am more awake.

 

[Age of Empires ¶ Densetsu]

It looks better. Not much you can do about polishing a hot steaming turd, but hey. Thanks for doing a good deed.

 

[Zombie Warrior]

is there any way to install this on firefox?

 

[Bloc]

is there any way to install this on firefox?

Yes, just use this link, steps should be same

Stylus â Get this Extension for ð¦ Firefox (en-US)

Download Stylus for Firefox. Redesign your favorite websites with Stylus, an actively developed and community driven userstyles manager. Easily install custom themes from popular online repositories, or create, edit, and manage your own personalized CSS stylesheets.

addons.mozilla.org

And for Opera, it should be same with Chrome and for Edge-Chrome it should be same as well since they are all Chromium based

 

[Marko͘]

Good stuff Bloc

 

[Captain Obvious]

Woah.. no mobile support? *DOWNVOTE*

But seriously nice one man, much appreciated support until the official one comes out.

 

[Lucon]

It has been a great work, man, Bravo! ? I think you should make a Turkish version of it.

Because some of the audience maybe like to use open theme, so I think it will be in information format for them.

 

[Arvenski]

Oh, thank God. You're a life-saver, man. After so many years of looking at the old Rev. 5 theme, that blue was just throwing me way off.

 

[hnjuri]

How do you open an old forum post?

 

[Arvenski]

How do you open an old forum post?

https://forums.taleworlds.com/site-old/index.php

 

[hnjuri]

https://forums.taleworlds.com/site-old/index.php

Ty

 

[Fddd]

Thank you, everything is good, except that when using theme, forum window crawls over the edges (it is fixed by changing .p-body-inner width from 100 to 85). Chrome 79.0.3945.130 1920x1080.

Spoiler

Also, we have different color for subforums (this is bug or not?) very bad visible

Spoiler

 

[The Bowman]

Cool stuff. Now my eyes are not bleeding. I hope TW will just adopt this and be done with it.

 

[Antoine de Saint-Exupéry]

no offence to bloc, but i hope they don't.
his work is appreciated, and a good start, but far from all-encompassing, and an official theme will require quite a bit more development.

 

[Bloc]

no offence to bloc, but i hope they don't.
his work is appreciated, and a good start, but far from all-encompassing, and an official theme will require quite a bit more development.

None taken. You are right and I'm not claiming otherwise anyway. But to be completely honest, I think you won't see an official theme anywhere soon. Or at least, it will be SoonTW

Thank you, everything is good, except that when using theme, forum window crawls over the edges (it is fixed by changing .p-body-inner width from 100 to 85). Chrome 79.0.3945.130 1920x1080.

Spoiler

Also, we have different color for subforums (this is bug or not?) very bad visible

Spoiler

Yeah that's my bad. Changing it now. Also fixed some few points too. Updated the first post

 

[Arvenski]

Yeah that's my bad. Changing it now.

Subforum/board names are more legible now, which is good, but now it's the thread names that are very hard to read:

Spoiler

 

[Antoine de Saint-Exupéry]

But to be completely honest, I think you won't see an official theme anywhere soon. Or at least, it will be SoonTW

for sure! it'll be a while, and yours is great for those who don't want to wait till it's ready. that's why i stickied your thread