Custom CSS for black-on-grey in forums

Discussion in 'Player Created Resources' started by Elwyn, Feb 28, 2018.

Thread Status:
Not open for further replies.
  1. Elwyn

    Elwyn Avatar

    Messages:
    3,617
    Likes Received:
    4,783
    Trophy Points:
    153
    Gender:
    Male
    Location:
    San Antonio, TX
    I have heard that I'm not the only one who doesn't like the dim-on-black theme of the web site. So I'm posting this in case it can help. While this isn't perfect, it makes my own eyes much happier. There are still a few things that I've missed, because the forum's CSS is so absurdly complicated. In particular, I tried and failed may times to change the color of the message entry field, so maybe someone else can succeed where I have failed. (I also made one for Hackaday, another dim-on-black offender.)

    I'm sorry that I can't help with telling you how to install it. I'm using the userContent.css feature of Mozilla browsers, and its "@-moz-document" keyword to specify the base URL. I happen to use Mozilla Seamonkey, which is basically direct lineage from the old Netscape Navigator. With another Mozilla-based browser, you should just need to find the chrome directory of your settings, and put this in it as a text file named "userContent.css". If other browsers support it, they will have their own way to use it.

    It is at the following sub-path on OS X, and I have it sym-linked to ~/userContent.css for convenience.
    ~/Library/Application Support/SeaMonkey/Profiles/something.username/chrome/userContent.css

    Code:
    /*
     * Shroud of the Avatar forums
     */
    
    @-moz-document url-prefix(https://www.shroudoftheavatar.com/forum/) {
        .messageContent, .messageText {
            color: #000000 !important;
            font-weight: initial !important;
            font-family: initial !important;
            font-size: initial !important;
        }
        .messageInfo {
            background-color: #C0C0C0 !important;
            background-image: initial !important;
        }
        .pageContent {
            background-color: #C0C0C0 !important;
            color: #101010 !important;
        }
        .discussionListItem, .stats, .discussionList .sectionHeaders,
        .discussionListItem .posterAvatar, .sectionMain,
        .secondaryContent,
        .menu, body .itemPageNav a,
        .nodeList .forumNodeInfo,
        .nodeList .categoryForumNodeInfo,
        .nodeList .categoryStrip {
            background-color: #E0E0E0 !important;
            color: #101010 !important;
            background-image: initial !important;
        }
        .PanelScroller .scrollContainer,
        .primaryContent {
            background-color: #E0E0E0 !important;
            background-image: initial !important;
        }
        .PageNav a.currentPage {
            background-color: #808080 !important;
        }
        .discussionListItem .title {
            font-size: initial !important;
        }
        .xenPreviewTooltip .previewContent,
        .messageUserBlock, .bbCodeBlock pre {
            background-color: #D0D0D0 !important;
            color: #101010 !important;
        }
        div[id|='#likes-post-'], .likesSummary {
            background-color: #C0C0C0 !important;
            color: #101010 !important;
            background-image: initial !important;
        }
        .avatarHolder {
            background-color: #000000 !important;
            color: #101010 !important;
        }
        html {
            background-color: #707070 !important;
            color: #FFFFFF !important;
            font-size: initial !important;
        }
        .bbCodeQuote .attribution,
        .message .messageMeta .control {
            background-color: #707070 !important;
            color: #FFFFFF !important;
        }
        .bbCodeQuote .quoteContainer .quoteExpand {
            background: linear-gradient(to bottom,
                rgba(128, 128, 128, 0) 0%,
                rgb(128, 128, 128) 80%) !important;
        }
        body, #QuickReply {
            background-color: #707070 !important;
            color: #FFFFFF !important;
            font-size: initial !important;
        }
        .navTabs .navTab.selected .tabLinks,
        .navTabs .navTab.selected .navLink {
            background-color: #707070 !important;
        }
        .breadcrumb .crust a.crumb,
        body .muted {
            color: #707070 !important;
        }
        .quoteContainer {
            background-color: #C0C0C0 !important;
        }
        .signature {
            background-color: #404040 !important;
            color: #F0F0F0 !important;
        }
        .bbCodeSpoilerText {
            color: #333333 !important;
        }
        .primaryContent a, .secondaryContent a,
        a.crumb,
        a:link, a:visited {
            color: #0000A0 !important;
        }
        .pairs dt,
        .pairsInline dt,
        .pairsRows dt,
        .pairsColumns dt,
        .pairsJustified dt {
            color: #202020 !important;
        }
    }
    
     
Thread Status:
Not open for further replies.