Stylus (Addon) Forum Themes

Jaskalas

Lifer
Jun 23, 2004
33,381
7,444
136
OUTDATED, no longer working.

For Xenforo 2.0 Themes, try the new thread.

CSS Changes for Custom Anandtech Xenforo Forum Themes
About:
Is that a blinding white screen? Suffer no longer. Learn how to edit a website's CSS style yourself, with the help of an addon to your browser. For this topic we are specifically using Stylus but there may be other options out there. Simply copy or write some CSS code into the addon to transform any website of your choice.

NOTICE: Addon Replacement: (2018-7-05)
Firefox has officially warned us against the use of Stylish due to web traffic logging / reporting. As such, I am now referencing a different addon: Stylus. Pretty similar functionality.

Browser Addon Links:
Current Themes:

Light

Dark

How to Use:
  • Install a browser addon for user-defined CSS.
  • Copy the CSS code provided to use as a "Theme".
  • Paste that code into your addon.
  • Toggle it on/off at your discretion.

Disclaimer:
This topic and its contents are provided AS IS with no warranty or support. I am not responsible for or affiliated with in anyway the Stylus Addon, its developer, or its associates. Use at your own risk. Content, Addon, and Themes may change or cease to exist at anytime. Changes to a website are likely to render Themes broken, unusable, or obsolete. There are no guarantees here or in life. Enjoy! (maybe...)

Community Support:
I fully welcome the participation of others in creating additions, tweaks, changes, or entire Themes to this project. I would publish complete or decent Themes in the OP alongside my own. Helping provide everyone else as much customization as we can find a use for. Replies to share code snippets are welcomed.

My own Themes are a work in progress, and there is more work to be done. The first Theme was published in about ~36 hours of its beginning.

Q&A

Where's my Dark Theme?
I'm new to making custom themes for other websites. It takes time to scrape the selectors to target the changes in CSS. A truly Dark Theme requires changing practically every piece of color, background, font, border, etc on a website. That's a much larger and more involved task than simply providing another light theme with more color and contrast.

Now I'm not saying we're going to get there, but a Dark Theme is on the agenda and perhaps with a little community contribution to find all the changes needed... We'll just have to see! (Anandtech is likely to provide their own first)

Tan theme is incomplete!
Glad you noticed! Yes, it's a work in progress. I decided to share it when 1: My eyes were no longer bleeding, 2: I was comfortable with its general use myself. There remains work to do on it. You'll notice I designated it a version of 0 (Zero) point whatever. When it's considered feature complete it'll be called v(1.0)

I hate Tan!
Yeah... I was inspired by another forum that shall remain nameless, but I understand it's not for everyone. I'll release an improved Vanilla Theme shortly with all the tweaks and 90% fewer color changes. Just don't blame me if you go blind.

Feel free to suggest other colors!

The sidebar bothers me!
Some contributors kept the sidebar. You can control it with a small change. The code to hide it is as follows:
Code:
/* Remove the Sidebar */
.sidebar {
  display:none;
}
.hasRightSidebar .mainContent {
  margin-right: 20px;
  width: 100%;
}

Can you reduce the forum width?
I could... but after I did that I noticed Xenforo provides its own "width toggle" at the bottom of the page. Go ahead and try it. It's built right in! I found it suitable for 1080p but if it really bothers you there is code to solve the problem of scanning your head 90 degrees. Other methods include using a smaller screen or sitting further away or...

Assuming you don't mind me trying some changes?
Think of this as open source. You are free to edit everything / anything as you like. I posted this as a resource to help others.
 
Last edited:

Jaskalas

Lifer
Jun 23, 2004
33,381
7,444
136
Original Theme:

Vz6oyJc.png


Vanilla Theme:


AsNXoCZ.png



Reverse Vanilla Theme:

kQ1GLjp.png


Tan Theme:


5g8EHzi.png


fp2CInz.png


Reserved Space...
 
Last edited:
  • Like
Reactions: amenx and MongGrel

Carson Dyle

Diamond Member
Jul 2, 2012
8,174
524
126
I'm working on one at the moment, but more for own use. Maybe I'll publish it, but it will remain a lighter colored theme, as I find high contrast black on white/gray text to be easiest for me to read.

If your theme is intended for use on full-sized monitors, something to consider is tightening up a lot of the vertical spacing. Reducing button height, navbar height., some of the padding and margins.

I also prefer a fixed width to the page body. When you eliminate the right-hand column, viewing the forum in a 'normal' sized window (for me, about 1050 pixels wide) makes reading the text of messages a little more difficult.
 

Jaskalas

Lifer
Jun 23, 2004
33,381
7,444
136
I'm working on one at the moment, but more for own use. Maybe I'll publish it, but it will remain a lighter colored theme, as I find high contrast black on white/gray text to be easiest for me to read.

I'd be happy to support as many published Themes as possible by adding them to the OP.

If your theme is intended for use on full-sized monitors, something to consider is tightening up a lot of the vertical spacing. Reducing button height, navbar height., some of the padding and margins.

I also prefer a fixed width to the page body. When you eliminate the right-hand column, viewing the forum in a 'normal' sized window (for me, about 1050 pixels wide) makes reading the text of messages a little more difficult.

Have you tried the "Toggle Width" button on the bottom of the page? Go ahead and try it out then report back. I completely agree that the forum should not be full screen on Desktop. I only removed max-width from the Theme because Xenforo has this option already. If it's not sufficient for many people we can pick a size and set it.

Code:
html.is-fullWidth .pageWidth {
  max-width: 1200px;
}
 

Anubis

No Lifer
Aug 31, 2001
78,716
417
126
tbqhwy.com
this is much better

if you are going to work on a dark theme this is what the old one used to look like

Fusetalk
darktheme.JPG

atdark.jpg



VB
forums.jpg


blank.jpg
 

JujuFish

Lifer
Feb 3, 2005
10,999
733
136
Is it possible to use Stylish to add a sidebar with the different subforums, like we had with VB?
 

Crono

Lifer
Aug 8, 2001
23,720
1,501
136
this is much better

if you are going to work on a dark theme this is what the old one used to look like

Yup, close to perfect. Using same type of dark theme on most of the forums I've used or made since ~2005. Black background, dark greys for the forum and post containers, light color (light grey or white) for text, and light blue for thread titles and hyperlinks.
 

JujuFish

Lifer
Feb 3, 2005
10,999
733
136
I'm working on a theme, too. It's for users nostalgic for vBulletin. Makes these forums look a lot like what we had last week. :)

It's not nearly done, but here's a preview:

Ooooh, that looks promising!
 

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,219
3,798
75
Is it possible to use Stylish to add a sidebar with the different subforums, like we had with VB?
I'd love to, but I don't think I can with a User Style. I can hide stuff easily, move stuff around with some difficulty, and even add some text. But adding links just isn't in the cards with Stylish.

Now, Greasemonkey can do anything. But it's harder to install User Scripts.
 

Jaskalas

Lifer
Jun 23, 2004
33,381
7,444
136
I'm working on a theme, too. It's for users nostalgic for vBulletin. Makes these forums look a lot like what we had last week. :)

It's not nearly done, but here's a preview:

That is amazing. You rearranged the left panel's items with just CSS?

Oh, and guys. Running into a bit of an issue trimming the padding between thread listings. Apparently that space is used for the mobile size to fit "Replies" count under the poster's name. Squishing it overlaps it.
 

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,219
3,798
75
That is amazing. You rearranged the left panel's items with just CSS?
Yep. display: table-header-group;

Oh, and guys. Running into a bit of an issue trimming the padding between thread listings. Apparently that space is used for the mobile size to fit "Replies" count under the poster's name. Squishing it overlaps it.
Sounds like time for a @media query. The breakpoints currently in use seem to be 620px and 800px.
 

flexy

Diamond Member
Sep 28, 2001
8,464
155
106
I'm working on a theme, too. It's for users nostalgic for vBulletin. Makes these forums look a lot like what we had last week. :)

It's not nearly done, but here's a preview:

vblook.png

I love you!!! :) That looks amazing!
 
  • Like
Reactions: Dude111

flexy

Diamond Member
Sep 28, 2001
8,464
155
106
Awesome changes. If you'd like, you can send us your project files for this, and we can see about having your css changes added as a separate, optionally selectable theme for fellow users. Shoot me an email at jpishgar@purch.com and I'll make sure the dev guys take a look.

And DEFINITLEY add Ken's "Old Style AT theme" there too! I still hope he finds a way for a static navigation bar.
 

ViRGE

Elite Member, Moderator Emeritus
Oct 9, 1999
31,516
167
106
Oh nice. Thanks Jack. I actually rather like the tan...

Meanwhile, here are a couple more scripts we may as well add to the pile.

Disable right sidebar
Code:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forums.anandtech.com") {
  .sidebar {
   display:none;
  }
  .hasRightSidebar .mainContent {
    margin-right: 20px;
    width: 100%;
  }
}
Avatar-B-Gone (This only removes avatars from posts, but it's also the only place where they're really an issue)
Code:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forums.anandtech.com") {
  .avatarHolder.is-expanded {
    display:none;
  }
}
Unfortunately there's no good way to go with that to disable inline images. Actually turning off the images is easy, but replacing them with a URL is hard.

I'd love to, but I don't think I can with a User Style. I can hide stuff easily, move stuff around with some difficulty, and even add some text. But adding links just isn't in the cards with Stylish.

Now, Greasemonkey can do anything. But it's harder to install User Scripts.
Aye. Stylish is just CSS; it's good for a lot of stuff, but a more comprehensive change like the sidebar would have to be done in Greasemonkey. Which is plenty doable, it's just harder to write.
 
Last edited:

zinfamous

No Lifer
Jul 12, 2006
110,512
29,098
146
Wow, nice themes everyone. I particularly like KenG's classic and Anubis' dark VB theme (I was using this previously, and need it for my Surface Pro--often neffing while watching movies and shows in the dark living room)

Oh nice. Thanks Jack. I actually rather like the tan...

Meanwhile, here are a couple more scripts we may as well add to the pile.

Disable right sidebar
Code:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forums.anandtech.com") {
  .sidebar {
   display:none;
  }
  .hasRightSidebar .mainContent {
    margin-right: 20px;
    width: 100%;
  }
}

I wanted to mention that users should list the URL/domain for this as forums.anandtech.com. I think it defaults to anandtech.com (or maybe that was just me because I'm an idiot). It you apply it to anandtech, it will disable the right side article panel as well, which is unfortunate.
 

zinfamous

No Lifer
Jul 12, 2006
110,512
29,098
146
Wow, nice themes everyone. I particularly like KenG's classic and Anubis' dark VB theme (I was using this previously, and need it for my Surface Pro--often neffing while watching movies and shows in the dark living room)



I wanted to mention that users should list the URL/domain for this as forums.anandtech.com. I think it defaults to anandtech.com (or maybe that was just me because I'm an idiot). It you apply it to anandtech, it will disable the right side article panel as well, which is unfortunate.


I'd also like to say that I no longer miss the left panel for forums and User CP, because I think the top menus are just as effective, if not better. I would like to get rid of the "mark all forums read" button (I don't really get this?) or at least move it into a less prominent position.

If you take a minute to go forum to forum to mark each forum that you actually watch, then the "forums watched" button consolidates those to the more salient topics for each user. You can still access the entire forum page with the general forums button. Yes, it's an extra click to go to a forum list then to your forum, but I don't think it kills anyone's efficiency in any significant way. I do agree with others that the quick navigation pop up is really just redundant...and honestly less efficient than using the top forum menus or the top profile menus on their own. It's a very awkward interface that maybe sounds great on paper, but doesn't seem to offer anything in practice--mainly because you have the dual panel scrolling to see everything. Maybe having the window open into a full, non-scrolling overlay would improve that.

Overall, I think this is a good update as I'm getting used to the new functions. The user fixes this week have improved things greatly since the weekend and the admins seem to be working hard to get bugs out, and actually responding quickly to critiques (Even if they get rolled back sometimes). Hopefully we can get the ppp and tpp issue ironed out soon. I will never like the "like" feature, but I suppose I will just have to tolerate it like a regular old curmudgeon angry that the pokemon kiddies keep encroaching on his forum lawn. :\

...oh, and recovering the classic FT smilies (remember when they were called smilies?) and the VB smilies would be fantastic....

EDIT: Oh, and I guess I will never get used to this edit button on the opposite side of the post panel....I've made at least a dozen double posts just replying to myself when I intent to edit the post :mad:
 

Jaskalas

Lifer
Jun 23, 2004
33,381
7,444
136
Running into a stumbling block on .discussionList .sectionHeaders a:hover.

My goal is to change the mouseover effect on the thread list headers. This selector's hover attributes are not successfully applying changes. Am I missing something about the design of that element, is it the wrong selector or...?

To clarify, it's located near the top of thread listings as a header row with "Title, Start Date", etc..

Code:
/* Column Header Links Mouseover */
.discussionList .sectionHeaders a:hover{
  background-color: #333;
}