Introducing the ability to skin your Wizards Community Forums experience.
So, like many of you, I was not pleased when I saw the new forums. As a web developer, I was particularly turned off by the extremely excessive amount of unused space and how much padding everything had, thus requiring a lot more scrolling. However, rather than just stating my complaints as many of you have rightly done, I decided to do something about it. Behold the power of CSS.
For those unfamiliar with the term, CSS is a scripting language used for defining layout and styling of elements on web pages. Almost all modern websites use it, including these forums. Fortunately, CSS makes it very easy to override styles, so with the help of the community, let's provide everyone the ability to tweak the appearance of the forums to their liking, even after Wizards hopefully improves the default appearance (perhaps even utilizing CSS created by us ;)).
I've kicked things off with a skin I wrote which simply increases font size for certain text, removes excess padding, increases widths of posts and other blocks of content to use up excess whitespace, and adds a border and background color around quotes. Please note that it will cause wrapping issues if your window is less than 1170 pixels wide (I'll look into creating alternative skins for narrower windows later).
NOTE: If the links below don't work or you can't access the CSS text for some reason, please let me know. Meanwhile, the raw text can be found here (though it may not be up to date).
Starter Layout Skin (danmage72) - Last updated 9/24/13 (Details)
This skin is a good starting point for anyone hoping to create their own. Please post your CSS if you work on a skin and I'll add it to the list below. I'm particularly hoping people will contribute theme skins to apply in combination with the starter skin to allow changing the color scheme of the site.
Feel free to message me if you have any questions about creating or applying skins or suggestions for improving the starter skin.
- Gray Background (danmage72) - Last updated 9/16/13 (Details)
- Simple gray background with lighter alternating shades of gray for thread lists
- Gray Background++ (danmage72) - Last updated 9/16/13 (Details)
- Gray Background skin + alternating purple shades for stickied threads + highlight colors for your posts and OP posts
NOTE: see here for tips on applying a custom background image.
Additional Layout Skins:
- Coming soon with your help!
Copy the contents of one or more the above “skins” (likely one layout skin and one color/theme skin), then paste each into a custom CSS file based on your browser and OS:
- Chrome (Windows): %LocalAppData%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
- Chrome (Linux): ~/.config/google-chrome/Default/User StyleSheets/Custom.css
- Chrome (Mac): "~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css"
- Chromium (Linux): ~/.config/chromium/Default/User StyleSheets/Custom.css
- Firefox (Windows): %AppData%\Mozilla\Firefox\Profiles\<profile-directory-name>\chrome\userContent.css
- Firefox (Linux): ~/.mozilla/firefox/<profile-directory-name>/chrome/userContent.css
- Firefox (Mac): "~/Library/Application Support/Firefox/Profiles/sdfjdsf.default/chrome/userContent.css"
- IE: Tools (Alt+T) > Internet Options > General tab > Acessibility button > Check "Format documents using my style sheet" > Browse button > Select new or existing css file (such as that used by Chrome/Firefox if also installed)
- Opera: Menu > Settings > Preferences > Advanced tab > Content menu item > Style Options button > Select or create user specific stylesheet
- Safari: Preferences > Advanced > Style Sheet
If you can't find a file at the path above, creating it should work. Note that for Windows, if your computer isn't configured to resolve the %AppData% path, replace it with C:\Users\<username>\AppData\Roaming for Windows Vista/7/8 or C:\Documents and Settings\ApplicationData\Roaming for Windows 2000/XP. %LocalAppData% is the same except "Local" instead of "Roaming". For Mac, be sure to include the quotes in order to resolve the spaces. See here (Chrome, Firefox, Opera), here (IE), or here (Safari) for more information. If you find another solution that works (such as for a browser not listed above), please post it and I'll update this post.
After you save the custom CSS file, the skin’s styles should automatically override the corresponding styles of the site the next time your open it (if not immediately based on the browser). The result should hopefully be a much better experience using these forums.
Note that you can also combine multiple skins together in one file, which is particularly useful if one skin defines layout stuff (like the starter skin above) and the other defines image or color overrides.
Alternative Setup with Plugin/Extension
Find a plugin/extension for your browser that allows defining CSS to apply on top of specific websites. Copy the CSS to that plugin and configure it for this site. Please feel free to post any such plugins/extensions you find so I can add them below: