Work Weavers CSS Theme

I wrote a theme to give Myth-Weavers a more slightly work-save appearance.
  • Uses CSS
  • Loads one font from Google Fonts for a spiffy logo
  • Hides avatars
  • Hides images posted by users
  • Does NOT hide ads
  • Does NOT hide your visit from server logs.

To get going, look for the Stylus plugin available for Chrome or Firefox. Stylus, with a bright cyan S in a black box with a cyan border. (Avoid "Stylish" which has tracking built in. Gross.)

Add a new rules. Applies to [URLs on the domain][myth-weavers.com]

The title can be "Work Weavers" or anything you feel is appropriate.

Then paste this into the larger window.

Code:
@import url('https://fonts.googleapis.com/css?family=Righteous');

/* Default everything to a boring white page. Still in progress */
body,
#headerContainer,
#headerContainer *,
.page,
#headerContainer + div,
.tborder,
.tborder *,
.postbit,
.postbit *,
.tcat {
  background-image: initial !important;
  background-color: #fff;
  color: #000;
  box-shadow: initial;
}
ul#menu_bar li a, .tcat a {
  color: #34a;
}
.postControlsTop a {
  background-color: #ccc;
  color: #34a;
}
#headerContainer button.gsc-search-button.gsc-search-button-v2,
#headerContainer button.gsc-search-button.gsc-search-button-v2 svg {
    background-color: #005;
}/* Here ends defaulting everything to a boring white page */

/* Hide User Avatars */
.avatar {
  display: none !important;
}
/* Here ends the hiding of user avatars */

/* Now hide non-avatar images */
#posts .tborder tbody tr:not(:first-child) img,
.postContent img {
  display: none !important;
}
/* Here ends the hiding of non-avatar images */

/* Replace the MW logo with something less conspicious */
#logo img {
  display: none !important;
}
#logo::after {
  font-family: 'Righteous', sans-serif;
  content: "Work Weavers" !important;
  display: block;
  font-size: 32px;
  line-height: 1em;
  color: #005;
}
/* Here ends replacing the MW Logo */

/* Fancy up the notices */
.alt1 .navbar_notice {
  border: 1px solid #ddd;
  margin: 0 0 5px 0;
  padding: 5px;
}
/* Here ends fancying up the notices */

/* Replace the dragon with work safe verbiage  */
#menu_bar > li:first-child img {
  display: none !important;
}
#menu_bar > li:first-child > a:after {
  content: "Tasks";
}
/* End replacing the dragon with work safe verbiage  */

/* Replace the Games tab with work safe verbiage  */
#menu_bar > li:nth-child(5) a {
  font-size: 0.01px;
  letter-spacing: -0.01px;
  display: inline;
  padding: 0;
}
#menu_bar > li:nth-child(5) a:after {
  content: "Jobs";
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
/* Here ends replacing the Games tab with work safe verbiage  */

/* Add borders around menu dropdowns */
#menu_bar > li > ul {
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
}
#menu_bar > li > ul * {
  background-color: #f4f4f4;
}
/* End adding borders around menu dropdowns */  



ul.buttonbar, ul.buttonbar * {
  background-color: #fff !important;
}
.pagination, .pagination > * {
  border-color: #000 !important;
  color: #000;
}
.pagination span.current {
  background-color: #000 !important;
}

#posts > div {
  background-color: #eee !important;
}

#posts > div:nth-of-type(2n-1) .postbit,
#posts > div:nth-of-type(2n-1) .postHeader,
#posts > div:nth-of-type(2n-1) .bigusername,
#posts > div:nth-of-type(2n-1) .userMenu > div,
#posts > div:nth-of-type(2n-1) .inlineimg,
#posts > div:nth-of-type(2n-1) .postTime,
#posts > div:nth-of-type(2n-1) .postTime *,
#posts > div:nth-of-type(2n-1) .postContent,
#posts > div:nth-of-type(2n-1) .postContent *,
#posts > div:nth-of-type(2n-1) .postFooter,
#posts > div:nth-of-type(2n-1) .postFooter *{
  background-color: #f2f2f2 !important;
}

.eqchilds, .alt1, .qeqchilds * {
  background-color: #fff !important;
  background-image: none !important;
}
.selectlist,
.bigtitle.span-3{
  background: none !important;
}

.bigtitle + .span-2 {
  display: none;
}

.thead,
.selectlist li.selected {
  background-color: #aaa !important;
  background-image: none !important;
  color: #fff !important;
}
#headerContainer + div .page {
  border: 3px solid #eee;
}
What you'll be left with is a corporate-boring color scheme of black, white, gray, and some sort of deep blue that tells looks, possibly, like a poorly coded business-to-business web site. Avatars are gone. Images in posts are hidden away.

It will not survive more than a cursory glance. It will not hide ads or hide your activity from server logs.

It makes a few cosmetic changes. That's all.

I don't accept any blame if you get in trouble. There are a lot of ways to get in trouble surfing the web at work. Please be safe and smart. Please consider waiting until an appropriate time.

This just seemed entertaining to work on from a personal perspective. If I make any future edits then I'll likely reply and change this top post to reflect it.