Putting the 'role' back in role-playing games since 2002.
Good Old Games
Donate to Codex
News Content Gallery About Donate Discord Contact
  • 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

ropulos

Retired gamer
Patron
Joined
Sep 21, 2015
Messages
1,977
Location
Atlantis
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. 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: 100px; /* 135 */
}
/* 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;
}

Preview of the site with custom colors:

Untitled.png
 
Last edited:

ropulos

Retired gamer
Patron
Joined
Sep 21, 2015
Messages
1,977
Location
Atlantis
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:

Peachcurl

Cipher
Joined
Jan 3, 2020
Messages
3,015
Location
(╯°□°)╯︵ ┻━┻
it's also extremely easy to choose your own colors with stylus
 

ropulos

Retired gamer
Patron
Joined
Sep 21, 2015
Messages
1,977
Location
Atlantis
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:

Nano

Arcane
Patron
Joined
Mar 6, 2016
Messages
4,002
Well everything is still ugly, but at least it's more functional.
 

ropulos

Retired gamer
Patron
Joined
Sep 21, 2015
Messages
1,977
Location
Atlantis
Darker shoutbox (current one is clearer than old sb):

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

Tavar

Erudite
Patron
Joined
Jun 6, 2020
Messages
506
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:
/* 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;
}

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

/* transparent bottom bar */
.p-footer {
    font-size: 13px;
    color: #edf6fd;
    background: #4d5b7b0d;
}
/* improved legibility for alerts */
.fauxBlockLink a,
.fauxBlockLink .fauxBlockLink-link {
    position: relative;
    z-index: 2;
    font-weight: bold;
    color: #9d9d9d;
}

/* differentiated text for links */
.link {
    text-decoration: underline !important;
    color: #9d9d9d;
}

/* differentiated user mentions for links */
.username {
    font-weight: bold;
}

/* background color for thread list */
.block-body {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #202225;
}

/* background color */
.message-cell {
    background-color: #202225;
}

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

/* user block color */
.message-cell.message-cell--user,
.message-cell.message-cell--action {
    position: relative;
    background: #1c2331;
    border-right: 1px solid #586173;
    min-width: 0;
}

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

/* darker shoutbox */
.siropuChatPage #siropuChatContent {
    background: #363b45;
}
#siropuChatContent {
    background: #363b45;
}
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;
}

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

/* transparent bottom bar */
.p-footer {
    font-size: 13px;
    color: #edf6fd;
    background: #4d5b7b0d;
}
/* improved legibility for alerts */
.fauxBlockLink a,
.fauxBlockLink .fauxBlockLink-link {
    position: relative;
    z-index: 2;
    font-weight: bold;
    color: #ff8e61;
}

/* differentiated text for links */
.link {
    text-decoration: underline !important;
    color: #ff8e61;
}

/* differentiated user mentions for links */
.username {
    font-weight: bold;
}

/* background color for thread list */
.block-body {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #1e1e1e;
}

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

/* page width */
.p-body-inner {
    max-width: 90%;
}
/* improved legibility for alerts */
.fauxBlockLink a,
.fauxBlockLink .fauxBlockLink-link {
    position: relative;
    z-index: 2;
    font-weight: bold;
}

/* differentiated text for links */
.link {
    text-decoration: underline !important;
}

/* differentiated user mentions for links */
.username {
    font-weight: bold;
}

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,870,177
Location
Pronouns: Shitlord/problematic
Codex 2016 - The Age of Grimoire Grab the Codex by the pussy RPG Wokedex Strap Yourselves In Shadorwun: Hong Kong Divinity: Original Sin 2 Pathfinder: Kingmaker
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

Erudite
Patron
Joined
Jun 6, 2020
Messages
506
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
393
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
 

ropulos

Retired gamer
Patron
Joined
Sep 21, 2015
Messages
1,977
Location
Atlantis
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

Poland Stronk
Patron
Sad Loser
Joined
Aug 6, 2014
Messages
5,534
Location
Poland
Strap Yourselves In
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

Most Frabjous
Staff member
Joined
Oct 7, 2003
Messages
4,884
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.
 

Pink Eye

Monk
Patron
Joined
Oct 10, 2019
Messages
5,024
Location
Space Refrigerator

ropulos

Retired gamer
Patron
Joined
Sep 21, 2015
Messages
1,977
Location
Atlantis
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
23,346
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%;
}

 

Catacombs

Arcane
Patron
Joined
Aug 10, 2017
Messages
5,024
Or remove the footer entirely:

Code:
.p-footer {
    display: none;
}
 

Twiglard

Poland Stronk
Patron
Sad Loser
Joined
Aug 6, 2014
Messages
5,534
Location
Poland
Strap Yourselves In
Taluntain do you mind me changing it back?
bro giv code so I can fix it for me :negative: this it's my biggest pet peeve so far (apart from the unordered buttons)
You can inject a click during hover event.
JavaScript:
>> temp0
<div class="sv-rating-type__text">
>> temp0.click()
undefined // popup menu appears
 

Tavar

Erudite
Patron
Joined
Jun 6, 2020
Messages
506
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.
 

ropulos

Retired gamer
Patron
Joined
Sep 21, 2015
Messages
1,977
Location
Atlantis
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
 
Top Bottom