Putting the 'role' back in role-playing games since 2002.
Donate to Codex
Good Old Games
  • Welcome to rpgcodex.net, a site dedicated to discussing computer based role-playing games in a free and open fashion. We're less strict than other forums, but please refer to the rules.

    "This message is awaiting moderator approval": All new users must pass through our moderation queue before they will be able to post normally. Until your account has "passed" your posts will only be visible to yourself (and moderators) until they are approved. Give us a week to get around to approving / deleting / ignoring your mundane opinion on crap before hassling us about it. Once you have passed the moderation period (think of it as a test), you will be able to post normally, just like all the other retards.

Custom CSS user improvements for nu-Dex

Unwanted

†††

Patron
Joined
Sep 21, 2015
Messages
3,544
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:

CSS:
/* 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:

Untitled.png
 
Last edited:
Unwanted

†††

Patron
Joined
Sep 21, 2015
Messages
3,544
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.
 
Last edited:
Unwanted

†††

Patron
Joined
Sep 21, 2015
Messages
3,544
Improving legibility for alerts:

CSS:
/* improved legibility for alerts */

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

Untitled 2.png

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

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

    font-weight: bold;
    color: #9d9d9d;
}
example:
Screenshot from 2022-06-13 22-31-00.png


Custom color for thread list:

CSS:
/* background color for thread list */

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

example:

Untitled 3.png

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

Untitled 4.png


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

CSS:
/* transparent avatar fixes */

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

}
 
Last edited:
Unwanted

†††

Patron
Joined
Sep 21, 2015
Messages
3,544
Darker shoutbox (current one is clearer than old sb):

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

Tavar

Cipher
Patron
Joined
Jun 6, 2020
Messages
1,046
Location
Germany
RPG Wokedex Strap Yourselves In
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:
CSS:
@-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:
KMIJk9p.png
 
Last edited:

Tacgnol

Shitlord
Patron
Joined
Oct 12, 2010
Messages
1,871,734
Codex 2016 - The Age of Grimoire Grab the Codex by the pussy RPG Wokedex Strap Yourselves In Codex Year of the Donut Shadorwun: Hong Kong Divinity: Original Sin 2 Steve gets a Kidney but I don't even get a tag. Pathfinder: Wrath I helped put crap in Monomyth
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

Cipher
Patron
Joined
Jun 6, 2020
Messages
1,046
Location
Germany
RPG Wokedex Strap Yourselves In
To hide the annoying green shout box message counter, you can add this snippet:

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

And to hide the shoutbox side bar:
CSS:
.siropuChatSidebar {
    display: none !important;
}
 
Last edited:

purupuru

Learned
Joined
Nov 2, 2019
Messages
414
To make the titles not white but grey-ish like the old codex
CSS:
a {
    color: #a2a2a2;
}

Screenshot-2022-06-14-at-06-15-40-j-RPG-Weeaboo-Discussion.png

Screenshot-2022-06-14-at-06-13-42-j-RPG-Weeaboo-Discussion.png
 
Unwanted

†††

Patron
Joined
Sep 21, 2015
Messages
3,544
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

Most Frabjous
Staff Member
Joined
Oct 7, 2003
Messages
5,439
Location
Your Mind
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.
 
Unwanted

†††

Patron
Joined
Sep 21, 2015
Messages
3,544
In case you want to change the good ol' trusty codex background:

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

s1.png

s2.png

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

Thread Incliner
Joined
Apr 5, 2008
Messages
25,573
Location
Your ignore list.
Muh Codex settings. Use these in combination with Twiglard's Color Edit -- Fluid:

CSS:
/* 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%;
}

 

Tavar

Cipher
Patron
Joined
Jun 6, 2020
Messages
1,046
Location
Germany
RPG Wokedex Strap Yourselves In
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.
 
Unwanted

†††

Patron
Joined
Sep 21, 2015
Messages
3,544
You can inject a click during hover event.
JavaScript:
>> temp0
<div class="sv-rating-type__text">
>> temp0.click()
undefined // popup menu appears

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

racofer

Thread Incliner
Joined
Apr 5, 2008
Messages
25,573
Location
Your ignore list.
Or remove the footer entirely:

Code:
.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:
CSS:
.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.
 

As an Amazon Associate, rpgcodex.net earns from qualifying purchases.
Back
Top Bottom