• The site has now migrated to Xenforo 2. If you see any issues with the forum operation, please post them in the feedback thread.
  • Due to issues with external spam filters, QQ is currently unable to send any mail to Microsoft E-mail addresses. This includes any account at live.com, hotmail.com or msn.com. Signing up to the forum with one of these addresses will result in your verification E-mail never arriving. For best results, please use a different E-mail provider for your QQ address.
  • For prospective new members, a word of warning: don't use common names like Dennis, Simon, or Kenny if you decide to create an account. Spammers have used them all before you and gotten those names flagged in the anti-spam databases. Your account registration will be rejected because of it.
  • Since it has happened MULTIPLE times now, I want to be very clear about this. You do not get to abandon an account and create a new one. You do not get to pass an account to someone else and create a new one. If you do so anyway, you will be banned for creating sockpuppets.
  • Due to the actions of particularly persistent spammers and trolls, we will be banning disposable email addresses from today onward.
  • The rules regarding NSFW links have been updated. See here for details.

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

Ron

Know what you're doing yet?
Joined
Jun 21, 2020
Messages
101
Likes received
311
As stated, I am wondering how to make the site look as it did before the update.
 
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.
HTML: 
.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
}
 
Last edited:
Sujamma said:
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.
HTML: 
.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 expand...
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?
 
Jamesson Locke said:
Would definitely like the old alt appearances back, particularly blackened blue.
Click to expand...
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".
 
Sujamma said:
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 expand...
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.
 
Sujamma said:
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 expand...
Click to shrink...


Lemme see if discord embeds want to play nice ...
Screenshot_20220501-095436.png
 
Here's my first draft of QQ Light 2015. If I missed something, please let me know, otherwise enjoy.

CSS: 
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
}
 
Last edited:
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.
CSS: 
: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.
CSS: 
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.
CSS: 
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.

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

CSS: 
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.
Apply this to URLs matching a regexp of:
Code: 
https://forum.questionablequesting.com/threads/[^/]+/reader/.*
And the CSS:
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.
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.
CSS: 
.fauxBlockLink-blockLink > span.tagItem {
    display: none;
}

No longer need this to unsticky the nav bar. It's an option in preferences now.
CSS: 
.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.
CSS: 
.p-body-pageContent {
    margin: 0 auto;
    max-width: 1170px;
}
 
Last edited:
Kinematics said:
I'll record my current CSS adjustments here, to be easier to find. This is designed for the Dark theme.

CSS: 
.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:
Code: 
https://forum.questionablequesting.com/threads/[^/]+/reader/.*
And the CSS:
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 expand...
Click to shrink...
Where and how do you use this? I have always wondered how to use this but never could figure it out.
 
Also, I updated my CSS so that it should work fine for any of the currently available themes — Light, Dark, or Default.
 
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!
 
Last edited:
Morte_Perpetua said:
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 expand...
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:
CSS: 
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
 
Last edited:
Kinematics said:
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:
CSS: 
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 expand...
Click to shrink...
Do I just put that in at the end?
 
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.
CSS: 
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;
}
 
Last edited:
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:
Stylus-thread-page3.png
@-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;
}
a:Visited {
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?
 
Last edited:
Ibskib said:
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 expand...
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.

Ibskib said:
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 expand...
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.
 
@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. :)
 
Last edited:
Ibskib said:
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 expand...
Click to shrink...
Here:
CSS: 
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.
 
Last edited:
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.
CSS: 
.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.
CSS: 
.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.
CSS: 
.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.
CSS: 
.p-nav-list .p-navEl.is-selected {
  color: unset;
  background: unset;
}
And this seems pretty workable.
 
Last edited:
You must log in or register to reply here.

Users who are viewing this thread

Total: 1 (members: 0, guests: 1)
Back
Top