The Stylish/User CSS library (wiki post!)

Add your user CSS tweaks here.

You can get Stylish for Chrome here.

You can get Stylish for FireFox here.

To use a user style, follow these instructions:

Firefox

  1. Install the Stylish addon.
  2. Click the new ‘Stylish’ browser bar icon. (It’s an S in a box.)
  3. Go to Write New Style → For forum.quartertothree.com
  4. Paste one of the user styles below into the code box.
  5. Give the style a name and save it.
  6. The style should take effect.

Chrome

  1. Install the Stylish extension.
  2. Click the new ‘Stylish’ browser bar icon when you’re at the Qt3 forum.
  3. Click on ‘forum’ after Write Style For, so that ‘forum.quartertothree.com’ is highlighted.
  4. In the left pane of the editor, click ‘Import’ under ‘Mozilla Format’.
  5. Paste one of the user styles below into the import window.
  6. Give the style a name and save it.
  7. The style should take effect.

Hide P&R from Categories view

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forum.quartertothree.com") {
  tr[data-category_id="10"] {
    display:none;
  }
}

Kinda-sorta ignore list

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forum.quartertothree.com") {
  /*
  To find a user's user-id, do this:
  
  Firefox:
  1. Right-click user's avatar in a thread.
  2. Select 'Inspect Element'.
  3. Look up to the <article> tag.
  4. Note the number in the data-user-id tag.
  5. Copy and paste the template below, using the user's user id.
  
  Chrome:
  1. Right-click user's avatar in a thread.
  2. Select 'Inspect'.
  3. Same procedure as above.
  
  Other browsers: not my problem.
  
  Styles the same way as the blurry spoilers, but doesn't do the
  on-click bit. You'll have to highlight the text if you want to
  see it, or alternately replace everything in the CSS block with
  'display: none;' without the quotes. */
  
  /*That jerk Fishbreath = 20906*/
  article.onscreen-post[data-user-id="20906"] div.cooked, article.onscreen-post[data-user-id="20906"] div.cooked pre, article.onscreen-post[data-user-id="20906"] div.cooked a, article.onscreen-post[data-user-id="20906"] div.cooked code, article.onscreen-post[data-user-id="20906"] div.cooked span {
    background-color: transparent !important;
    color: transparent !important;
    text-shadow: 0px 0px 10px gray !important;
  }
  
  /* Your list here */
}

Display first poster avatar

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forum.quartertothree.com") {
  td.posters a:nth-child(1) {
    display:inherit !important;
  }
}

Don’t display most recent poster avatar

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forum.quartertothree.com") {
  td.posters a:nth-child(5) {
    display:none !important;
  }
}

instant0’s theme template

@namespace url(http://www.w3.org/1999/xhtml);
/*
 Replace the colors with colors you think you'll like, or use this as-is.
*/

@-moz-document domain("forum.quartertothree.com") {
  .topic-body {
    background-color: #a08989
  }

  .topic-list th:first-of-type, .topic-list td:first-of-type {
      background-color: #d3d3d3;
  }

  .topic-list .posters {
      background-color: #d3d3d3;
  }

  .topic-list .topic-excerpt {
      margin-top: 8px;
      color: #f14a4a;
  }

  table.topic-list tr.topic-list-item {
      border-top: 2px solid #ccc;
      border-bottom: 2px solid #ccc;
      background: #fff 
  }

  .posts-wrapper {
    background-color: black;
  }

  .names span a {
      color: #002bff;
  }

  .onscreen-post {
    background-color: #d3d3d3;
  }

  .quote blockquote p {
      font-style: italic;
      background-color: #b6cdda;
      padding-left: 10px !important;
  }

  .quote .title {
      background-color: #E7F0F5 !important;
  }

  blockquote {
      border-left: none;
  }
}

My hat is off to you. This is much more elegant than the previous vbulletin ignore function. It’s basically replacing the offensive text with a soothing Charlie Brown “mwa mwa mwa-mwa mwa.” Delightful.

I been working a bit on CSS replacements using a Chrome plugin called “user CSS”. I guess it is pretty similar to Stylish.

So far it doesn’t look very pretty, as I just had a brief dabble at figuring out which areas I wanted to “tweak”. But it is a starting place if nothing else.

.topic-body {
  background-color: #a08989
}

.topic-list th:first-of-type, .topic-list td:first-of-type {
    background-color: #d3d3d3;
}

.topic-list .posters {
    background-color: #d3d3d3;
}

.topic-list .topic-excerpt {
    margin-top: 8px;
    color: #f14a4a;
}

table.topic-list tr.topic-list-item {
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    background: #fff 
}

.posts-wrapper {
  background-color: black;
}

.names span a {
    color: #002bff;
}

.onscreen-post {
  background-color: #d3d3d3;
}

.quote blockquote p {
    font-style: italic;
    background-color: #b6cdda;
    padding-left: 10px !important;
}

.quote .title {
    background-color: #E7F0F5 !important;
}

blockquote {
    border-left: none;
}

Here’s how it looks in action (note how ugly the colours I’ve picked are…)

<3 cut’n’paste directly into forum post.

I can’t get the ignore thing to work for me, I’ll beat my head against it some more later, but I don’t get what I’m missing.

@Fishbreath, @Clay,any chance either of you could run through a bit of a tutorial on how to get this stuff to work? Do you need Styish and are these global additions via that, or what? I ain’t got no clue when it comes to CSS…

I’ll put a quick guide in the first post in a little bit.

Are you using Chrome? Doesn’t seem to be working there for me, either. I’ll poke at it a little. Edit: aha! Instructions will be in the first post in a bit.

Woot, that did it. Thanks my good man, my sanity, what little remains of it may be saved.

Does Stylish impact browser performance at all? If so, is that impact only on sites you designate in your scripts (e.g. Qt3)?

It shouldn’t have an appreciable effect, and these ones only load at forum.quartertothree.com regardless.

Sharaloo, in a nutshell, every time a web page loads, it runs through a bunch of style rules such as what you see above. After that, the Stylish add-on/extension applies changes to the rendered web page based on whatever you’ve pasted into Stylish using examples such as the above. If you stick with the recommended template/format, you’ll see those changes everywhere on forum.quartertothree.com, in real time, but just for you because it’s living inside your web browser.

Just tried the Show OP script and it worked great, thanks very much!

I was using the B&W style: https://userstyles.org/styles/browse/quartertothree but the New and Unread lists now show up as white-on-white. It looks like the backgrounds of the lists aren’t set to black anymore. I tried poking around in the code but nothing I used made the background color change. Probably I just don’t know the right magic words to put in the style. Anyone know how to fix it?

I don’t know how to fix it but it might have happened due to Wumpus removing a small image that was used for row background and replacing it with a CSS gradient. Here’s the gradient code, in case that helps you fix the issue:

linear-gradient(to bottom, white 70%, #eee 95%);

Here’s a version that seems to work for me:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forum.quartertothree.com") {
  /* Nicer, slightly bigger base font */
  html {
    font-family:serif;
    font-size:1.1em;
    background-color:#000 !important;
    color:#fff !important;
  }
  /* Container for the Qt3 logo */
  header {
    background-color:#000 !important;
    background-color:#000 !important;
    border-bottom:1px solid #ccc;
  }
  body, #main {
    background-color:#000 !important;
    color:#fff;
  }
  /* Nav menu text */
  .nav-pills > li > a:link,.nav-pills > li > a:visited {
    color:#fff;
  }
  /* Subforum titles */
  h3.ember-view a:link, h3.ember-view a:visited, #topic-title h1 a:link, #topic-title h1 a:visited, .topic-list.categories a.title:link, .topic-list.categories a.title:visited {
    color:#fff !important;
  }
  h3.ember-view a:hover, #topic-title h1 a:hover, .topic-list.categories a.title:hover {
    color:#30659b;
    text-decoration:underline;
  }
  /* Categories, topics misc widgets */
  td.category, td.main-link, td.latest, td.stats, td.posts, td.posters, td.views, td.age {
    background-color:#000 !important;
    color: #fff !important;
  }
  a.badge-wrapper.bullet span.badge-category {
    color:#fff !important;
  }
  td.category .category-description {
    color:#fff !important;
  }
  .topic-list.categories .featured-topic i {
    color:#fff !important;
  }
  .onscreen-post {
    background-color:#000;
    color:#fff;
  }
  .topic-body {
    background-color:#000;
    color:#fff;
  }
  .topic-body a:link, .topic-body a:visited {
    color:#fff;
    text-decoration:underline;
  }
  .topic-body a:hover {
    color:#08c;
  }
  table.topic-list tr.topic-list-item {
    background-color:#000;
    color:#fff;
  }
  .topic-list a.title:link, .topic-list a.title:visited {
    color:#fff;
  }
  .topic-list a.title:hover {
    color:#08c;
    text-decoration:underline;
  }
  .actions button.widget-button, .actions button.widget-button.reply {
    background-color:#fff;
    color:#000;
    opacity:0.9 !important;
  }
  .topic-body blockquote {
    background-color: #000 !important;
    border: 1px solid #ccc;
    color: #fff !important;
  }
  .btn-primary {
    background-color:#fff !important;
    background-image:none;
    color:#000 !important;
  }
}

Thanks, that worked, although I had to futz with it a bit since I’m on Chrome rather than Firefox. Basically just a matter of removing the moz-document bit. For anyone else who has a similar issue, here it is:

@namespace url(http://www.w3.org/1999/xhtml);
/* Nicer, slightly bigger base font */
  html {
    font-family:serif;
    font-size:1.1em;
    background-color:#000 !important;
    color:#fff !important;
  }
  /* Container for the Qt3 logo */
  header {
    background-color:#000 !important;
    background-color:#000 !important;
    border-bottom:1px solid #ccc;
  }
  body, #main {
    background-color:#000 !important;
    color:#fff;
  }
  /* Nav menu text */
  .nav-pills > li > a:link,.nav-pills > li > a:visited {
    color:#fff;
  }
  /* Subforum titles */
  h3.ember-view a:link, h3.ember-view a:visited, #topic-title h1 a:link, #topic-title h1 a:visited, .topic-list.categories a.title:link, .topic-list.categories a.title:visited {
    color:#fff !important;
  }
  h3.ember-view a:hover, #topic-title h1 a:hover, .topic-list.categories a.title:hover {
    color:#30659b;
    text-decoration:underline;
  }
  /* Categories, topics misc widgets */
  td.category, td.main-link, td.latest, td.stats, td.posts, td.posters, td.views, td.age {
    background-color:#000 !important;
    color: #fff !important;
  }
  a.badge-wrapper.bullet span.badge-category {
    color:#fff !important;
  }
  td.category .category-description {
    color:#fff;
  }
  .topic-list.categories .featured-topic i {
    color:#fff !important;
  }
  .onscreen-post {
    background-color:#000;
    color:#fff;
  }
  .topic-body {
    background-color:#000;
    color:#fff;
  }
  .topic-body a:link, .topic-body a:visited {
    color:#fff;
    text-decoration:underline;
  }
  .topic-body a:hover {
    color:#08c;
  }
  table.topic-list tr.topic-list-item {
    background-color:#000;
    color:#fff;
  }
  .topic-list a.title:link, .topic-list a.title:visited {
    color:#fff;
  }
  .topic-list a.title:hover {
    color:#08c;
    text-decoration:underline;
  }
  .actions button.widget-button, .actions button.widget-button.reply {
    background-color:#fff;
    color:#000;
    opacity:0.9 !important;
  }
  .topic-body blockquote {
    background-color: #000 !important;
    border: 1px solid #ccc;
    color: #fff !important;
  }
  .btn-primary {
    background-color:#fff !important;
    background-image:none;
    color:#000 !important;
  }

Here’s my current effort for Stylish (Firefox), somewhat based on the old QT3 At Night theme. I’ve accommodated some of today’s changes, but I’m still tweaking stuff. And breaking stuff.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("forum.quartertothree.com") {
  html {
    font: 13px Verdana,Arial,Tahoma,Calibri,Geneva,sans-serif;
    font-family: Verdana,Arial,Tahoma,Calibri,Geneva,sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    font-feature-settings: normal;
    font-language-override: normal;
    font-kerning: auto;
    font-synthesis: weight style;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    color: #eeeeee;
  }
  /* Container for the Qt3 logo */
  header {
    background-color:#25292c !important;
    background-color:#25292c !important;
    border-bottom:1px solid #ccc;
  }
  body, #main {
  background: #111111 url(http://www.quartertothree.com/game-talk/cpstyles/darkvision/gradients/page_bg.gif) repeat-x;
    background-color: rgb(17, 17, 17);
    background-image: url("http://www.quartertothree.com/game-talk/cpstyles/darkvision/gradients/page_bg.gif");
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
  }
  /* Nav menu text */
  .nav-pills > li > a:link,.nav-pills > li > a:visited {
    color:#fff;
  }
  /* Subforum titles */
  h3.ember-view a:link, h3.ember-view a:visited, #topic-title h1 a:link, #topic-title h1 a:visited, .topic-list.categories a.title:link, .topic-list.categories a.title:visited {
    color:#fff !important;
  }
  h3.ember-view a:hover, #topic-title h1 a:hover, .topic-list.categories a.title:hover {
    color:#30659b;
    text-decoration:underline;
  }
  /* Categories, topics misc widgets */
  td.category, td.latest, td.stats {
    background-color:#25292c;
  }
  td.category .category-description {
    color:#fff;
  }
  .topic-list.categories .featured-topic i {
    color:#fff !important;
  }
  .badge-wrapper.bullet span.badge-category {
    color:#30659b !important;
  }
  .onscreen-post {
   // background-color:#000;
   background-color:#1b1b1b;
   color:#fff;
  }
  .topic-body {
   // background-color:#000;
   // color:#fff;
   background-color:#212224;
  }
  .topic-body  a:link, .topic-body a:visited {
    color: #eeeeee;
    text-decoration:underline;
  }
  .topic-body a:hover {
    color:#08c;
  }
  table.topic-list tr.topic-list-item {
    background-color:#25292c;
    color:#fff;
    background: linear-gradient(to bottom, #fff 70%, #eee 95%);
    background-color: transparent;
    background-image: linear-gradient(to bottom, #25292c, #25292c 95%);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
  }
  .topic-list a.title:link, .topic-list a.title:visited {
    color:#fff;
  }
  .topic-list a.title:hover {
    color:#08c;
    text-decoration:underline;
  }
  .actions button.widget-button, .actions button.widget-button.reply {
    background-color:#c8c8c8;
    color:#000;
    opacity:0.9 !important;
  }
  .topic-body blockquote  {
    background-color: #1b1b1b !important;
    border: 1px solid #ccc;
    color: #fff !important;
  }
  .btn-primary {
    background-color:#fff !important;
    background-image:none;
    color:#000 !important;
  }
  #reply-control{
   background-color:#212224;
  }
  a.mention {
   background-color:#212224;
  }
  .topic-map  {
    background-color: #c8c8c8;
  }
  aside.onebox header a[href]{
   color: #30659b;
  }
  .timeline-container .topic-timeline {
    background: #25292c;
    background-color: #1b1b1b;
    box-shadow: 0 0 0 0 #1b1b1b;
    //box-shadow: none;
  }
  aside.quote .title {
     color:#000;
     background-color: #c8c8c8;
     opacity:0.9;
   }
  .list-controls .category-dropdown-menu {
    //background-color: #c8c8c8
  }
}

I put together a user script that takes the users you have listed to mute in your profile and actually hides their posts, anyone interested?

You should use greasemonkey on firefox or tampermonkey on chrome to install user scripts.

Next feature, adding an option to ignore when you click the user card that adds them to your profile mute list. But I’ve only spent a little while on this so far and I’m out of time for now.

Edit: Made great progress, was ready to post new script but then realized that due to the way this SPA page works, I need to catch the url change and re-run some init steps rather than assuming I ever get a page load. Still working out the kinks and need to go to bed, so I withdrew it for now.

Hey there arrendek, I have a new install of Firefox (well, a new install of Windows, actually). Happy to test out your script if you think it’s ready for release.

B&W style author here, sorry for noticing these thread updates late, would be happy to update it with anything that’s been reviewed and tested by folks here. Wish there were a group access feature on userstyles.org. Should we think about setting up a git repo or something?

Considering that I threw it together on a whim and as a mere proof-of-concept an hour or so after I first saw the new site and was somewhat unfamiliar with Discourse design, color me surprised/pleased that people are using and adapting it. Lots of room for improvement, though. (On the B&W style, I mean.)

I’d also be open to contributing to any other styles or tweaks people might happen to want. I enjoy playing with CSS.

Thanks!

OK, user script well on its way and I went ahead and used github for the hosting. General info about “what is a user script?” is here: Userscript Beginners HOWTO · OpenUserJS/OpenUserJS.org Wiki · GitHub

Warning: Until I can ask for and receive a custom user field to store your theme preference, it is going to overwrite the Twitch Channel user preference. Don’t install it if you have a twitch channel you want to display. I’ll fix this later.

QuarterToThreeDiscourseForumHelper.user.js

Install instructions:
If you install TamperMonkey (Chrome), or GreaseMonkey (Firefox) and then click on the “Raw” button at that github page, it will ask you if you want to install the user script. Say yes, and you’re good to go.

What does this thing do? It gives you a user preference to change to Sam’s post #16 css without needing Stylish. It really actually mutes anyone on your mute list from your preferences page, and gives you a button on anyone’s user card to easily add them to your mute list.

I set up a quick DigitalOcean host for the css it needs to function, but if people want this I’ll be asking to host it somewhere more permanent later.