Unofficial Light Theme for Firefox and Chrome

AuronX

aka LukeLC
Veteran
Joined
May 31, 2012
Messages
1,277
Location
USA
Gil
28
Edgar's Tent
FFXIV
L'ulech Tia
FFXIV Server
Lamia
Free Company
Gaia
Many of you know this has been discussed before, and while the general consensus was to stick with a dark theme for the FFF, there were a fair number of people (myself included) that wanted something a little easier on the eyes. And so several months ago I created bTech Light, the unofficial light theme of the FFF. While it achieved many of my goals, the original theme was nowhere near as good as it could have been, and before long was sorely in need of an update. Well, time passed, I got better at web coding, and eventually I decided that a simple update wouldn't cut it; no, we needed a total overhaul. Nearly 2,000 lines of new code were written, and the result is bTech Light 2.0, the even lighter, even better unofficial light theme of the FFF. Version 2.0 aims not only to be readable, but attractive, and in some cases even improve upon the base design of bTech Blue. While 2.0 extends its reach beyond that of 1.0 there are still a few minor areas of the FFF that were not thoroughly redesigned, but everything should at least be usable even if it doesn't look perfect. More updates may still come in the future.

That aside, let's look at how to use this thing!


Installation:

0 - Make sure the FFF is set to the bTech Blue theme before using the modified theme, otherwise it won't work properly.

1 - Install the Stylish addon for Firefox or (not Google Chrome. The way Chrome interprets CSS code it's nearly impossible to get it to fully cooperate with the light theme. I've given up. You may still use it, but there will be several distracting errors).

2 - Visit the bTech Light 2.0 UserStyles page and hit the big, green "Install with Stylish" button.

3 - With the theme installed, visit any page on the FFF. Your Stylish addon icon will turn from grayscale to color, indicating a theme is available. (In Firefox, hit Ctrl + / to show the addon bar if you do not see the Stylish addon icon). Left click on the Stylish icon, and bTech Light will show up in the list of available themes. On Firefox, click the theme to enable it, and on Chrome, click 'enable' beneath the theme title.

4 - Leave feedback! This theme is something of a balancing act, and I've been coding it for several hours a day for the past week. I'm tired and chances are I've goofed up somewhere along the line. If you see something that needs changed, let me know and I'll update the theme.

5 - Check for updates! I'll keep working on little bits of the theme and submitting the changes to userstyles.org. On Chrome, all you have to do to get the latest version is left click on the Stylish icon, choose Manage Styles, and then hit 'Check for Update'. Firefox is slightly less convenient--left click the Stylish icon and choose 'Find styles for this site' (while browsing the FFF). bTech Light will show up and you can install the latest version if necessary.

Some screenshots:
(v2.0)
93735_additional_10428.jpeg93735_after.jpeg 93735_additional_10427.jpeg
(v1.0)
bTech Light 01.pngbTech Light 02.jpgbTech Light 03.png

Some info:

v2.1
-Several little bugfixes

v2.0
-Total overhaul
-Animation on certain links and buttons
-Some minor pages are incomplete, but all *should* be usable.

v1.1
-Some general touchup
-Updated Shoutbox
-Stylized polls

v1.0
-Covers all main pages of the FFF, including moderation tools
-Corrects image slider clipping and awkward element positioning
-Adds full header banner (even where bTech currently does not)
-Corrects minor positioning errors present within bTech itself

So there you have it. Hope you enjoy!
 
Last edited:
This is a great go and thank you for doing it. But could you maybe use white instead of grey?
 
could you maybe use white instead of grey?

Initially I tried going with white, but the trouble is that then light fonts don't show up well, and there are more of them around than you might think. Sure, I could force font colors, but I really wanted to leave the color open to the user.

Anyway, this theme is really due for an update by now in several respects. Not sure when I'll have time right now, but I'll bump it up on the priority list and try to get around to it soon. My CSS skills have improved dramatically since I first made this theme, so I might even start over and see what I can do.
 
For anyone still interested, I will be totally overhauling this theme. I've decided that it would be better to restrict font colors in favor of creating an aesthetically pleasing and truly usable theme instead of trying to work around the few bright fonts we see around here. In addition I've learned a lot about CSS since the first version of the theme, so you can expect things to just be better in general, overall. Stay tuned!

EDIT:

Update: The new theme is coming along very well; it's already many times better than the original. I may post a couple WIP screenshots later. For now I just thought I'd drop in a few of the features I'm excited about:

-First off, I actually have discovered a way that I can allow for some custom font colors. bTech Light 2.0 will simply take all bright font colors and darken them to be readable. Blue will still be blue and red will still be red, but just maybe not the same shade as users originally selected for use on a dark background. YAY!

-With bTech Light 2.0, the FFF will be a bit more animated. Literally. Sure, it's an unnecessary touch, but having buttons wiggle or fade just makes things feel very polished.

-While I'm at it, I'm also tweaking certain things I see as oversights in the original bTech code--all small stuff, but all put together I think it will make for a much cleaner experience than even what the normal bTech has to offer.

Things are really turning out nice this time around (if I may say so myself) so definitely stay tuned :)

EDIT 2:

A WIP screenshot, as promised:

bTech Light 2.0 - WIP Preview.png
 
Last edited:
Well, I am thoroughly exhausted from coding this week. Beginning next week I won't have time to work on this again for a while, so it really had to be done by today. Technically there's still a lot I could/should do with it, but at its current state version 2.0 of bTech Light covers everything important, and everything that's not important is usable even if it doesn't look awesome. Overall I am happy with it and feel it is a big step up from 1.0.

Check out the new theme in the OP!
 
First update to version 2 is here! 2.1 is nothing major, but it adds several little bugfixes. You should probably update, if you're using this theme. And if you're not, you should try it out ;)
 
Back
Top