Custom CSS

[Simon]

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 http://www.lemmingsforums.com/index.php?topic=548.msg11422#msg11422" class="bbc_link" target="_blank">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.

http://asdfasdf.ethz.ch/~simon/etc/lemmingsforums-custom-css-1.png" alt="" class="bbc_img" />

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.

http://asdfasdf.ethz.ch/~simon/etc/lemmingsforums-custom-css-2.png" alt="" class="bbc_img" />

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.

http://asdfasdf.ethz.ch/~simon/etc/lemmingsforums-custom-css-4.png" alt="" class="bbc_img" />

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.

http://asdfasdf.ethz.ch/~simon/etc/lemmingsforums-custom-css-6-old.png" alt="" class="bbc_img" /> (old) http://asdfasdf.ethz.ch/~simon/etc/lemmingsforums-custom-css-6-new.png" alt="" class="bbc_img" /> (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

http://asdfasdf.ethz.ch/~simon/etc/userContent-full.css" class="bbc_link" target="_blank">Download the custom CSS which trims the front page.
http://asdfasdf.ethz.ch/~simon/etc/userContent-keep.css" class="bbc_link" target="_blank">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

[geoo]

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...

[Simon]

Thanks for the thorough review. http://www.lemmingsforums.com/Smileys/lemmings/smiley.gif" alt=":)" title="Smiley" class="smiley" /> 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

[Simon]

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

[Simon]

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

Code Select Expand


@-moz-document domain(www.lemmingsforums.com),
    domain(www.lemmingsforums.net)
{

    /* raise the font size and disable in-single-post scrolling that
     * appears due to the larger font size */
    body {
        font: 100%/150% sans-serif ! important;
    }
    div.windowbg2, div.post_wrapper, div.poster, div.postarea {
        overflow: hidden ! important;
    }

    /* make every 2nd post light grey instead of blue */
    .windowbg, #preview_body {
        overflow:   hidden  ! important;
        background: #E8E8E8 ! important;
    }
    .windowbg2 {
        overflow:   hidden  ! important;
        background: #FFFFFF ! important;
    }

    /* use sane link highlighting */
    a.bbc_link         { text-decoration: underline ! important; }
    a.bbc_link:link    { color:           #4040FF   ! important; }
    a.bbc_link:visited { color:           #800080   ! important; }
    a.bbc_link:hover   { color:           #FF4000   ! important; }

    /* hide unnecessary things from the avatar area */
    li.postgroup, li.blurb, li.karma_allow, li.karma, li.online, li.stars {
        display: none ! important;
    }

    /* Disable youtube embeddings, but keep the links to the vids.
     * This will save huge amounts of bandwith, because the browser won't fetch
     * the vids anymore in the first place!
     * This is somewhat of a kludge. I don't want to remove the whole table,
     * because it also contains the link, but the table's rows with the video
     * don't have a class. Instead, they all have separate IDs. This removes
     * the first 8 vids on a page. I blame the forum's PHP.
     * The link texts are insite table cells, I force them to be inline and
     * look like regular text as much as possible, but it's not perfect. */
    #saeva1, #saeva2, #saeva3, #saeva4, #saeva5, #saeva6, #saeva7, #saeva8 {
        display: none    ! important;
    }
    .maeva {
        font:    inherit ! important;
        display: inline  ! important;
    }
    .maeva * {
        display: inline  ! important;
    }



    /*************************************************************************
     *
     * The following modifies the front page with the board overview.
     *
     *************************************************************************/

    /* front page: disable the title logo area, and disable the news fader */
    /* on namida's forum, disable entire top area too, even if it has the
     * login thing. You can still login with the link on the main menu. */
    #wrapper #top_section, #newsfader,
    #upper_section {
        display: none ! important;
    }

    /* front page: hide descriptions of the boards, and decrease the vertical
     * space the new-posts-diamond takes. */
    td.info a.subject  { font-weight: normal      ! important; }
    td.info p          { display:     none        ! important; }
    td.icon            { padding:     0 0 0 0     ! important; }
    td.icon img {
        margin:         0 0 0 0 ! important;
        vertical-align: middle  ! important;
    }

    /* Front page: Since we now have so much space at
     * the left, shrink that, but don't linebreak the forum titles.
     * With the extra space, we can remove the <br> from the last post area. */
    tr.windowbg2 td             { padding:     2px 0 0 2px ! important; }
    tr.windowbg2 td             { margin:      0 0 0 0     ! important; }
    tr.windowbg2 td.windowbg    { width:       auto        ! important; }
    tr.windowbg2 td.info        { white-space: nowrap      ! important; }
    tr.windowbg2 td.lastpost    { width:       100%        ! important; }
    tr.windowbg2 td.lastpost br { display:     none        ! important; }

    /* Front page 2009-2014 instance: Remove the board category rows */
    table.table_list tbody.header { display: none ! important; }

    /* on namida's new forum, number of topics/post per board */
    tr.windowbg2 td.stats.windowbg    { white-space: nowrap   ! important; }
    tr.windowbg2 td.stats.windowbg br { display:     none     ! important; }

    /* on namida's forum, disable the icon (L3D head) that distinguishes
        between fully-read and unread boards, because it's so big */
    tr.windowbg2 td.icon.windowbg { display:     none     ! important; }

    /* on namida's forum, disable the separators between board categories;
     * I don't care at all, it's just many boards one after another */
    tbody.divider, tbody.header { display:     none     ! important; }



    /*************************************************************************
     *
     * The following modifies the individual board view = topic list.
     *
     *************************************************************************/

    /* Large page selector with easy-to-hit numbers */
    div.pagelinks { font-size: 200% ! important; }

    /* Make the topic rows use less vertical space. Inline the started-by-whom
     * after the topic name, and inline by-whom in the last-post-info. */
    table.table_grid * td.subject p {
        display:   inline  ! important;
        color:     #C0C0C0 ! important;
        float:     right   ! important;
    }
    table.table_grid * td.subject p a.navPages {
        font-size:   150% ! important;
    }
    table.table_grid * td.lastpost {
        white-space: nowrap ! important;
        font-size:   70%    ! important;
    }
    table.table_grid * td.lastpost br { display:     none   ! important; }

    /* Kill the table's header, and shorten the post/views cell widths. */
    table.table_grid * tr.catbg3 { display: none ! important; }
    table.table_grid * td.stats  { width:   auto ! important; }

    /* on namida's board, kill linebreak in 4 posts<br>5 views */
    table.table_grid * td.stats br { display: none ! important; }

}


-- Simon