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

[Kinematics]

Going back to the signature border, I'm going to separate it into two sections.

For Layout, it just needs a greater thickness:

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

For theming, it needs some distinctive coloring, and light and dark themes need different colors. I chose the value already in use by the Lightented theme for light themes, so that Light gets it as well (instead of the nearly invisible pale color). For dark themes, I had it as a lighter gray, but I think a bit of color is really needed. I ended up with a faded blue color that I think works well with all the other main colors (red, green, blue, purple).

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

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

 

[Kinematics]

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

Click to shrink...

So, just a few hours after I posted this, and it seems it is no longer necessary. All the changes I made have become part of the default, other than the 'selected' look of the Forums button. So I'll remove the extra stuff from my primary collection post.

 

[Kinematics]

I've gone back and done another pass on the text colors of the site. The classes are more streamlined and easier to figure out now.

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);
}

Also, some people have pushed for a serif font for some themes. While I can appreciate a good serif font, I'm not sure about it being a default, or something that should need yet another suite of themes. So I put together a small little bit of CSS to change the font of message text and editor textbox text to a serif version. Put it in a separate ruleset and you can turn it on and off without affecting other stuff.

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

I find Calisto MT preferable to Cambria and Georgia, so set that higher on the list. Aptos is the new default serif font for Office 365, so hopefully looks good, but since I don't have the latest Office 365 I can't verify it.

 

[Kinematics]

EDIT: Superceded by the following post.

OK, new approach. This is strictly for the theming side of things, not the layout.

I've broken my theming rules into three rule sets.

The first set figures out which elements need to be styled, and what to style them with. It should not need to be modified much, because it doesn't set values, it uses variables to set properties.

The second rule set provides basic coloring variables of either dark or light nature, along with fonts. This provides consistent background and font colors across the various site themes, aside from the Default theme. (The Default theme has special needs, and I'm less inclined to mess with it anyway.) Choose basic or high contrast for the dark theme. I haven't worked out light theme variations for high contrast yet.

The third rule set provides accent colors. This is basically for the link colors, but in general all the, for example, green styled text in Blackened Green, or purple styled text in Blackened Purple. With this, you can change the accent to, say, orange, which a number of people have wished for.

The intent is that you should only need to modify the rule sets with variables in them. You don't have to figure out all the different places that link colors need to be changed in order to change the accent from orange to red, or whatever.

You can, of course, simply create a new accent rule set for your own preferences, and disable the sample orange one, as long as you set the same variable values. And disabling the accent rule set entirely just lets the default theme colors come back through.

Spoiler: Entry 1, Underlying styling

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

.message-body,
.message-signature,
.message-body .bbCodeBlock--unfurl,
.fr-box.fr-basic .fr-element {
    font-family: var(--display-message-fonts);
}

/* Fix font sizes which were hardcoded. Change to rems with a minimum size. */
.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));
}


#top {
    background-color: var(--page-background-color);
}

.message-cell.message-cell--main {
    background-color: var(--message-main-background-color);
}

.message-cell.message-cell--user {
    background-color: var(--message-user-background-color);
}

.message-header .message-attribution,
.reactionsBar {
    background-color: var(--message-header-background-color);
}

.bbCodeBlock-title {
    background-color: var(--message-quote-title-background-color);
}

.bbCodeBlock-content {
    background-color: var(--message-quote-background-color);
}

.p-navgroup-link.is-menuOpen {
    background-color: var(--message-header-background-color);
}

a,
.bbWrapper a,
.bbWrapper .bbCodeBlock-title a, .bbWrapper .bbCodeBlock-expandLink a,
.button.button--link, a.button.button--link,
.pageNav-page:not(.pageNav-page--current) > a,
a.pageNav-jump,
.p-breadcrumbs--parent .p-breadcrumbs a,
.p-breadcrumbs--parent .p-breadcrumbs > li::after,
html[data-logged-in="true"] .structItem-cell .unreadLink::before,
.tabs--standalone .tabs-tab.is-active,
.XenBase label.iconic i,
.menu-tabHeader .tabs-tab.is-active,
.p-navgroup-link.is-menuOpen,
.reaction--1 .reaction-text {
    color: var(--link-color,);
}

a:hover,
.bbWrapper a:hover,
.bbWrapper .bbCodeBlock-title a, .bbWrapper .bbCodeBlock-expandLink a:hover,
.button.button--link, a.button.button--link:hover,
.pageNav-page:not(.pageNav-page--current) > a:hover,
a.pageNav-jump:hover,
.p-breadcrumbs--parent .p-breadcrumbs a:hover,
html[data-logged-in="true"] .structItem-cell .unreadLink:hover::before,
.tabs--standalone .tabs-tab.is-active:hover,
.XenBase label.iconic:hover > input + i,
.menu-tabHeader .tabs-tab:hover,
.p-navgroup-link.is-menuOpen:hover,
.message-footer .message-actionBar .actionBar-set a:hover {
    color: var(--link-hover-color);
}

.bbCodeBlock-title,
.block-minorHeader,
.node--unread .node-icon i::before,
.subNodeLink.subNodeLink--unread .subNodeLink-icon,
.block-formSectionHeader,
.inputDate .inputDate-icon {
    color: var(--block-title);
}

.bbCodeBlock {
    border-left-color: var(--block-border-accent);
}

.menu-linkRow.is-selected, .menu-linkRow:hover, .menu-linkRow:focus {
    border-left-color: var(--block-border-accent) !important;
}

.menu-content {
    border-top-color: var(--block-border-accent);
}

.menu-arrow {
    border-bottom-color: var(--block-border-accent);
}

.block-tabHeader .tabs-tab.is-active,
.block-tabHeader .tabs > input:checked + .tabs-tab--radio {
    border-bottom-color: var(--block-border-accent);
}

.js-alertsMenuBody li.alert.is-unread {
    background-color: var(--unread-alert-background-color);
}

.message-signature {
    border-color: var(--signature-border-color);
}

Spoiler: Entry 2a, Basic contrast light/dark coloring

:root {
    --min-font-size: 13px;
    --display-serif-fonts: Aptos, "Calisto MT", Cambria, Georgia, serif;
    --display-sanserif-fonts: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    --display-message-fonts: var(--display-serif-fonts);
}

:root.style-dark {
    --main-text-color: rgb(230, 230, 230);
    --page-background-color: rgb(8, 8, 8);
    --message-main-background-color: rgb(28, 28, 28);
    --message-user-background-color: rgb(42, 42, 42);
    --message-header-background-color: rgb(52, 52, 52);
    --message-quote-background-color: rgb(34, 34, 34);
    --message-quote-title-background-color: rgb(60, 60, 60);
    --unread-alert-background-color: rgb(50, 50, 50);
    --signature-border-color: rgb(65, 129, 129);
}

:root.style-light {
    --main-text-color: rgb(27, 27, 27);
    --page-background-color: rgb(240, 240, 240);
    --message-main-background-color: rgb(250, 250, 250);
    --message-user-background-color: rgb(230, 230, 230);
    --message-header-background-color: rgb(220, 220, 220);
    --message-quote-background-color: rgb(240, 240, 240);
    --message-quote-title-background-color: rgb(60, 60, 60);
    --unread-alert-background-color: rgb(200, 200, 200);
    --signature-border-color: rgb(65, 65, 65);
}

Spoiler: Entry 2b, High contrast light/dark coloring

:root {
    --min-font-size: 13px;
    --display-serif-fonts: Aptos, "Calisto MT", Cambria, Georgia, serif;
    --display-sanserif-fonts: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    --display-message-fonts: var(--display-serif-fonts);
}

:root.style-dark {
    --main-text-color: rgb(230, 230, 230);
    --page-background-color: rgb(0, 0, 0);
    --message-main-background-color: rgb(0, 0, 0);
    --message-user-background-color: rgb(32, 32, 32);
    --message-header-background-color: rgb(52, 52, 52);
    --message-quote-background-color: rgb(34, 34, 34);
    --message-quote-title-background-color: rgb(60, 60, 60);
    --unread-alert-background-color: rgb(50, 50, 50);
    --signature-border-color: rgb(65, 129, 129);
}

:root.style-light {
    --main-text-color: rgb(27, 27, 27);
    --page-background-color: rgb(240, 240, 240);
    --message-main-background-color: rgb(250, 250, 250);
    --message-user-background-color: rgb(230, 230, 230);
    --message-header-background-color: rgb(220, 220, 220);
    --message-quote-background-color: rgb(240, 240, 240);
    --message-quote-title-background-color: rgb(60, 60, 60);
    --unread-alert-background-color: rgb(200, 200, 200);
    --signature-border-color: rgb(65, 65, 65);
}

Spoiler: Entry 3, Accent colors

:root.style-dark {
    --link-color: orange;
    --link-hover-color: darkorange;
    --block-title: orange;
    --block-left-accent: orange;
}

:root.style-light {
    --link-color: rgb(228, 125, 0);
    --link-hover-color: orange;
    --block-title: rgb(228, 125, 0);
    --block-left-accent: rgb(228, 125, 0);
}

Edit: Added some stuff I missed before. Also, turns out simply disabling the accent rule set does not revert the accent colors to the base theme. This seems to be a limitation in using CSS variables. So the accent rule set is necessary if you want to use this userstyle.

 

[Kinematics]

Revised yet again. This includes a couple extra userstyles that can be turned on or off to cause their effects. These are for high contrast for dark themes, and serif fonts. Turning them on enables variables that are used in later userstyles. Otherwise they default to basic contrast and sans-serif fonts.

The Basic Background makes use of variables set in High Contrast and Serif Fonts. Final Settings makes use of variables set in Basic Background and Orange Accent. Final Settings should hopefully not need any additional editing (unless I need to add things I missed). Ideally, you will at most only need to adjust the variables set in the other userstyles.

This shouldn't need any direct editing to get serif fonts or high contrast backgrounds. Just enable or disable the relevant userstyle, and the variables they set will cascade down and be used in the Final Settings.

Spoiler: Serif Fonts

:root {
    --display-serif-fonts: Aptos, "Calisto MT", Cambria, Georgia, serif;
}

Spoiler: High Contrast

:root.style-dark {
    --page-background-color-high-contrast: rgb(0, 0, 0);
    --message-main-background-color-high-contrast: rgb(0, 0, 0);
    --message-user-background-color-high-contrast: rgb(32, 32, 32);
}

Spoiler: Orange Accent

:root.style-dark {
    --link-color: orange;
    --link-hover-color: darkorange;
    --block-title: orange;
    --block-border-accent: orange;
    --signature-border-accent: darkorange;
    --code-token-color: rgb(230, 219, 116);
    --complement-text-color: rgb(230, 230, 230);
    --background-hover-color: rgb(124, 73, 22);
}

:root.style-light {
    --link-color: rgb(228, 125, 0);
    --link-hover-color: orange;
    --block-title: rgb(228, 125, 0);
    --block-border-accent: rgb(228, 125, 0);
    --signature-border-accent: orange;
    --code-token-color: rgb(0, 85, 170);
    --complement-text-color: rgb(230, 230, 230);
    --background-hover-color: rgb(124, 73, 22);
}

Spoiler: Basic Background

/* Define default san-serif fonts. Enable serif font userstyle to get that instead. */
:root {
    --display-sanserif-fonts: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
}

/* Choose font size and default font. */
:root {
    --display-message-fonts: var(--display-serif-fonts, var(--display-sanserif-fonts));
    --min-font-size: 13px;
    --signature-border-thickness: 3px;
}

/* Default basic contrast. Enable High Contrast userstyle to get that instead. */
:root.style-dark {
    --page-background-color-basic-contrast: rgb(8, 8, 8);
    --message-main-background-color-basic-contrast: rgb(28, 28, 28);
    --message-user-background-color-basic-contrast: rgb(42, 42, 42);
}


/* Set colors */
:root.style-dark {
    --main-text-color: rgb(230, 230, 230);
    --page-background-color: var(--page-background-color-high-contrast, var(--page-background-color-basic-contrast));
    --message-main-background-color: var(--message-main-background-color-high-contrast, var(--message-main-background-color-basic-contrast));
    --message-user-background-color: var(--message-user-background-color-high-contrast, var(--message-user-background-color-basic-contrast));
    --message-header-background-color: rgb(52, 52, 52);
    --message-quote-background-color: rgb(34, 34, 34);
    --message-quote-title-background-color: rgb(60, 60, 60);
    --unread-alert-background-color: rgb(50, 50, 50);
    --signature-border-color: var(--signature-border-accent, rgb(65, 129, 129));
}

:root.style-light {
    --main-text-color: rgb(27, 27, 27);
    --page-background-color: rgb(240, 240, 240);
    --message-main-background-color: rgb(250, 250, 250);
    --message-user-background-color: rgb(230, 230, 230);
    --message-header-background-color: rgb(220, 220, 220);
    --message-quote-background-color: rgb(240, 240, 240);
    --message-quote-title-background-color: rgb(60, 60, 60);
    --unread-alert-background-color: rgb(200, 200, 200);
    --signature-border-color: var(--signature-border-accent, rgb(65, 65, 65));
}

Spoiler: Final Settings (avoid editing)

html,
.message-body,
.message-signature,
.message-user,
.message-attribution,
.message-body .bbCodeBlock--unfurl,
.fr-box.fr-basic .fr-element,
.fr-box.fr-basic.is-focused .fr-element,
.tabs--standalone,
.structItem-minor,
.structItem-parts > li:nth-child(2n),
.structItem-tagBlock .tagItem {
    color: var(--main-text-color);
}

.sv-accordion dt.sv-accordion-title {
    color: var(--complement-text-color);
}

.message-body,
.message-signature,
.message-body .bbCodeBlock--unfurl,
.fr-box.fr-basic .fr-element {
    font-family: var(--display-message-fonts);
}

/* Fix font sizes which were hardcoded. Change to rems with a minimum size. */
.p-title-value {
    font-size: max(1.375rem, 20px);
}

.structItem-title {
    font-size: max(1rem, 16px);
}

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

.bbCodeBlock.bbCodeBlock--quote .bbCodeBlock-content,
.bbCodeBlock-title,
.p-sectionLinks-list .p-navEl,
.p-description {
    font-size: max(0.8125rem, 13px);
}

.bbCodeBlock--unfurl .contentRow-snippet,
.block--messages .message-cell--threadmark-header,
.structItem-minor {
    font-size: max(0.75rem, 12px);
}

.structItem-pageJump {
    font-size: max(0.6875rem, 11px);
}
/* End font size fixes. */

#top {
    background-color: var(--page-background-color);
}

.message-cell.message-cell--main,
.structItem--thread {
    background-color: var(--message-main-background-color);
}

.message-cell.message-cell--user {
    background-color: var(--message-user-background-color);
}

.message-header .message-attribution,
.reactionsBar {
    background-color: var(--message-header-background-color);
}

.bbCodeBlock-title {
    background-color: var(--message-quote-title-background-color);
}

.bbCodeBlock-content {
    background-color: var(--message-quote-background-color);
}

.p-navgroup-link.is-menuOpen {
    background-color: var(--message-header-background-color);
}

a,
.bbWrapper a,
.bbWrapper .bbCodeBlock-title a, .bbWrapper .bbCodeBlock-expandLink a,
.button.button--link, a.button.button--link,
.pageNav-page:not(.pageNav-page--current) > a,
a.pageNav-jump,
.p-breadcrumbs--parent .p-breadcrumbs a,
.p-breadcrumbs--parent .p-breadcrumbs > li::after,
html[data-logged-in="true"] .structItem-cell .unreadLink::before,
.tabs--standalone .tabs-tab.is-active,
.XenBase label.iconic i,
.menu-tabHeader .tabs-tab.is-active,
.p-navgroup-link.is-menuOpen,
.reaction--1 .reaction-text,
.p-nav-list .p-navEl.is-menuOpen {
    color: var(--link-color);
}

a:hover,
.bbWrapper a:hover,
.bbWrapper .bbCodeBlock-title a, .bbWrapper .bbCodeBlock-expandLink a:hover,
.button.button--link, a.button.button--link:hover,
.pageNav-page:not(.pageNav-page--current) > a:hover,
a.pageNav-jump:hover,
.p-breadcrumbs--parent .p-breadcrumbs a:hover,
html[data-logged-in="true"] .structItem-cell .unreadLink:hover::before,
.tabs--standalone .tabs-tab.is-active:hover,
.XenBase label.iconic:hover > input + i,
.menu-tabHeader .tabs-tab:hover,
.p-navgroup-link.is-menuOpen:hover,
.message-footer .message-actionBar .actionBar-set a:hover,
.message-attribution-opposite a:hover  {
    color: var(--link-hover-color);
}

.p-nav-list .p-navEl.is-selected,
.fr-toolbar .fr-command.fr-btn.fr-active:not(.fr-disabled),
.pollResult--voted .pollResult-response::before {
    color: var(--link-hover-color);
}

.sv-accordion dt.sv-accordion-title:hover {
    background-color: var(--background-hover-color);
}

.bbCodeBlock-title,
.block-minorHeader,
.node--unread .node-icon i::before,
.subNodeLink.subNodeLink--unread .subNodeLink-icon,
.block-formSectionHeader,
.inputDate .inputDate-icon,
.block-textHeader,
.sv-tabs .sv-tabs-tabs .sv-tabs-tab--active,
.sv-tabs .sv-tabs-tabs .sv-tabs-tab:hover  {
    color: var(--block-title);
}

.bbCodeBlock {
    border-left-color: var(--block-border-accent);
}

.menu-linkRow.is-selected, .menu-linkRow:hover, .menu-linkRow:focus {
    border-left-color: var(--block-border-accent) !important;
}

.menu-content {
    border-top-color: var(--block-border-accent);
}

.menu-arrow {
    border-bottom-color: var(--block-border-accent);
}

.block-tabHeader .tabs-tab.is-active,
.block-tabHeader .tabs > input:checked + .tabs-tab--radio {
    border-bottom-color: var(--block-border-accent);
}

.js-alertsMenuBody li.alert.is-unread {
    background-color: var(--unread-alert-background-color);
}

.message-signature {
    border-color: var(--signature-border-color);
    border-top-width: var(--signature-border-thickness);
}

/* Remove wasted padding space on message header bars. */
.message-header header.message-attribution {
    border-top: 0;
    padding-top: 2px;
    padding-bottom: 7px;
}

/* Code block highlighting */
html.style-dark .bbCodeCode .language-css .prism-token:is(.prism-selector, .prism-function, .prism-class-name, .prism-important, .prism-bold) {
    color: var(--code-token-color);
}

And a few other personal tweaks people may find useful.

Spoiler: Misc layout

/* Turn off main header image bar */
header#header {
    display: none;
}

/* Personal max width for site content. */
.p-body-inner {
    margin: 0 auto;
    max-width: 1170px;
}

/* Widen the alerts menu dropdown */
.menu.menu--medium {
    width: 500px;
}

/* Set struct cell padding to match Blackened theme, even on other themes. */
.structItem-cell {
    padding: 12px 11px;
}

 

[Biglett]

Speaking of getting things back to the way they were. Does anyone have a fix for the new notifications settings? I used to have it set that only the OP with sufficient word count would make a thread pop back up in my notifications, but now it's whenever someone responds to it. I get that it used to do that if you had just viewed the thread, but now it does it even after the first reply after I click off the thread. Does anyone know how to set it back to the one way?

 

[Kinematics]

Speaking of getting things back to the way they were. Does anyone have a fix for the new notifications settings? I used to have it set that only the OP with sufficient word count would make a thread pop back up in my notifications, but now it's whenever someone responds to it. I get that it used to do that if you had just viewed the thread, but now it does it even after the first reply after I click off the thread. Does anyone know how to set it back to the one way?

Click to shrink...

You can turn off alerts for when anyone replies to the thread, and have it only when the OP replies, though you can't limit it to a specific word count as far as I know. Go to Preferences, and look through the Alert options. Possibly also disable "Generate new alerts without reading threads".

 

[Biglett]

You can turn off alerts for when anyone replies to the thread, and have it only when the OP replies, though you can't limit it to a specific word count as far as I know. Go to Preferences, and look through the Alert options. Possibly also disable "Generate new alerts without reading threads".

Click to shrink...

Thanks a million!