Two site themes that will boost your forum experience: light & dark

User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Two site themes that will boost your forum experience: light & dark

  • Quote

Post by Dolan »

Eager to upgrade your site experience with a freshened up set of two site themes, a light and a dark-mode one?
I know you've been asking for a dark mode for the site for years, for those late evening/night forum-spamming sessions, when you really needed to win an argument on the internet before going to sleep.
Wait no more.

A new site theme is here that comes in two flavours: a light one for daylight and a dark one for night mode or very dim environments.
Note: This is only for the desktop version of the site, not for mobile.

Main features:
  • Two-sidebars site layout with a narrower midsection, which should improve readability
  • Top-side site menu with a rich choice of buttons, that are no longer hidden in menus
  • New banner that actually looks like a banner
  • Reshaped user profiles, posts, buttons, dropdown menus, every significant element that is part of the core forum experience has been reworked
  • Fixed position action bars and pagination bars, so that you can always have page tools available on the top of the screen, even if you keep scrolling down the page
  • New innovative "Navigation" sidebar which allows you to jump from a subforum to the top level forum section with just a click
  • The themes keep as much as possible from the good parts of the original site theme, so things will also look very familiar
  • New fonts that will make text on the site look crisp and easy to read, even from a distance
  • An actual dark mode that is designed to reduce blue light and not mess with your sleep
  • Site stats are now easy to see on the right, so you don't have to scroll to the bottom of the page to see who's also online
  • Improved login experience
  • And many many more features
But enough with the marketing drivel, let's take a look at some of the main features, let's see what they actually look like.
Home page - Light mode

Image
Home page - Dark mode

Image
Forum main page - Light mode

Image
Forum main page - Dark mode

Image
Subforum topics view - Light mode

Image
Posts - Light mode

Image

Image
Posts - Dark mode

Image

Notifications:
Image

Navigation sidebar:

This sidebar only shows up when you're in a subforum, because there's not much to navigate on the top level of the forum.
You can just use the Forum and Home buttons there.

Image

Special-purpose pages - members list, dark mode:
Image

Details, features - filter function on the home page:
Image

Login:
Image
Scheme of site navigation elements:
Image
:arrow: Install these two site themes that will improve your sleep, rev up your energy and make you lose 5 kilos. :wood:
How to install and what to install

1) We'll need to install a browser extension first

In order to make this work, you need to add or use a browser add-on or extension that can load custom styles for a site. Don't worry, it's very ez.
I recommend using Stylus, which is available on both Chrome and Firefox. You can install it from here:

Chrome: https://chrome.google.com/webstore/deta ... bafhncgmne
Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/

Once you've installed this extension, make sure it's enabled so it can actually run custom styles.

Now, you can go to the Extensions tab (in Chrome it now looks like a puzzle piece button on the top bar, which leads you to a menu with all the installed extensions) or click on the Stylus extension button on your browser toolbar (in Firefox) and click Manage. Then you will see a white screen with some buttons and menus.
2) We're gonna create the first style

Here you can click "Write new style" from the panel on the left, which will create a new style sheet with some options on the bottom.
First, let's set a name for this style: you can enter any name you like, for example agecom-light or esoc-light. You will need to create one style for each theme, but let's first finish one then move on to the next.
You can enter the name on the top left field below the Add Style header. Then click the button Save below it.
Now, let's set the URL where this style will apply. You will find this option below the dark window in which you can enter the code.
You see a field there called "Applies to Everything". Click on the + button.
Now you will see a dropdown menu with some choices -- pick "URLs on the domain".
Right next to this menu, in the field on the right, paste the name of the site domain: eso-community.net
Save. Now you can enter the code for the light theme in the dark window above.

I can't paste the code here, since it has over 130000 characters, more than 5000 lines of code. And forum messages are limited to 100000.
So we're gonna use Pastebin, but I'll link you directly to the raw code, so you can just Ctrl-A Ctrl-C it from here:
https://pastebin.com/raw/vKh5S1zA

Now that you've copied the code for the light theme, paste it in that dark window that you've created with the Stylus browser extension.
Make sure you have a name for it that gives you a clue about it being the light theme. Hit Save again. Then click the button "Back to manage" from the leftside panel.
3) Then create the 2nd style

Now you're back on the main screen of Stylus and can create a new style for dark mode. Click on Write new style again, fill in the field on the top left with a name for the dark theme, then Save.
Again, go to "Applies to Everything" on the bottom. Click on the + button. Pick "URLs on the domain" from the dropdown menu, enter the eso-community.net name on the right field. Save.
Now you can enter the code for the dark theme from here -- open this in another browser tab:
https://pastebin.com/raw/ytmC55dB

Copy the whole text and paste it in that dark window from the Stylus extension. Save. Now you should have two style sheets for the domain eso-community.net.

All we need now is to enable the theme you'd like to use.
After you load the site, you can click on the button where browser extensions are then click on the Stylus button (in Chrome) or directly on the extension button (in Firefox), then you will see a small dialog pop up, it should look like this:

Image

Check one of the themes you'd like to use right now. Only one of them can be used at a time. If you want to switch to the other, first enable the other by clicking its checkbox then disable the previously enabled one by unchecking its box. In this way, you can switch smoothly between site themes, without seeing any weird transitions. I could have maybe automated this with a script for you, but that would involve installing another extension that could run custom Javascript and I don't want to confuse you. Let's keep it simple.
No, nothing will happen to your browser, nobody's hacking you, it's just CSS code, it can't do anything other than just change how a site looks like for you on a given address. And the Stylus extension is recommended by the team at Mozilla, so I suppose they found nothing shady about it. It's used by hundreds of thousands of people.
If you can't manage to get it installed, let me know and I might do a Youtube vid with a tutorial on how to install it step by step, when I get the time.

Congratulations, you've made it this far and you've earned your improved site experience! :smile: :food: :wood: :coin:

Known issues:
- When clicking on a notification, the page will direct you to the post which mentioned you or to your post that was liked, but since these themes have a fixed banner on top, the post will have one part hidden (about 1-2cm) under the banner. There's not much I can do about that, since this is caused by how the site script aligns the post in the viewport in the original site layout. If a significant number of people want a version of these themes with a site layout that is completely scrollable (no fixed banner and sidebars), I might develop a future version which enables that. It's actually easier to have that, but the drawback is that you will not have sidebars and toolbars available at all times when the page is scrolled down, you'll have to scroll up to get to those (just like you do now).
The site layout in these themes looks a bit more like the Discord interface, which also has some fixed menus and sidebars, while only keeping the chat content scrollable.

- The filter function that you can pop up by clicking on the sidebars wheel buttons (to pick whatever types of streams you want to see or whatever types of topics you want to see) might have some quirks. On the Home page, if you scroll down and then click on that filter wheel button, you won't see that element pop up, because it's somewhere scrolled up. It only works right when the page is not scrolled.
On the rest of the site, the sidebar filters work right if you click the wheel button and then click it again to close that element, after you finished making your picks. But if you keep that filter popped up then scroll the page, the element will be moved up. However, the next time you click again, it will spawn in the right place.
The reason why these things happen is because of how they were attached to the page. They were not done in the same way on the home page and the rest of the site. They have different parent elements, so if you make any changes to how elements on the page are displayed (like I did here by reshaping the site layout to improve things) then this is likely to lead to side effects on their child elements.


Disclaimers:
- This was developed for the desktop version of the site, for two reasons: mobile browsers don't really have add-ons/extensions to be able to load custom themes (and you can force a dark mode on mobile anyway) and the mobile version of the site is already OK, there's no need to optimise it much, since it has fewer elements anyway.

- These themes were developed and tested mainly for 1080p and 1440p resolutions. Above 2K, it's likely they will work well, as the site layout will just expand, increasing space. The current code only has specially made banner versions for 1080p and 1440p. Meaning on those resolutions there are separate, custom-made banners that provide an optimal experience. Below or above these resolutions, it's possible the banner will either look slightly partial or it might get zoomed in to cover the area better on higher resolutions. A future version might include more variations to cover more cases.
Below 1080p, some things might get crowded here and there and the forum navigation panel on the right bottom side might move on top of the ESOC utility bar above it. So, if there's a significant number of people with screens below 1080p and they experience significant issues and glitches, you can report them in this thread and I might fix them in a future version.

- Also, these themes were developed and tested on Chrome and Firefox, the latest versions, and rely on some modern browser features. So, if you happen to use a very old browser, it's possible some things might not work well. Though, I assumed that since we're on a gaming forum and gamers are likely to use more updated software, I don't think there are many people here running browsers from more than 5 years ago. Browsers like Edge or Brave are also likely to work fine, since they're based on Chromium (Chrome's open source version).

- I have no idea how the themes look like on Linux and macOS. Normally, they should look mostly the same as on Windows, if you're using Chrome or Firefox. If there's a significant number of people using Safari and some things need to be adjusted/fixed, let me know and I'll run some tests on a macOS machine.

- Despite my best efforts to make sure most of the site elements are covered, it's possible there might still be some loose ends in some corners that I've neglected (for example some tables in the user profile sections have a weird structure, so their headers might be misaligned). Just report them and I'll try to fix them when I get the time.

- If you have a very low-end computer or very slow internet, it's possible when you load the site with a theme enabled you will see the old site theme flashing before your eyes for a few tens of milliseconds. This happens because this code runs after everything from the site is loaded first, so on slow machines/internet, the page loading event might take a while, before it loads this custom code. Normally, after the code is loaded in memory, the browser will load it from there, so subsequent page loads should perform better.


If you like these themes and find that they improve your forum experience, you can support their development by making a donation to my PayPal: [email protected]
It might offset my electricity bill for those months during which I developed the themes. Cheers.
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

= Reserved =
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

Looking forward to hearing from you what you like/dislike or want to see added in future versions.
But tbh it might take a while for me to have time to work on a next version.
United States of America evilcheadar
Gendarme
Posts: 5729
Joined: Aug 20, 2015
Location: USA

Re: Two site themes that will boost your forum experience: light & dark

Post by evilcheadar »

Based and blackpilled
A post not made is a post given away

A slushie a day keeps the refill thread at bay

Jackson Pollock was the best poster to ever to post on these forums
User avatar
Great Britain Riotcoke
Retired Contributor
Donator 01
Posts: 4053
Joined: May 7, 2019
ESO: Riotcoke
Location: Dorsetshire
Clan: UwU

Re: Two site themes that will boost your forum experience: light & dark

Post by Riotcoke »

Jesus chirst Dolan, thanks for putting all this work in mate, truly amazing.

Slight problem with using it as staff with the navigation bar at the top being squished, which I believe is because of the two extra buttons that staff adds. Other than that it's honestly perfect.
Image

twitch.tv/stangoesdeepTV
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

@Riotcoke
Ah well, I can't see that to fix it. Maybe if you post a screenshot, I could get an idea.
Yeah, that's the problem, if the site has extra features for staff, I couldn't see those, so I couldn't take them into account.
Maybe if you guys give me a temporary role, so I can see those, I could fix these issues.
Then you can remove the role, idc.
Great Britain InsectPoison
Lancer
Posts: 963
Joined: Mar 6, 2016

Re: Two site themes that will boost your forum experience: light & dark

Post by InsectPoison »

Why isnt this guy in the dev team?
Image
Image
Image
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

Btw dark mode is made to make you fall asleep, so it's extra dark. It's all based on science and lab tests
User avatar
United States of America SoldieR
Pro Player
Posts: 2249
Joined: Feb 22, 2015
ESO: SoldieR
Location: Chi City

Re: Two site themes that will boost your forum experience: light & dark

  • Quote

Post by SoldieR »

InsectPoison wrote:Why isnt this guy in the dev team?
...uh oh...
User avatar
No Flag fightinfrenchman
Ninja
Donator 04
Posts: 22816
Joined: Oct 17, 2015
Location: Pennsylvania

Re: Two site themes that will boost your forum experience: light & dark

  • Quote

Post by fightinfrenchman »

Riotcoke wrote:Jesus chirst Dolan, thanks for putting all this work in mate, truly amazing.

Slight problem with using it as staff with the navigation bar at the top being squished, which I believe is because of the two extra buttons that staff adds. Other than that it's honestly perfect.
It's good to discriminate against staff members
User avatar
United States of America occamslightsaber
Retired Contributor
Posts: 1325
Joined: May 31, 2019
ESO: L1BERTYPR1ME

Re: Two site themes that will boost your forum experience: light & dark

  • Quote

Post by occamslightsaber »

fightinfrenchman wrote:
Riotcoke wrote:Jesus chirst Dolan, thanks for putting all this work in mate, truly amazing.

Slight problem with using it as staff with the navigation bar at the top being squished, which I believe is because of the two extra buttons that staff adds. Other than that it's honestly perfect.
It's good to discriminate against staff members
You will never find a more wretched hive of scum and villainy.
The scientific term for China creating free units is Mitoe-sis.

I intend all my puns.
User avatar
Netherlands Mr_Bramboy
ESOC Media Team
Donator 01
Posts: 8147
Joined: Feb 26, 2015
ESO: [VOC] Bram
Location: Amsterdam

Re: Two site themes that will boost your forum experience: light & dark

Post by Mr_Bramboy »

Beautiful! Absolutely amazing

Image This is what Riot was talking about, but the buttons are still clickable so it's no big deal. The two extra buttons are admin control panel and moderator control panel.
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

Thanks. I put a lot of work into these themes. Took about 3 months to finish.

Hm, well, I could fix those if someone volunteers to give me temporary access to their account or something. I would need to open the dev tools to see the classes and the DOM structure of those elements.
It also seems that your name still displays in the top right corner, even though I replaced that with just a user icon in the two themes. So it seems staff has a slightly different nav structure. I should have remembered that since when I was admin.
Also I need to fix that number which shows notifications, it's obstructed by the bell. I never had 40 unread notifications so I had no idea it would look like that.

Yeah, the themes look pretty good, because they've been polished for a few months, gradually. So once they reached a stable version beyond which I didn't have any significant things to improve, I decided to make them public.
Initially, I just developed them for myself, because my extension which forces dark mode on sites didn't work well on this forum. So I decided to just write one myself.
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

One solution I'm thinking could work is replacing the text in those elements with some icons that represent the functions of those buttons.
Or just using much smaller font size, like those social buttons use.

These could be solved in like 20 mins.
France iNcog
Ninja
Posts: 12753
Joined: Mar 7, 2015

Re: Two site themes that will boost your forum experience: light & dark

Post by iNcog »

so much winning, son
User avatar
United States of America site
Lancer
Donator 01
Posts: 713
Joined: Aug 7, 2016
ESO: site
Location: Oklahoma, USA

Re: Two site themes that will boost your forum experience: light & dark

  • Quote

Post by site »

I love a good site theme.
Great Britain Hazza54321
Pro Player
Winter Champion 2020 x2Donator 01
Posts: 7922
Joined: May 4, 2015
ESO: PrinceofBabu

Re: Two site themes that will boost your forum experience: light & dark

Post by Hazza54321 »

Dolan wrote:One solution I'm thinking could work is replacing the text in those elements with some icons that represent the functions of those buttons.
Or just using much smaller font size, like those social buttons use.

These could be solved in like 20 mins.
Have my babies
User avatar
Kiribati princeofcarthage
Retired Contributor
Posts: 8605
Joined: Aug 28, 2015
Location: Milky Way!

Re: Two site themes that will boost your forum experience: light & dark

Post by princeofcarthage »

When I read the topic name and then I saw Dolan's name first, I legit thought he was back in dev team. Anyways good job @Dolan
Fine line to something great is a strange change.
User avatar
No Flag Kanoo
Skirmisher
Posts: 134
Joined: Jan 7, 2020

Re: Two site themes that will boost your forum experience: light & dark

Post by Kanoo »

Wow, this is really beautiful. Thank you, Dolan.
My only qualm however is that the "Age of Empires Community" logo is not centered wrt to the space above and below the logo. Decreasing the space below by 1 or 2 points should fix it, allowing for the actual topics to begin higher up on the web page.
Attachments
esoc website 1.PNG
esoc website 1.PNG (301.58 KiB) Viewed 889 times
thebritish wrote:
19 Jan 2016, 09:58
So, you are saying that if i watch H20's rec, i can beat anyone below H20's level because i know his BO?
User avatar
Netherlands edeholland
ESOC Community Team
Donator 01
Posts: 4988
Joined: Feb 11, 2015
ESO: edeholland
GameRanger ID: 4053888
Clan: ESOC

Re: Two site themes that will boost your forum experience: light & dark

Post by edeholland »

If you check his examples, there was a sign-up banner. With the banner the spacing is about equal.
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

@Kanoo Yeah, you're right. When I finished the release version of the theme, there was a tourney, so the logo was positioned to take that into account.
After the tourney was over and that announcement was taken down, I realised the logo wasn't centered properly, so I made new adjustments.
I've been meaning to release a new version with some minor updates, that included fixing the logo position. But I kept delaying this, hoping I would add more substantial changes.
Anyway, I'll release this minor update now. So you can update the code paste from the Stylus styles, using the same links:

Light mode:
https://pastebin.com/raw/vKh5S1zA

Dark mode:
https://pastebin.com/raw/ytmC55dB

Just select all the raw code, copy and paste into the respective style window from each installed style. Then save and reload the site, then do a hard refresh of the loaded page using one of these shortcut keys:
Ctrl Shift R (in Windows Chrome and Firefox)
Applekey Shift R (in Chrome/Firefox in macOS)
Applekey Option R (Safari, macOS)
If you're using Chrome or Firefox on Linux, the Windows keys will probably work.

Updates:
- Age of Empires logo centered correctly
- Quotes within quotes should display more consistently now (basically this update was made only to make the "And it's that time again..." post display right)


It's possible that there are other small adjustments I made here and there that I forgot about. Unfortunately, if you are a staff member the old issues will persist, since I cannot fix them if I don't see them.
So if you want me to fix them you can give me a temporary throw-away staff role, for like 20 minutes, then remove it, after I figure out how to make things display right for you too. If not, I guess you'll have to make do with the way things display for you right now.
Let me know if there are other issues that need to get fixed. I had it planned to add a version of the banner for 4K displays, for example, but didn't have the time to make one until now.
User avatar
No Flag Kanoo
Skirmisher
Posts: 134
Joined: Jan 7, 2020

Re: Two site themes that will boost your forum experience: light & dark

Post by Kanoo »

Thank you so much, Dolan!
thebritish wrote:
19 Jan 2016, 09:58
So, you are saying that if i watch H20's rec, i can beat anyone below H20's level because i know his BO?
User avatar
India iron_turtle
Musketeer
Posts: 97
Joined: Jan 25, 2021
ESO: iron_turtle

Re: Two site themes that will boost your forum experience: light & dark

Post by iron_turtle »

Woah, thanks for the dark theme. My eyes are saved!
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

Quick update to adapt the theme to the changes made in the streams sidebar.
It only takes a minute to refresh the code from the theme.

Go to Stylus, click Manage, click on the dark theme, Ctrl-A and delete all the code there, then go to
https://pastebin.com/raw/ytmC55dB

Ctrl-A, copy all the code from here and paste it in the Stylus dark theme window, and Save.

Then go back to Manage and do the same for the light theme, using the code from this link:

https://pastebin.com/raw/vKh5S1zA

Should be fine now.
User avatar
Chad Dolan
Ninja
Posts: 11806
Joined: Sep 17, 2015
Location: 🕓‏‏‎

Re: Two site themes that will boost your forum experience: light & dark

Post by Dolan »

Made a mistake and forgot to test this update on resolutions under 2K. It's possible that if you did the update and use a 1080p monitor things might look too small and out of scale.
Updated both pastebins now to hardcode a minimum height for those III and IV icons. I forgot to take into account that those icons would get resampled for resolutions under 2K (2K is what I use on my work monitors).
Should look right now for all resolutions:

Image

Who is online

Users browsing this forum: No registered users and 1 guest

Which top 10 players do you wish to see listed?

All-time

Active last two weeks

Active last month

Supremacy

Treaty

Official

ESOC Patch

Treaty Patch

1v1 Elo

2v2 Elo

3v3 Elo

Power Rating

Which streams do you wish to see listed?

Twitch

Age of Empires III

Age of Empires IV