Site styling- how do I make it look like it did before?

[Ron]

As stated, I am wondering how to make the site look as it did before the update.

 

[Sujamma]

Here's my half-assed attempt at getting the old dark-green style back using Stylus (the browser addon). If you want something other than green, change the .message-attribution and .message-cell--user background-color to some other color hex code.

EDIT: This CSS is obsolete now that the admins have reimplemented the Blackened styles.

Spoiler: Obsolete

.message-attribution, .message-cell--user {
    background-color: #18400E !important;
    background-image: none !important;
}
.p-body {
    background-color: #101010 !important;
    background-image: none !important;
}
.p-nav, .p-navEl, .button, .pageNav-page, .pageNav-jump, .message-cell--main, .message-cell--alert, .block-header, .structItem-cell, .block-minorHeader, .block-row, .block-footer, .bbCodeBlock-content, .p-footer-default, .p-footer-custom, .p-footer-copyright, .menu-row, .menu-header, .menu-footer {
    background-color: #202020 !important;
    background-image: none !important;
}
.pageNav-page--current {
    background-color: #303030 !important;
}
.bbCodeBlock-title {
    background-color: #181818
}

 

[Ron]

Here's my half-assed attempt at getting the old dark-green style back using Stylus (the browser addon). If you want something other than green, change the .message-attribution and .message-cell--user background-color to some other color hex code.

.message-attribution, .message-cell--user {
    background-color: #18400E !important;
    background-image: none !important;
}
.p-body {
    background-color: #101010 !important;
    background-image: none !important;
}
.p-nav, .p-navEl, .button, .pageNav-page, .pageNav-jump, .message-cell--main, .message-cell--alert, .block-header, .structItem-cell, .block-minorHeader, .block-row, .block-footer, .bbCodeBlock-content, .p-footer-default, .p-footer-custom, .p-footer-copyright, .menu-row, .menu-header, .menu-footer {
    background-color: #202020 !important;
    background-image: none !important;
}
.pageNav-page--current {
    background-color: #303030 !important;
}
.bbCodeBlock-title {
    background-color: #181818
}

Click to shrink...

That isn't really what I'm going for. I was too lazy to change from the default before, and I've gotten used to it. Any ideas?

 

[Sujamma]

That isn't really what I'm going for. I was too lazy to change from the default before, and I've gotten used to it. Any ideas?

Click to shrink...

Wouldn't be too hard to put something together, give me a bit and I'll see what I can do. To be clear, are you talking about this style?

 

[Jamesson Locke]

Would definitely like the old alt appearances back, particularly blackened blue.

 

[Sujamma]

Would definitely like the old alt appearances back, particularly blackened blue.

Click to shrink...

If you can find me a screenshot or (even better) an archive page, I'll see what I can do. I always used the dark-green style, so I'd have to make a few educated guesses, but I can probably get you "Honey, we have QQ at home".

 

[Ron]

Wouldn't be too hard to put something together, give me a bit and I'll see what I can do. To be clear, are you talking about this style?

Click to shrink...

Yeah. I have no idea how to get back to that, and I'm probably going to have to get to sleep soon so I don't have time to work it out.

 

[Jamesson Locke]

If you can find me a screenshot or (even better) an archive page, I'll see what I can do. I always used the dark-green style, so I'd have to make a few educated guesses, but I can probably get you "Honey, we have QQ at home".

Click to shrink...

Lemme see if discord embeds want to play nice ...

Spoiler

 

[Im_just_a_Reader]

Lemme see if discord embeds want to play nice ...

Spoiler

Click to shrink...

A profounding wisdom I must say.

 

[Jamesson Locke]

A profounding wisdom I must say.

Click to shrink...

Was the only one that showed most of a page header, the various "Blackened" themes were identical in everything but colours, so if anyone has screenshots of the top bar in any blackened that'd be great.

 

[Im_just_a_Reader]

Was the only one that showed most of a page header, the various "Blackened" themes were identical in everything but colours, so if anyone has screenshots of the top bar in any blackened that'd be great.

Click to shrink...

I don't know how to send you my screen shot. Also mine is dark blue.

 

[Jamesson Locke]

I don't know how to send you my screen shot. Also mine is dark blue.

Click to shrink...

Well I found a full header for blackened purple:

can we get our styles/themes back? I liked the dark classic look (forgot the name) though I did find a picture of it on google..

<<<<< basically this?? ..

Click to shrink...

 

[Sujamma]

Here's my first draft of QQ Light 2015. If I missed something, please let me know, otherwise enjoy.

a, span, .node--unread, .p-navgroup {
    color: #1046BA !important;
    background-color: inherit !important;
}
h2, button, .message-attribution, .message-cell--user, .fr-box, .fr-more-toolbar, .memberProfileBanner {
    color: #445A68 !important;
    background-color: #cfcfcf !important;
    background-image: none !important;
}
.message {
    color: #445a68 !important;
}
.p-body, .fr-box, .fr-element, .memberTooltip-info, .memberTooltip-actions, .input, .message-responseRow, .tagItem,  textarea, .pairs.pairs--justified.count--threads, .pairs.pairs--justified.count--messages, .pairs.pairs--justified.count--users, .p-footer-default, .p-footer-custom, .p-footer-copyright, .p-footer, .message-cell, .block-body, .CodeMirror, .CodeMirror-gutter, .overlay-title, .formSubmitRow-controls, .formSubmitRow-bar, .block-MinorHeader, .block-filterBar, .filterBar  {
    color: #445a68 !important;
    background-color: #bdbdbd !important;
}
.p-nav, .p-navEl, .button, .pageNav-page, .pageNav-jump, .message-cell--main, .message-cell--alert, .block-header, .structItem-cell, .block-minorHeader, .block-row, .block-footer, .bbCodeBlock-content, .menu-row, .menu-header, .menu-footer, .reactionsBar, .node-main, .node-icon, .node-extra, .block-container {
    color: #445a68 !important;
    background-color: #ebebeb !important;
}
.pageNav-page--current {
    background-color: #bcbcbc !important;
}
.bbCodeBlock-title, .fr-btn-grp {
    background-color: #cfcfcf
}

 

[Kinematics]

EDIT: Updated and replaced in this post.

I'll record my current CSS adjustments here, to be easier to find. This should work with any chosen theme.

Note: This is designed to work with the Stylus extension for desktop browsers. Other methods of applying user CSS to websites are up to the user.

Note: Reorganized presentation.

Layout CSS. These are independent of theme chosen, and mainly deal with positioning and sizing and stuff.

Spoiler: Layout

:root {
    --min-font-size: 13px;
}

header#header {
    display: none;
}

.p-body-inner {
    margin: 0 auto;
    max-width: 1170px;
}

.bbCodeBlock.bbCodeBlock--quote .bbCodeBlock-content,
.bbCodeBlock-title {
    font-size: max(0.8125rem, var(--min-font-size));
}

.bbCodeBlock--unfurl .contentRow-snippet {
    font-size: max(0.75rem, var(--min-font-size));
}

.bbCodeBlock--unfurl .contentRow-header {
    font-size: max(0.9275rem, var(--min-font-size));
}

.block--messages .message-cell--threadmark-header {
    font-size: max(0.75rem, var(--min-font-size));
}

.message-signature {
    border-top-width: 3px;
}

.menu.menu--medium {
    width: 500px;
}

.message-header header.message-attribution {
    border-top: 0;
    padding-top: 2px;
    padding-bottom: 7px;
}

.buttonGroup > .buttonGroup-buttonWrapper {
    display: inline-flex;
}

/* Undo styling for selected nav button */
.p-nav-list .p-navEl.is-selected {
  color: unset;
  background: unset;
}

• Turn off the main header at the top of the screen. Mainly done for the Dark theme since the image is extra tall and not very readable.
• Set the page content width to a max of 1170px. This is a bit narrower than the site-specific cap of 1270px.
• Quote blocks and certain other elements (unfurl, threadmarks) have issues in some themes, which set the sizes to hardcoded values instead of relative to the main site font size (settable using the control by the username at the top of the screen). Set to match the themes which do set these values properly, so I don't have to figure out which themes get it wrong.
• Increase the thickness of the border between the post text and the user's signature block.
• Increase the width of the alert box to allow more to fit in the vertical space.
• Trims the header bar of posts. This removes a 5px border and most of the padding.
• Fixes the alignment of the Thread Tools button on most themes.
• Get rid of the special styling of 'selected' navbar buttons.

span[style*="transparent" i] {
    color: red !important;
    background-color: black;
}

html[stylus-iframe] span[style*="transparent" i] {
    color: red !important;
    background-color: black;
}

• Reveals invisible text.

CSS that can be theme-specific. Mainly coloring.

Spoiler: Themed

html.style-dark #top {
    background-color: rgb(16, 16, 17)
}

html.style-dark .block--messages article.message {
    background-color: rgb(32, 33, 36)
}

html.style-dark .block--messages article.message .bbCodeBlock {
    background-color: rgb(38, 39, 40)
}

html.style-dark .message-body,
html.style-dark .message-signature,
html.style-dark .message-user,
html.style-dark .message-attribution,
html.style-dark .message-body .bbCodeBlock--unfurl,
html.style-dark .fr-box.fr-basic .fr-element,
html.style-dark .tabs--standalone,
html.style-dark .structItem-minor,
html.style-dark .structItem-parts > li:nth-child(2n),
html.style-dark .structItem-tagBlock .tagItem {
    color: rgb(230, 230, 230);
}

html.style-dark :is(article.message-body, aside.message-signature) :is(a.link, a.username)
{
    color: dodgerblue;
}

html.style-dark article.message-body a.link.link--external:visited {
    color: blueviolet;
}

html.style-dark li.alert.is-unread {
    background-color: #434447 !important;
}

html.style-light li.alert.is-unread {
    background-color: #AAA !important;
}

html.style-light .message-signature {
    border-color: #414141;
}

html.style-dark .message-signature {
    border-color: #418181;
}

• Sets the text color for dark themes to a lighter value, for better contrast.
• Sets the background colors for dark-style themes to darker values. This helps the Dark theme and the Blackened themes, other than the High Contrast theme. Take these out if you use the High Contrast theme.
• Sets the color for links in the dark themes. This is mainly only necessary for the base Dark theme, which doesn't provide any coloring.
• Sets the background color of alerts which have not been read yet, to make them distinct from the read alerts.
• Set color of text used in editor boxes to the same brighter color as normal text.

html.style-dark .message-body,
html.style-dark .message-signature,
html.style-dark .message-body .bbCodeBlock--unfurl,
html.style-dark .fr-box.fr-basic .fr-element {
    font-family: Aptos, "Calisto MT", Cambria, Georgia, serif;
}

• Change the font of message body and editor text to a serif font.

html.style-dark {
    --arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");;
}

html.style-light {
    --arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");;
}

article.message-body a.link.link--external::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 4px;
    margin-bottom: 2px;
    background-image: var(--arrow-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

• Places arrows after a link for external links. Color is adjusted based on the theme type.

In addition, I have CSS for a "borderless" reader mode.

Spoiler: Borderless

Apply this to URLs matching a regexp of:

https://forum.questionablequesting.com/threads/[^/]+/reader/.*

And the CSS:

.p-body-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

.p-body-pageContent {
    margin: 0 auto;
    max-width: unset;
}

.message-cell--user {
    display: none;
}

.p-navSticky {
    position: static !important;
}

This does:

• Removes all horizontal border space (including border space created by my other CSS rule set).
• Removes user info sidebar.
• Make header bar non-sticky.

And stuff that has been removed as it gets fixed on the site.

Spoiler: Obsolete

Removed this from the main block. It was used to hide tags in the alerts menu, but there's a user preference to turn them off, which should be used instead.

.fauxBlockLink-blockLink > span.tagItem {
    display: none;
}

No longer need this to unsticky the nav bar. It's an option in preferences now.

.p-navSticky {
    position: static !important;
}

There's a toggle to reduce the site width on the page now, so don't need to hardcode this limit. Can still apply it if you want something specific.

.p-body-pageContent {
    margin: 0 auto;
    max-width: 1170px;
}

 

[Stelarwand030]

I'll record my current CSS adjustments here, to be easier to find. This is designed for the Dark theme.

.block--messages .message, .block--messages .block-row, .block-container {
  color: #D6D6D6 !important;
}

article.message-body a.link:is(:link, :visited, :hover, :active) {
    color: lightblue;
}

article.message-body a.link.link--external:visited {
    color: blueviolet;
}

.p-navSticky {
    position: static !important;
}

.p-nav-smallLogo img {
    max-height: unset;
}

.p-body-pageContent {
    margin: 0 auto;
    max-width: 1170px;
}

.menu.menu--medium {
  width: 500px;
}

li.alert.is-unread {
    background-color: #434447 !important;
}

.fauxBlockLink-blockLink > span.tagItem {
    display: none;
}

.message-signature {
    border-top: 3px solid #39393b;
}

span[style*="transparent" i] {
    color: red !important;
    background-color: black;
}

html[stylus-iframe] span[style*="transparent" i] {
    color: red !important;
    background-color: black;
}

article.message-body a.link.link--external::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 4px;
    margin-bottom: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

This includes:

• Lighter text color for more contrast.
• Make links in posts a different color (light blue/purple).
• Make header bar non-sticky.
• Remove limit on QQ logo at the top left banner, so it's not tiny.
• Limit page width to about 1200px wide.
• Make the alerts menu wider.
• Unread alerts have a lighter gray background color.
• Remove tags from the alerts menu story descriptions.
• Increase thickness of the border between message text and signature.
• Show invisitext.
• Add an arrow image to external links.

In addition, I have CSS for a "borderless" reader mode.

Apply this to URLs matching a regexp of:

https://forum.questionablequesting.com/threads/[^/]+/reader/.*

And the CSS:

.p-body-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

.p-body-pageContent {
    margin: 0 auto;
    max-width: unset;
}

.message-cell--user {
    display: none;
}

.p-navSticky {
    position: static !important;
}

This does:

• Removes all horizontal border space (including border space created by my other CSS rule set).
• Removes user info sidebar.
• Make header bar non-sticky.

Click to shrink...

Where and how do you use this? I have always wondered how to use this but never could figure it out.

 

[Sujamma]

Where and how do you use this? I have always wondered how to use this but never could figure it out.

Click to shrink...

Browser extension called Stylus is the easiest way. Specifically that name btw, the previous version "Stylish" got hijacked with malware some time around 2016.

 

[Stelarwand030]

Browser extension called Stylus is the easiest way. Specifically that name btw, the previous version "Stylish" got hijacked with malware some time around 2016.

Click to shrink...

This one?

 

[Kinematics]

This one?

Click to shrink...

Yes, that's the one.

 

[Kinematics]

Also, I updated my CSS so that it should work fine for any of the currently available themes — Light, Dark, or Default.

 

[Morte_Perpetua]

Is there any way to increase the brightness/contrast of the text? It looks like there is some grey filter on it lol. I doubted my eyes for a moment before comapring it to the older version of this site.

Edit: Ok I compared it again and your html fix here helped somewhat but the background is still brighter so it looks more washed out by contrast. Any way @Kinematics you could make it even brighter/easier to read still? Pretty please
Thank you!

 

[Kinematics]

Is there any way to increase the brightness/contrast of the text? It looks like there is some grey filter on it lol. I doubted my eyes for a moment before comapring it to the older version of this site.

Edit: Ok I compared it again and your html fix here helped somewhat but the background is still brighter so it looks more washed out by contrast. Any way @Kinematics you could make it even brighter/easier to read still? Pretty please
Thank you!

Click to shrink...

You can change the color in the first rule from #D6D6D6 to #E6E6E6, and that will brighten up the text. If you want a darker background, that will take more work, since there's more parts to look into.


Edit: OK, I think I got the most pertinent stuff. The following can be added to the main CSS in order to darken the general background of the Dark theme pages:

html.style-dark #top {
    background-color: rgb(16, 16, 17)
}

html.style-dark .block--messages article.message {
    background-color: rgb(32, 33, 36)
}

html.style-dark .block--messages article.message .bbCodeBlock {
    background-color: rgb(38, 39, 40)
}

I added it to my post above, too.

@Morte_Perpetua tag on edit

 

[Morte_Perpetua]

You can change the color in the first rule from #D6D6D6 to #E6E6E6, and that will brighten up the text. If you want a darker background, that will take more work, since there's more parts to look into.


Edit: OK, I think I got the most pertinent stuff. The following can be added to the main CSS in order to darken the general background of the Dark theme pages:

html.style-dark #top {
    background-color: rgb(16, 16, 17)
}

html.style-dark .block--messages article.message {
    background-color: rgb(32, 33, 36)
}

html.style-dark .block--messages article.message .bbCodeBlock {
    background-color: rgb(38, 39, 40)
}

I added it to my post above, too.

@Morte_Perpetua tag on edit

Click to shrink...

Do I just put that in at the end?

 

[Kinematics]

Do I just put that in at the end?

Click to shrink...

Yeah, that should be fine.

 

[Jao]

Lemme see if discord embeds want to play nice ...

Spoiler

Click to shrink...

The link is going to break after 24 hours. Use a something else for image hosting, I use https://postimages.org, so try using that.

 

[Sujamma]

Version 2 of QQ Light 2015, I'm reasonably happy with it as a light-mode theme. This style works best with the Xenforo Default theme selected.

Spoiler

a,
span,
.node--unread,
.p-navgroup {
    color: #1046BA !important;
    background-color: inherit !important;
}
h2,
button,
.message-cell--user,
.fr-box,
.fr-more-toolbar,
.memberProfileBanner {
    color: #445A68 !important;
    background-color: #cfcfcf !important;
    background-image: none !important;
}
.message {
    color: #445a68 !important;
}
.p-body,
.fr-box,
.fr-element,
.memberTooltip-info,
.memberTooltip-actions,
.input,
.message-responseRow,
.tagItem,
textarea,
.p-footer-default,
.p-footer-custom,
.p-footer-copyright,
.p-footer,
.message-cell,
.block-body,
.CodeMirror,
.CodeMirror-gutter,
.overlay-title,
.formSubmitRow-controls,
.formSubmitRow-bar,
.formRow-labelWrapper,
.block-MinorHeader,
.block-filterBar,
.filterBar,
.memberOverviewBlock-seeMore,
.overlay-title {
    color: #445a68 !important;
    background-color: #bdbdbd !important;
    background-image: none !important;
}
.bbCodeBlock-expandLink,
.bbCodeBlock-shrinkLink {
    background: linear-gradient(to bottom, rgba(245,245,245,0) 0%, #ebebeb 80%)
}
.p-nav,
.p-header,
.p-sectionLinks,
.p-navEl,
.button,
.pageNav-page,
.pageNav-jump,
.pageNav-jump--prev,
.message-cell--main,
.message-cell--alert,
.block-header,
.structItem-cell,
.block-minorHeader,
.block-row,
.block-footer,
.block-formSectionHeader,
.bbCodeBlock-content,
.menu-row,
.menu-header,
.menu-footer,
.menu-tabHeader,
.listPlain,
.menu-linkRow,
.reactionsBar,
.node-main,
.node-icon,
.node-extra,
.memberOverviewBlock,
.tabs,
.block-container,
.threadmarkListingHeader-content {
    color: #445a68 !important;
    background-color: #ebebeb !important;
    background-image: none !important;
}
.pageNav-page--current {
    background-color: #bcbcbc !important;
}
::-webkit-scrollbar-thumb {
    background-color: #8e8e8e;
}
.bbCodeBlock-title,
.fr-btn-grp,
::-webkit-scrollbar {
    background-color: #cfcfcf
}
dt,
time,
.pairs.pairs--justified.count--threads,
.pairs.pairs--justified.count--messages,
.pairs.pairs--justified.count--users,
.message-attribution,
.bbWrapper,
#js-XFUniqueId3 {
    color: #445A68 !important;
    background-color: inherit !important;
}

 

[Ibskib]

I have tried to make it look a bit more like the old Black and blue Style, though I honestly only have the vaguest idea about what I'm doing, used a few of Kinematics fixes. all if his layout stuff could just be added in Stylus in addition to mine:

Spoiler: Screenshot

Spoiler: Full Stylus CSS code with comments

@-moz-document domain("forum.questionablequesting.com") {

/* Hide Normal Threads bar */
.structItemContainer-group--normal-block.structItemContainer-group > .structItem--thread.structItem {
display: none;
}

/* text colour */
.block--messages .message, .block--messages .block-row, .block-container {
color: #dedede !important;
}
/* show spoilers */
span[style*="transparent" i] {
color: red !important;
background-color: black;
}
html[stylus-iframe] span[style*="transparent" i] {
color: red !important;
background-color: black;
}
/* Set page width */
.p-body-pageContent {
margin: 0 auto;
max-width: 1170px;
}
/* Remove Facebook-esque thumbs up icon */
.js-reaction.reaction-sprite, .reactionSummary {
display: none;
}

/* Unread alerts lighter */
li.alert.is-unread {
background-color: #444547 !important;
}
/* text colour */
.block--messages .message, .block--messages .block-row, .block-container {
color: #dededef5 !important;
}
/* darker grey background on main page */
.p-body {
background-color: #212121;
}
.node-body {
background-color: #212121;
}
.block-container {
background-color: #212121;
}
.structItem-cell--meta.structItem-cell {
background-color: #1c1c1c;
}
/* Change colours of buttons, boxes and links */
.message-footer .message-actionBar .actionBar-set a, .reactionsBar {
background-color: #272727;
}
.button-text {
color: #c8c8c8e6;
}
.label {
color: #0596feb8;
}
.block-filterBar {
background-color: #0596fe6b;
}
.structItem > .structItem-cell--main.structItem-cell > .structItem-minor > .structItem-parts > li > .username {
color: #c8c8c8e6;
}
.structItem--thread.structItem > .structItem-cell--main.structItem-cell > .structItem-minor > .structItem-parts > .structItem-startDate > [href] > .u-dt {
color: #c8c8c8e6;
}


a:link {
color: #0596fec2;
}
aisited {
color: #0596fec2;
}

}

I coloured all links, and tried to make a few exceptions, though can't get the Wordcount back to a more discrete light grey, maybe someone else have an idea how to?
I also removed the normal Thread bar since it seems pointless.

If anyone have screenshots of the old main page with the black and blue, I would appreciate it so I can try to adjust that one (the new one just looks off to me), I only have of the NSFW Creative Writing thread.

One more thing I would like is to declutter Alerts further, by removing Threadmarks mentions and "There may be more posts after this.", @Kinematics do you happen to have an idea how to do that? I tried a bunch of stuff, but couldn't get anything to work since it's just text, maybe it is not possible with css?

 

[Kinematics]

I coloured all links, and tried to make a few exceptions, though can't get the Wordcount back to a more discrete light grey, maybe someone else have an idea how to?

Click to shrink...

What word count do you mean? The count at the bottom of the edit box is a span with class fr-word-counter, so that's easy enough to target. Not sure what other places it might be.

One more thing I would like is to declutter Alerts further, by removing Threadmarks mentions and "There may be more posts after this.", @Kinematics do you happen to have an idea how to do that? I tried a bunch of stuff, but couldn't get anything to work since it's just text, maybe it is not possible with css?

Click to shrink...

CSS doesn't have any way to directly target text that's not inside a tag, so no, there's no way to affect that.

Aside: You have a rule to remove tags from the alerts, which you seem to have pulled from my earlier CSS. You don't need that anymore. There's a preference setting to turn off tags in alerts.

 

[Ibskib]

@Kinematics Thanks for letting me know about the alert.
I meant the Word count field under each thread title (such as Words: 30k) . I wasn't sure what to target when I inspected it, also tried to find what to use with Ublock Origin, that's what I used to find the other class names, but it only shows a href link.
This is what I see when inspecting a random story, I'm a bit confused, when you mention fr-word-count I don't see that anwhere.
<a href="/threads/the-immortal-in-a-hentai-fantasy-world-hentai-fantasy-setting.26746/threadmarks/unread" data-xf-click="overlay">Words: 83k</a>

If you know how to change it with exactly what to target like I did with author name and date, I would much appreciate a lifeline, it is a very small thing, but annoying nonetheless.

 

[Kinematics]

I meant the Word count field under each thread title (such as Words: 30k) . I wasn't sure what to target when I inspected it, also tried to find what to use with Ublock Origin, that's what I used to find the other class names, but it only shows a href link.

Click to shrink...

Here:

div.p-body-pageContent div[data-type="thread"] ul.structItem-parts li.structItem-startDate + li a  {
    background-color: red !important;
}

Drop that in and you should see those particular links highlighted in red. The div[data-type="thread"] should make sure it only works on the thread listing pages, not inside threads or whatever. Note that it won't work on your watched threads page because the watched threads page does not specify a data type for its content, and if I took out that restriction it could hit stuff in normal threads or other types of pages.

Anyway, replace the background color with whatever styling you want to use on it.

 

[Kinematics]

I've been dropping stuff into my post above without posting about what I'm changing. Should probably do that.

I want to look into making using the sticky navbar tolerable. I mainly want it accessble for my user menu, conversations, alerts, and search.

The main problem with the sticky navbar is that it's too big. Turns out, that's because it has huge padding values. Here's a trivial change to get rid of the padding.

.p-nav-inner {
    padding: 0;
}

The other problem is the new secondary nav bar. Some people don't want to have to click twice, but I use the functions on there so rarely that it's just a waste of space. So, turn it off.

.p-sectionLinks--wrapper {
    display: none;
}

And now re-enabling the sticky nav bar is actually OK. It doesn't use up nearly as much space. Except that the Forums button is now permanently selected on most pages, so has no dropdown menu. It's basically expecting that the secondary nav bar is always open, but it's not there anymore.

So I have to fix it so that the dropdown arrow shows up again.

.p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger {
    display: block;
}

Fine as far as it goes, but the Forum button still looks selected. I can reset it back to the unselected look. Very little is needed.

.p-nav-list .p-navEl.is-selected {
  color: unset;
  background: unset;
}

And this seems pretty workable.