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

Currently Viewing (Users: 0, Guests: 1)

Bloc

Duke
WB
Best answers
1

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 :sad: 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:
      JavaScript:
      // ==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. 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)
    Dark Theme:
    Light Theme:

    If copy paste takes too much time, use this link to download it. Open it with your favourite editor and copy piece by piece
    Dark - https://pastebin.com/Zs4XZx6Q
    Light - https://pastebin.com/bagF3TVT

    And after you paste it to code field click Save and boom, you now have oldie theme.
  4. 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.
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:
JavaScript:
// ==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:
Code:
https://web.archive.org/web/20200131161049if_/https://878ad556.ngrok.io/style1
FAQ
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.
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.
Since I didn't do this for money or something, you don't owe me anything at all. Have fun!
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.
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
 
Last edited:

Bloc

Duke
WB
Best answers
1
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 the Mariner

Subforum Moderator
WBWF&SM&B
Best answers
64
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.
 

Densetsu

Age of Empires II
Marquis
Best answers
0
It looks better. Not much you can do about polishing a hot steaming turd, but hey. Thanks for doing a good deed.
 

Bloc

Duke
WB
Best answers
1
is there any way to install this on firefox?
Yes, just use this link, steps should be same

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
 

Captain Obvious

Master Knight
M&BWBWF&SNWVC
Best answers
0
Woah.. no mobile support? *DOWNVOTE*

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

Lucon

Count
WBWF&SNWVC
Best answers
0
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

Count
M&BWB
Best answers
0
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.
 

Fddd

Knight at Arms
WBVC
Best answers
1
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.

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

Antoine de Saint-Exupéry

Dancing to electro-pop like a robot since 1984
Subforum Moderator
M&BWBNWWF&SVC
Best answers
0
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

Duke
WB
Best answers
1
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.

Also, we have different color for subforums (this is bug or not?) very bad visible
Yeah that's my bad. Changing it now. Also fixed some few points too. Updated the first post
 

Antoine de Saint-Exupéry

Dancing to electro-pop like a robot since 1984
Subforum Moderator
M&BWBNWWF&SVC
Best answers
0
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 :razz: