- Jun 23, 2004
- 34,017
- 8,054
- 136
OUTDATED, no longer working.
For Xenforo 2.0 Themes, try the new thread.
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: