Custom CSS user improvements for nu-Dex

[†††]

Given that the other threads complaining about the new design are bursting with activity, I'm afraid some of the CSS improvement like guys like Tavar or yours truly have devised will be lost in a sea of endless pages and much deserved bitching. So I'm creating this thread to post our findings, suggestions and more to make the new site more palatable. Use the Stylus add-on for desktop browsers.

Here are the modifications I'm using so far (special thanks to all the guys who have come up with neat tricks in this thread). Change the attributes to match your tastes:

/* font fixes */
.message-body {
 
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    word-wrap: break-word;
}

html {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

/* old font size */
* {
    font-size: 10pt;
}




/* background color */
.message-cell  {
        background-color: #202225;
    }
 
.bbCodeBlock {
        background-color: #333333 !important;
}

/* user block color */
.message-cell.message-cell--user {
    background-color: #1c2331 !important;
}

/* sticky threads color */

.structItemContainer-group--sticky {
    background-color: #32363f !important;
}


/* transparent avatar fixes when using custom color */

.avatar img:not(.cropImage) {
    background: #202225;

}


/* page width */
.p-body-inner {
        max-width: 98%;
}

/* transparent bottom bar */

footer.p-footer {
    background: #464d5c00 !important;
}

/* improved legibility for alerts */

.fauxBlockLink a, .fauxBlockLink .fauxBlockLink-link {
    position: relative;
    z-index: 2;
    font-weight: bold;
    color: #9d9d9d;
}

/* differentiated text for links */
.fauxBlockLink a, .fauxBlockLink .fauxBlockLink-link {

    font-weight: bold;
    color: #9d9d9d;
}

/* background color for thread list */

.block-body {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #202225;
}

/* darker shoutbox */
.siropuChatPage #siropuChatContent {
    background: #363b45;
}
#siropuChatContent {
    background: #363b45;
}

/* reactions received page fixes */

.block-container {
    color: #fff;
}

a {
    color: #8a9bb6;
}


/* forum statistics fix */
.pairs {
    padding-left: 10px;
    padding-right:10px;
    padding-top: 1px;
    padding-bottom: 1px;
    overflow: hidden;
}


/* custom background image/color */

html {
    background: #383838 url('https://your-url.com/yourimage.png') repeat;
    background-color: #475565;
}

/* smaller codex troll */

.codexTroll {
    width: 135px; /* this is original size, adjust to your tastes */
    height: auto;
}
/* Nuke right top header stuff */
.topBanner {
    display: none;
}

/* Make footer a little less relevant */
.p-footer {
    opacity: 40%;
}

/* change color for thread list in latest activity */

.block-container {
    background: #202225;
}

/* Bolder text for the header buttons, old dex style */

.topTable tr, .topTable td {
    font-weight: bold;
}

/* Nuke scroll buttons */

.u-scrollButtons.is-active {
    display: none;
}

/* Borderless ratings bar */

.sv-rating-bar__ratings {
    border: 0px solid #b3b3b314;
    border-top: 0px solid #8585851a;
}
/* centered usernames/titles */

.message-user .message-userDetails > * {
    text-align: center;
}
/* centered avys */

.message-avatar {
    text-align: center;
}

/* centered badges */

.message-user > * {
    text-align: center;
}

/* softer borders in user/message boxes */

.message-attribution {
    border-bottom: 1px dotted #000 !important;
}

.message-cell.message-cell--user {
    border-right: 1px dotted #000 !important;
}

/* static (non-scrolling) top bar */

.p-navSticky {
    position: static;
}

/* nuke amazon affiliate msg */

.samCodeUnit {
    display: none;
}

/* hide threads with no new messages from the watched threads list */

body[data-template="watched_threads_list"] .structItem--thread:not(.is-unread) {
    display: none;
}

Preview of the site with custom colors:

 

[†††]

That looks less headache-inducing that the Nudex, but the colors are different from the Oldex, and butt-ugly to boot. Why that hideous purple, for instance?

DO BETTER

The purple has to do with the screenshot manager mangling the colors for some reason, but it should look the same as current on your end, try it. The color modifications provided in OP only deals with message/user blocks.

EDIT: I think it's fixed now, I took the screenshot with GIMP now. For some reason the built-in screenshot utility changes the colors.

 

[Peachcurl]

it's also extremely easy to choose your own colors with stylus

 

[†††]

Improving legibility for alerts:

/* improved legibility for alerts */

.fauxBlockLink a, .fauxBlockLink .fauxBlockLink-link {
    position: relative;
    z-index: 2;
    font-weight: bold;
    color: #9d9d9d;
}

Same shit but for all internal links in the message body, which are currently undifferentiated from normal text:

/* link text */
.fauxBlockLink a, .fauxBlockLink .fauxBlockLink-link {

    font-weight: bold;
    color: #9d9d9d;
}

example:

Custom color for thread list:

/* background color for thread list */

.block-body {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #202225;
}

example:



There's this little issue custom colors where transparent avatars clash with the new color, does anybody know how to fix it?

Edit: Ok, fixed. Do this (use the same color you're using at the moment):

/* transparent avatar fixes */

.avatar img:not(.cropImage) {
    background: #202225;

}

 

[Nano]

Well everything is still ugly, but at least it's more functional.

 

[†††]

Darker shoutbox (current one is clearer than old sb):

/* darker shoutbox */
.siropuChatPage #siropuChatContent {
    background: #363b45;
}
#siropuChatContent {
    background: #363b45;
}

 

[OSK]

Hmmm

 

[Tavar]

Great idea ropulos to put this in a separate thread. I've added some custom css to also make usernames stand out and to underline links. Here's the full script I currently use. I've incorporated your color scheme and I like it:

Script with my custom colours and without shoutbox, last profile posts and last posts

@-moz-document url-prefix("https://rpgcodex.net/forums/") {
    /* improved legibility for alerts */
    .fauxBlockLink a,
    .fauxBlockLink .fauxBlockLink-link {
        position: relative;
        z-index: 2;
        font-weight: bold;
        color: #ff8e61;
    }

    /* differentiated text for links */
    .link {
        color: #ff8e61;
    }

    .structItemContainer {
        background-color: #1e1e1e !important;
    }

    .node {
        background-color: #1e1e1e !important;
    }


    /* background color */
    .message-cell {
        background-color: #1e1e1e !important;
    }

    .message-cell.message-cell--user {
        background-color: #2f2f2f !important;
    }

    .bbCodeBlock {
        background-color: #2f2f2f !important;
    }


    /* transparent avatar fixes when using custom color */
    .avatar img:not(.cropImage) {
        background: #1e1e1e;
    }

    /* Hide shoutbox counter */
    .badge--highlighted {
        display: none !important;
    }

    /* Hide shoutbox sidebar */
    .siropuChatSidebar {
        display: none !important;
    }

    div.block[data-widget-key="forum_overview_new_profile_posts"] {
        display: none;
    }

    div.block[data-widget-key="forum_overview_new_posts"] {
        display: none;
    }
}

Usage:
1. Install Sylus-Addon.
2. Click on the Stylus symbol and choose "Manage"
3. Click on "Write New Style"
4. Paste the desired CSS code in the text box
5. Below where you just pased the code, select "Urls starting with" and paste "https://rpgcodex.net/forums/" as value
6. Add a new for the style on the left-hand side an press save.

And this is how it looks with my colours:

Spoiler

 

[Tacgnol]

I'm just using the 90% max-width, the original fonts and the dark reader extension and things generally seem very readable and fairly well laid out now.

 

[Tavar]

To hide the annoying green shout box message counter, you can add this snippet:

/* Hide shoutbox counter */
.badge--highlighted{
    display: none !important;
}

And to hide the shoutbox side bar:

.siropuChatSidebar {
    display: none !important;
}

 

[purupuru]

To make the titles not white but grey-ish like the old codex

a {
    color: #a2a2a2;
}

Spoiler

 

[†††]

Can anybody come up with a piece of code to show the buttons box on mouse hover? Taluntain changed this last night and all the extra clicking is irritating me.

 

[Twiglard]

Can anybody come up with a piece of code to show the buttons box on mouse hover? Taluntain changed this last night and all the extra clicking is irritating me.

Taluntain do you mind me changing it back?

 

[Taluntain]

Yea, as I mentioned in the thread, this was done on purpose so that it's consistent with the intentional change the XF devs made everywhere in XF that such actions happen on click. Having it different solely for the reactions is problematic because the inconsistency means that you make mistakes clicking the button and giving a brofist because you assume that it works on click, same as the alerts button and all the other XF buttons. It's happened several times to me yesterday.

 

[Pink Eye]

Thank you very much ropulos!

 

[†††]

Taluntain do you mind me changing it back?

bro giv code so I can fix it for me this it's my biggest pet peeve so far (apart from the unordered buttons)

 

[Taluntain]

You'll get used to it in like a day, don't bother.

 

[†††]

Thanks for nothing, Taluntain.

 

[†††]

In case you want to change the good ol' trusty codex background:

html {
    background: #383838 url('https://your-url.com/yourimage.png') repeat;
    background-color: #475565;
}

change repeat for either repeat-y or repeat-x if you only want to repeat the background for one axis. The background-color setting exists in case you don't want background image or simply use a background with transparent elements.





The forum was undergoing changes when I was making this post and now it has the old header back; unfortunately, the piece of code regarding its background tile (https://rpgcodex.net/system/templates/rexblue/images/troll/bkgrnd.png) is inline code so you'll have to use an add-on like redirector to change it instead.

 

[racofer]

Muh Codex settings. Use these in combination with Twiglard's Color Edit -- Fluid:

/* Limit whole page width */
html {
    margin: auto !important;
    width: 85%;
    background: rgb(30, 30, 40);
}

/* Stretch inner body to page width */
.p-body-inner {
    max-width: 100%;
}

/* Nuke shoutbox */
.siropuChatSidebar {
    display: none;
}

/* Baby Codex Troll */
.codexTroll {
    scale: 60%;
    /* Shit is probably at the wrong
    place to begin with, have to apply
    negative margin offsets */
    margin-top: -2%;
}

/* Nuke right top header stuff */
.topBanner {
    display: none;
}

/* Make footer a little less relevant */
.p-footer {
    opacity: 40%;
}

 

[Catacombs]

Or remove the footer entirely:

.p-footer {
    display: none;
}

 

[Twiglard]

Taluntain do you mind me changing it back?

bro giv code so I can fix it for me this it's my biggest pet peeve so far (apart from the unordered buttons)

You can inject a click during hover event.

>> temp0
<div class="sv-rating-type__text">
>> temp0.click()
undefined // popup menu appears

 

[Tavar]

Thanks racofer for the baby troll hack. Looks much better now. Is there any way to hide the "last profile post" section? As far as I can tell, there are no dedicated css classes for it, so you cannot just hide it without massive splash damage.

 

[†††]

You can inject a click during hover event.

>> temp0
<div class="sv-rating-type__text">
>> temp0.click()
undefined // popup menu appears

I don't know how to use this I even installed several javascript injector add-ons and it does nothing

 

[racofer]

Or remove the footer entirely:

.p-footer {
    display: none;
}

True, but you need it to be able to change the base page page layout, so I prefer to leave it there.

Thanks racofer for the baby troll hack. Looks much better now. Is there any way to hide the "last profile post" section? As far as I can tell, there are no dedicated css classes for it, so you cannot just hide it without massive splash damage.

Yes, you can block it explicitly with the path to the div element, like this:

.p-body-sidebar .block:nth-child(5) {
    display: none;
}

If at some point the ordering changes in the sidebar, then you have to fix it for the new ordering.