Author Topic: Custom CSS  (Read 5738 times)

0 Members and 1 Guest are viewing this topic.

Offline Simon

  • Administrator
  • Posts: 3860
    • View Profile
    • Lix
Custom CSS
« on: August 26, 2011, 03:26:56 PM »
Hi folks,

this thread explains how to override the forum's default CSS to increase the site's usability. I provide screenshots of how the amended CSS looks in my browser, provide the source code, and give instructions of how to use it.

The custom stylesheet here is actually an upgraded version of my work from the RAGE thread, but I cannot edit that post anymore as the thread got locked.

Features of my CSS

All of these features are designed to increase usability.



The zebra strips (alternating blue and white post background) are now light grey and fully white. The purpose of this is contrast. Text and link colors are much better visible on light background.



Links inside posts are underlined and have a very distinct color from the text. Visited links admit a different color than unvisited links. This is a huge gain in usability. (Without such a custom CSS, links in blue posts are extremely hard to read, and links on white posts are hard to see against normal text.) Note that my stylesheet affects only links inside posts. Regular links on the site are kept in their greyish blue, they also won't be underlined.

The site's global font size is increased to the browser default's font size.



The avatar area has only useful information. This is nice for short posts. Otherwise, the avatar area blows up the vertical post size to a large minimum length. This is even more useful if you hide signatures via your user options. If you want to hide different stuff from the avatar area than I do, hack on my CSS source.

(old) (new)

This change is optional: I'll offer two files, you can choose whether to use it or not. This change cuts the front page to minimal size. The site's logo and the flashing news are removed completely. (If you're not logged in, the login area is preserved.) The board descriptions are removed, only the board names are kept. The last-post info is inlined to save vertical space. Everything fits on one screen. (The above screenshots are taken at 1280 x 1024, smaller resolutions will benefit even more.)

Warning: With the trimmed front page, you will not easily see whether you've got new personal messages -- I strongly recommend enabling "Show a popup when I receive new messages" in the message preferences.

(Another change was preventing the forum to change Youtube links into embedded videos, but this behavior has been disabled by the admins in the meantime.)

The CSS source

Download the custom CSS which trims the front page.
Download the custom CSS which doesn't alter the old front page.

I don't want to paste the file's contents into this post. It contains the URL of the forums, but URLs are mangled by the site when posting them, even if they're inside [ code] tags.

If you do not use Firefox, you will have to edit the first line of the CSS file. Search the web about your browser's syntax expectations for custom CSS files.

Usage instructions

If you have Firefox (I use version 3.x, but other versions should do it the same way), download the above CSS source file and save it as:
(profile-path)/chrome/userContent.css

Your profile path is a randomly named subfolder of your Firefox user directory. This user directory is ~/.mozilla/firefox on Unix-like systems and something in User\ or "Documents and Settings"\ on Windows systems.

Firefox must be closed and restarted completely to accept the custom file.

If you do not use Firefox, search the web about how to use custom CSS files. As already said, you will probably have to edit the first line of the CSS file.

Comments?

If you try this out, tell me what you like, what you don't like, whether something became broken, or what your additional ideas are. If you use a different browser and got my CSS to run successfully, please describe how you did it.

If you have problems getting it to run, hunt around the web some more, post a reply, or join IRC:
irc.quakenet.org #lix

-- Simon

Offline geoo

  • Administrator
  • Posts: 1473
    • View Profile
Re: Custom CSS
« Reply #1 on: August 26, 2011, 04:58:59 PM »
This is excellent! The automatic youtube embeds have been been annoying me to no end, because they delay loading, cause page scrolling to lag and break the post layout (I just found out that the latter can at least be remedied by using the youtu.be/<videoID> type of link for videos if you're authoring a post). Too bad that this workaround isn't perfect and adds these linebreaks, but it's still a vast improvement.
I really think that turning youtube links automatically into embeds must not be the default behaviour. If people really feel like they have to embed videos, and use it sparingly, perhaps a dedicated youtube tag or something could do; but making it impossible to just link a video unless you use some non-obvious workaround, especially if it's formatted as a link with a description using the [url] tag where it's obvious that the author doesn't want an embed, really shouldn't happen.

While I didn't have a particular issue with the link noticeability, I still prefer them to stand out more; I changed the lifeless background grey into a desaturated blue though (#bcc7d1, though the original color seems pretty much fine as well). Don't need the larger font size though, but that's the nice thing about this, can just edit out what I don't need.

I also quite like the additions to make everything leaner (of course, now that is something that shouldn't be default; just useful for versed users, and of course not a good way to present the forum to newcomers).

I still find it questionable that the rage thread was shot down. I mean ok, it was a thread that started as something else, and got derailed and due to that the forum usability issues got stated in a somewhat rage-y manner, but outright ignoring them and labelling them 'bashing', seriously? I didn't see any personal attack anywhere.
And then closing down the thread when actual constructive solutions came in for those that got ignored...I hope it was just someone still being in a bad mood from the 4-hours-of-sleep-in-5-days trip...

Offline Simon

  • Administrator
  • Posts: 3860
    • View Profile
    • Lix
Re: Custom CSS
« Reply #2 on: August 27, 2011, 12:49:16 AM »
Thanks for the thorough review. :) Yeah, if a change is not to the user's liking, he's able to amend or remove it even without knowing much. That's the beauty of this approach.

I studied the Youtube links some more, and achieved to inline them. However, since they're table cells inside a table of which I can't remove every unnecessary row, I can't get the Youtube links inlined seamlessly. It's still much better than what I had previously, i.e. the small text with forced linebreaks. I've updated the downloadable stylesheets.

-- Simon

Offline Simon

  • Administrator
  • Posts: 3860
    • View Profile
    • Lix
Re: Custom CSS
« Reply #3 on: May 01, 2012, 01:28:52 PM »
I've updated the custom CSS. The front page is trimmed even more, see the old/new comparing screenshots in the first post. The download link is the same.

-- Simon

Offline Simon

  • Administrator
  • Posts: 3860
    • View Profile
    • Lix
Re: Custom CSS
« Reply #4 on: December 14, 2021, 06:40:41 PM »
All links in original post are dead.

As a backup, here's the Firefox CSS from 2011 with some edits for namida's 2015 forum. Besides disabling the old video embeds (that apparently don't exist anymore), this cuts the front page like no tomorrow. Surgical extraction.

userContent.css (click to show/hide)

-- Simon