Table of Contents

Subeta AdblockRemoves cash shop ads, external ads, and even the "remove this ad" message. Preserves user-made billboards. No browser extension needed!

Example Images

/* subeta adblock - Jan 2020 */
#aswift_1_anchor,
ins#aswift_0_anchor,
#page #content div center ins,
#ad_show,
.create_ad,
a[href^="/ad_click.php?"] img,
.chitikaAdContainer,
#content .new-news-announcement-banner + div > center > .adsbygoogle + script + a[href="https://subeta.net/cashshop.php?act=gold"],
#sidebar-inner-dash .ui.segment.basic[style="height: 200px;"],
#content + style + div[style="margin-top: 50px;"],
#content > div:nth-child(1) center > script + a[href="/cashshop.php?act=gold"],
#content div[style^="width:50%;background-color:#E0D3B8"] + div > center > script + a[href="/cashshop.php?act=gold"],
#content .floating_item + div > center > script + a[href="/cashshop.php?act=gold"],
#sidebar-inner-dash div[id*="_adbox_"],
#sidebar-inner-dash script + div[style="text-align: center; position: relative;"] + script + noscript + center,
center#random_events + br + br + div > center > a[href="/cashshop.php?act=gold"],
.ui.message.yellow + div > center > script + a[href="/cashshop.php?act=gold"],
.ui.message.green + div > center > script + a[href="/cashshop.php?act=gold"],
.new-news-announcement-banner + div > center > a[href="/cashshop.php?act=gold"],
.adsbygoogle,
#aswift_0_expand,
#content .new-news-announcement-banner + div > center > .adsbygoogle + script + a[href="https://subeta.net/cashshop.php?act=gold"],
#content > center:first-child > table:first-child + div.holiday.survival,
#content > center:first-child > table:first-child > tbody > tr > td > img[src^="//img.subeta.net/ads/"],
#content > div:not([class]) > center:first-child > .adsbygoogle ~ a[href="/cashshop.php?act=gold"] {
  display:none !important;
}

Mobile Navigation MenuMakes menu dropdowns openable so you can navigate on mobile. Clicking a menu title will open the dropdown instead of being a link. Only applies when you aren't using a mouse/trackpad, desktop experience will not change at all.

/* mobile navigation menu */
/* --device without good hover ability */
@media (hover: none) {
  /* --cancel clicks on menu titles */
  .menu-btn a.menu-tab {
    pointer-events:none !important;
  }
  /* --mark submenu links */
  .menu-btn ul li a[aria-haspopup=true] {
    text-decoration:underline;
  }
}

Remove Hustler BannerHides the banner that announces a new Cash Shop offering from the Hustler. And it won't come back!

/* remove hustler banner */
.hustler {
  display:none;
}

Space Optimized LayoutAdjusts the layout to work better on narrow windows or small screens. Removes bookmarks, postcards header, and stops the menu links from breaking into two lines.

Example Images

/* optimize site for small screens */
#header, footer, #postcards, .push, #rightbg, #bookmarks {
  display: none;
}
#menu-time {
  font-size: 13px;
  margin-top: 9px !important;
  margin-left: 5px !important;
  padding: 4px 0;
  height: auto;
  line-height: 1;
  letter-spacing: -1px;
  box-sizing: border-box;
  width: 90px;
}
#page {
  width: auto;
}
/* subeta adblock */
#aswift_1_anchor,
ins#aswift_0_anchor,
#page #content div center ins,
#ad_show,
.create_ad,
a[href^="/ad_click.php?"] img,
.chitikaAdContainer,
#content .new-news-announcement-banner + div > center > .adsbygoogle + script + a[href="https://subeta.net/cashshop.php?act=gold"],
#sidebar-inner-dash .ui.segment.basic[style="height: 200px;"],
#content + style + div[style="margin-top: 50px;"],
#content > div:nth-child(1) center > script + a[href="/cashshop.php?act=gold"],
#content div[style^="width:50%;background-color:#E0D3B8"] + div > center > script + a[href="/cashshop.php?act=gold"],
#content .floating_item + div > center > script + a[href="/cashshop.php?act=gold"],
#sidebar-inner-dash div[id*="_adbox_"],
#sidebar-inner-dash script + div[style="text-align: center; position: relative;"] + script + noscript + center,
center#random_events + br + br + div > center > a[href="/cashshop.php?act=gold"],
.ui.message.yellow + div > center > script + a[href="/cashshop.php?act=gold"],
.ui.message.green + div > center > script + a[href="/cashshop.php?act=gold"],
.new-news-announcement-banner + div > center > a[href="/cashshop.php?act=gold"],
.adsbygoogle,
#aswift_0_expand,
#content .new-news-announcement-banner + div > center > .adsbygoogle + script + a[href="https://subeta.net/cashshop.php?act=gold"] {
  display:none !important;
}
/* better toggle sidebar button */
#sidebar-toggle-button {
  margin: 0;
  background: none;
  width: auto;
  height: 36px;
  text-align: left;
  border: none;
  font-size: 0;
  color: transparent;
  transition: opacity 250ms ease-out 250ms;
  display: inline-block;
  top: 3px;
  padding-left: 5px;
  position: relative;
}
#sidebar-toggle-button::before {
  display: inline-block;
  content:'\21b9';
  font-size: 14px;
  color: #f7f1c0;
  line-height: 36px;
}
#sidebar-toggle-button:hover {
  background: none;
  box-shadow: none;
}
/* mobile navigation menu */
/* --device without good hover ability */
@media (hover: none) {
/* --cancel clicks on menu titles */
  .menu-btn a.menu-tab {
    pointer-events:none !important;
  }
}

Live Event NotificationsLive notifications (popups next to the sidebar) scroll down with you, the way it used to be.

/* fixed position live notifications */
#events-bubble-wrapper {
  position:fixed;
}

Subtle Toggle Sidebar ButtonReplaces the big toggle sidebar button with a neat little icon. Helps prevent menu links from breaking into two rows.

Example Images

/* better toggle sidebar button */
#sidebar-toggle-button {
  margin: 0;
  background: none;
  width: auto;
  height: 36px;
  text-align: left;
  border: none;
  font-size: 0;
  color: transparent;
  transition: opacity 250ms ease-out 250ms;
  display: inline-block;
  top: 3px;
  padding-left: 5px;
  position: relative;
}
#sidebar-toggle-button::before {
  display: inline-block;
  content: '\21b9';
  font-size: 14px;
  color: #f7f1c0;
  line-height: 36px;
}
#sidebar-toggle-button:hover {
  background: none;
  box-shadow: none;
}

Readable Site ClockIncreases font size and left aligns the site clock. Allows narrower window width before navigation breaks down.

Example Images

/* better looking clock without postcards */
#postcards {
  display:none;
}
#menu-time {
  font-size:13px;
  margin-top:9px !important;
  margin-left:5px !important;
  padding:4px 0;
  height:auto;
  line-height:1;
  letter-spacing:-1px;
  box-sizing:border-box;
  width:90px;
}

/* better looking clock with postcards */
#menu-time {
  font-size:13px;
  margin-top:9px !important;
  margin-left:158px !important;
  padding:4px 0;
  height:auto;
  line-height:1;
  letter-spacing:-1px;
  box-sizing:border-box;
  width:90px;
}

Animated Floating ItemsA fun new twist, makes floating items...well, float, why didn't we think of this sooner? items are NOT pinned to top-left as is tradition. The Y-axis is fixed (items always right at the top of page) but they will be randomly distributed across the X-axis.

/* animated floating items with random X position */
.floating_item {
    animation: floatingItems 3s ease-in-out alternate infinite;
    top: 154px !important;
    position:fixed !important;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid black;
}
@keyframes floatingItems {
    0% {box-shadow: 0 5px 10px 0px rgba(0,0,0,0.6); transform: translateY(0px);}
    100% {box-shadow: 0 25px 15px 0px rgba(0,0,0,0.3); transform: translateY(-20px);}
}

Floating ItemsPlaces floating items in the top-left corner for easy catching. Code like this has been around for years, but they always have garish borders. This just has a drop shadow.

/* floating items in top left corner */
.floating_item {
  position:fixed !important;
  left:20px !important;
  top:7px !important;
  z-index:999 !important;
  margin: 0px !important;
}
.floating_item img {
  box-shadow: 0 3px 6px 2px rgba(0,0,0,.5) !important;
}

Floating Item OverlayAdds colour to the received floating item page overlay. Customized popup menu.

Example Images

/* pretty floating item overlay */
#MB_window {
  top: 2em !important;
  left:50% !important;
  transform: translateX(-50%);
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  border-radius:3px !important;
  background:none !important;
  overflow:hidden !important;
}
#MB_overlay {
  background-color:#234d77 !important;
}
#MB_frame {
  background:#fff !important;
  border-radius:0 !important;
}
#MB_content {
  border:none !important;
  background:#fff !important;
}
#MB_header {
  background:#fff !important;
  border:none !important;
}
#MB_caption {
  text-shadow:none !important;
}
#MB_content br+br {
  display:none !important;
}

Expand Item Use MenusUndoes the new compact item page, showing all item options at once.

Example Images

/** expand item use menus **/
/*--open collapsed sections */
.card #collapseTreasure,
.card #collapseWeapon,
.card #collapseElixir,
.card #collapseMinion,
.card #collapseFood,
.card #collapseBook,
.card #collapseStat,
.card #collapseToy {
  display: block;
}
/*--reduce padding */
.card #collapseTreasure .card-body,
.card #collapseWeapon .card-body,
.card #collapseElixir .card-body,
.card #collapseMinion .card-body,
.card #collapseFood .card-body,
.card #collapseBook .card-body,
.card #collapseStat .card-body,
.card #collapseToy .card-body {
  padding-top: 0;
}
a[href="/inventory.php"]~.container .card.col-12.m-2>h3.card-title+p:empty {
  display: none;
}
/*--hide toggle button */
.card a[href="#collapseTreasure"],
.card a[href="#collapseWeapon"],
.card a[href="#collapseElixir"],
.card a[href="#collapseMinion"],
.card a[href="#collapseFood"],
.card a[href="#collapseBook"],
.card a[href="#collapseStat"],
.card a[href="#collapseToy"] {
  display: none;
}

Pet Roles: GourmandMakes feeding easier by marking your gourmand with an icon. Pair with Expand Item Use Menus for even more control.

/** Pet Roles: Gourmand **/
#collapseFood a[href$="petid=@petid;"]::before {
  content: "\1F37D";
}

Pet Roles: ReaderMakes reading easier by marking your bookworm with an icon. Pair with Expand Item Use Menus for even more control.

/** Pet Roles: Reader **/
#collapseBook a[href$="petid=@petid;"]::before {
  content: "\1F4D6";
}

Pet Roles: BattlerMakes stat boosting easier by marking your battle pet with an icon. Pair with Expand Item Use Menus for even more control.

/** Pet Roles: Battler **/
#collapseStat a[href$="petid=@petid;"]::before {
    content: "\2694";
}

Item Use OptionsPlaces the use option of an item before feed to, give to, etc.

Example Images

/* reorder item use options */
a[href='/inventory.php']+br+br+table.ui.table.border[style='width: 50%; border: 1px solid black'] tbody tr td.ui center {
  display:flex;
  flex-flow:column;
}
/* --use item */
a[href='/inventory.php']+br+br+table.ui.table.border[style='width: 50%; border: 1px solid black'] tbody tr td.ui center a[href^='?act=igiver&itemid='] {
  order: -1;
}
/* --use on pet */
a[href='/inventory.php']+br+br+table.ui.table.border[style='width: 50%; border: 1px solid black'] tbody tr td.ui center a[href*='&act=stat&petid='] {
  order: -1;
}
/* --custom use options */
a[href='/inventory.php']+br+br+table.ui.table.border[style='width: 50%; border: 1px solid black'] tbody tr td.ui center a[href*='?act=custom&itemid='] {
  order: -1;
}
a[href='/inventory.php']+br+br+table.ui.table.border[style='width: 50%; border: 1px solid black'] tbody tr td.ui center a+br {
  display:none;
}

Better Hustler BannerChanges banner colour for wishlist items so you instantly know if you need it.

Example Images

/* better hustler banner */
.hustler {
  overflow:hidden;
  border-bottom:none;
}
.hustler div {
  z-index:3;
}
.hustler div[style="width: 80px"]+div+div.text_center {
  z-index:1 !important;
}
.hustler .wl_item.wishlist {
  background:#B6DCF0;
  box-shadow:0 0 0 100vw #B6DCF0;
}
.hustler .wl_plus {
  top:21px;
}

Remove Page FooterRemoves social site links and images from page footer.

/* remove page footer */
footer {
  display:none;
}

/* no social links in page footer */
footer p a[href*="twitter.com/subeta"], footer p a[href*="facebook.com/subeta"], footer p a[href*="subeta.tumblr.com"] {
  display:none;
}

Bigger Item Hover TextIncreases font size of the popup when you hover over an item.

Example Images

/* bigger item hover text */
.item_hover_data {
  font-size: 1.2em !important;
  line-height: 1.5 !important;
}

Wishlist ItemsChanges the border appearance around wishlisted items.

/* change wishlist item borders */
.wishlist {
  border: 1px solid #00f;
}

Perfect BookmarksKeeps the appearance of bookmarks exactly the same on every page. Stops bookmarks from jumping down to different heights, sets even and consistent size, centering, and spacing.

/** perfect bookmarks **/
#bookmarks .bookmark {
  padding:0 !important;
  margin:0 0 8px 0 !important;
  border:none !important;
  padding:9px 5px !important;
}
.bookmark cufon {
  padding:0 !important;
}
.bookmark p {
  margin:0 !important;
}
/*--normal bookmarks */
#bookmarks {
  height: auto !important;
  background: none !important;
  width: 33px !important;
  margin: 0 !important;
  position: absolute !important;
  top: 144px !important;
  right: -33px !important;
  border-right:0 !important;
}
/*--bookmarks inside content*/
#content #bookmarks {
  top: 0;
  right: -33px !important;
}
/*--bookmarks not in page or content */
#page + #bookmarks, #page + div + #bookmarks {
  width: calc(6% - 20px) !important;
  right: 11px !important;
  height: auto !important;
  padding-right: 20px;
}

Overhaul All WidgetsMajorly improves the sidebar with changes to every widget, mainly for a more readable and uniform appearance.

Example Images

/** sidebar widget overhaul **/
/*--all widgets width */
.sidebar-widget{width: 165px;margin-left: 6px;}
/** simple avatar widget **/
.x-js-wardrobe{min-height: 250px;}.x-js-wardrobe .sidebar-widget-contents,.x-js-wardrobe{border: none;background: none;}.x-js-wardrobe .sidebar-widget-sep,.x-js-wardrobe .sidebar-widget-header{display: none;}
/** shoutbox widget: normal version **/
.shoutbox_shout{position: relative;margin: 0;border: 0 !important;line-height: 1.4;margin: 5px 3px;}
/*--submit button */
.x-js-widget-shoutbox textarea+p+.ui.icon.button{padding: .5em;margin-top: 5px;}#shoutbox{margin-bottom: 5px;}#shouts .shoutbox_shout:first-child{margin-top: 0;}#shoutbox textarea+p{display: none;}.shoutbox_user{border: 1px solid rgba(0, 0, 0, .3);border-left-width: 0;border-top-width: 0;font-weight: normal;border-radius: 4px;background: none;top: 0;left: 0;color: inherit !important;}.shoutbox_user a{font-size: 110%;color: inherit !important;}
/*--remove buttons */
#shoutbox_container a.small.awesome.default{display: none;}.shoutbox_options{margin-top: 0;}.shoutbox_options a{color: inherit;opacity: .5;padding: 2px 0 2px 2px;display: block;}.shoutbox_options a:hover{text-decoration: none;opacity: 1;}
/** notepad widget **/
.x-js-widget-notepad{position:fixed!important;bottom:0;top:unset!important;right:38px!important;right:calc(6% - 10px)!important;z-index:999!important;margin:0!important;border:none!important;width:120px!important;color:#000;}#x-notepad-content{text-align:center!important;}.x-js-widget-notepad .sidebar-widget-sep{display:none;}
/*--custom widget header */
.x-js-widget-notepad .sidebar-widget-header{font-size:0!important;color:transparent;padding:7px 0 7px 5px;border-radius:0 10px 10px 0;right:0;top:0;position:absolute;width:24px;-webkit-transform:translate(100%,calc(-100% - 7px));transform:translate(100%,calc(-100% - 7px));-webkit-box-shadow:0 -6px 6px -6px #dad2bf,6px 0 6px -6px #dad2bf,0 6px 6px -6px #dad2bf;box-shadow:0 -6px 6px -6px #dad2bf,6px 0 6px -6px #dad2bf,0 6px 6px -6px #dad2bf;border:1px solid #dad2bf;background-color:#9ba84e;-webkit-box-sizing:content-box;box-sizing:content-box;border-left:0;font-weight:400;opacity:1!important;}
/*--custom widget name */
.x-js-widget-notepad .sidebar-widget-header::after{content:"Notes";color:#EBF0EC;font-size:13px;display:inline-block;-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;font-family:"Istok Web",sans-serif;}
/*--remove toggle arrow */
.x-js-widget-notepad .sidebar-widget-arrow{background-image:none!important;}
/*--make whole header clickable */
.x-js-widget-notepad .sidebar-widget-header a{width:100%;height:100%;}
/*--content background color */
.x-js-widget-notepad .sidebar-widget-contents{background:#e9ebbf;border:none!important;border-radius:3px 3px 0 3px;max-height:calc(100vh - 4.5em);overflow:auto;}
/*--remove 'sCode is enabled' text */
#x-notepad{padding:6px 0!important;font-size:11px;-webkit-transition:height 200ms ease;transition:height 200ms ease;}
/*--style links */
#x-notepad-content a:not([onclick="change_notepad();"]){padding:0;}
/*--custom edit icon */
#x-notepad a[onclick="change_notepad();"]{display:inline-block;font-size:0;}#x-notepad a[onclick="change_notepad();"]::before{content:"\1F4DD";text-shadow:0 1px 1px #000;display:inline-block;font-size:14px;line-height:1.7;}
/*--floating edit mode textarea */
#x-notepad-textarea{font-family:monospace;font-size:13px;white-space:nowrap;line-height:1.7;border:1px solid #fff;margin:0;padding:8px;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:60%!important;height:40%!important;background:#fff;-webkit-box-shadow:0 0 0 100vw rgba(89,158,241,.4),0 0 5px 2px #599ef1;box-shadow:0 0 0 100vw rgba(89,158,241,.4),0 0 5px 2px #599ef1;z-index:-1;outline:none;border-radius:8px;}
/*--update button */
#x-notepad input{border-radius:3px;margin:.5em 0;display:inline-block;font-size:12px!important;border:none;outline:none;padding:.3em;background:none;background:#fff;-webkit-animation:notepad-pulse 1s ease-out infinite alternate;animation:notepad-pulse 1s ease-out infinite alternate;}
/*--update button animation */
@-webkit-keyframes notepad-pulse{0%{-webkit-box-shadow:0 0 2px 0 RGBA(89,158,241,0);box-shadow:0 0 2px 0 RGBA(89,158,241,0);}100%{-webkit-box-shadow:0 0 6px 3px RGBA(89,158,241,1);box-shadow:0 0 6px 3px RGBA(89,158,241,1);}}@keyframes notepad-pulse{0%{-webkit-box-shadow:0 0 2px 0 RGBA(89,158,241,0);box-shadow:0 0 2px 0 RGBA(89,158,241,0);}100%{-webkit-box-shadow:0 0 6px 3px RGBA(89,158,241,1);box-shadow:0 0 6px 3px RGBA(89,158,241,1);}}
/*--fix double linebreaks */
#x-notepad br{display:none;}#x-notepad br+br{display:initial;}
/* changes for sCode inserts */
/*--decorative hr tags */
#x-notepad-content hr{margin:.6rem 0!important;border:none;position:relative;box-sizing:border-box;background:#9ba84e;height:1px;}#x-notepad-content hr::before{content:"❖";display:block;font-size:11px;color:#9ba84e;text-align:center;position:absolute;top:0;width:100%;line-height:0;text-shadow:0 0 2px #e9ebbf,0 0 2px #e9ebbf,0 0 5px #e9ebbf,0 0 5px #e9ebbf,0 0 8px #e9ebbf,0 0 8px #e9ebbf;}
/*--center tags */
#x-notepad-content center a{display:block;}#x-notepad-content center{margin:3px 0;}
/*--lists */
#x-notepad-content ol,#x-notepad-content ul{margin:3px 0;padding:0 0 0 1.8em;text-align:left;}#x-notepad .wl_item{display:inline-block;}#x-notepad a.hover-user{display:inline-block;}
/*--spoilers */
#x-notepad .spoiler{padding:3px;}#x-notepad .spoiler-click{text-transform:none;color:inherit;}#x-notepad .spoiler_click{background:#dadc9f;padding:2px 0;position:relative;}#x-notepad .spoiler_click::before{display:block;content:"";background-image:url(https://img.subeta.net/layouts/default/images/down_arrow.png);width:13px;height:13px;position:absolute;top:2px;right:2px;}#x-notepad .spoiler_text{border:1px dashed #dadc9f;}#x-notepad .spoiler-click,.spoiler-text{padding:3px;}
/** active pet widget **/
/*--pet name */
.x-js-widget-activepet .sidebar-widget-contents{padding: 5px 0;font-weight: bold;}.x-js-widget-activepet br{display: none;}
/*--image table */
.x-js-widget-activepet table{text-align: center;width: 100%;}
/*--pet image */
.x-js-widget-activepet a[href^="/pet.php?petid="] img{margin: 0 0 5px !important;width: 125px !important;}
/*--cell links */
.x-js-widget-activepet table a{display: inline-block;}
/*--quicklink cells */
.x-js-widget-activepet td{padding: 0 !important;display: inline-block;width: 32px;margin-right: 4px;}.x-js-widget-activepet td:last-child{margin-right: 0;}
/*--quicklink images */
.x-js-widget-activepet table img{-webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0);box-shadow: 0 0px 1px rgba(0, 0, 0, 0);-webkit-transition: -webkit-box-shadow 200ms ease;transition: -webkit-box-shadow 200ms ease;transition: box-shadow 200ms ease;transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius: 2px;}.x-js-widget-activepet table img:hover{-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);box-shadow: 0 1px 1px rgba(0, 0, 0, .5);}
/** navigation widget **/
.x-js-nav .sidebar-widget-contents{line-height: 1.3;padding: 5px 4px;}.x-js-nav .sidebar-widget-contents ul{padding-top: 2px !important;}.x-js-nav .sidebar-widget-contents li{margin: 0 0 0 .5em !important;list-style-type: none;}.x-js-nav .sidebar-widget-contents h3:first-child{padding: 0 0 2px !important;}.x-js-nav .sidebar-widget-contents h3{font-size: 14px;margin: 0 !important;padding: 6px 0 2px !important;font-weight: 700;border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
/** forum topic subscriptions widget **/
.x-js-widget-forumsub .sidebar-widget-contents a:first-child{margin-top: 0 !important;}.x-js-widget-forumsub .sidebar-widget-contents{font-size: 0;padding: 5px 4px;line-height: 1.3;}.x-js-widget-forumsub br{display: none;}.x-js-widget-forumsub .sidebar-widget-contents a{margin-top: 7px;display: block;font-size: 14px;}
/** friend feed widget **/
.x-js-widget-feed .ui.small.feed{padding: 5px 4px;line-height: 1.3;margin: 0;font-size: 1em;}
/*--user icon */
.ui.feed .content .summary img{margin-right: 0;}
/*--usernames */
.x-js-widget-feed .hover-user{font-weight: bold;}.x-js-widget-feed .date{float: none !important;padding-left: .5em !important;}
/*--each event */
.x-js-widget-feed .ui.feed .event{padding: 0 0 9px;}.x-js-widget-feed .ui.feed .event:last-child{padding: 0;margin: 0;}
/*--undo bold status */
.x-js-widget-feed .summary b{font-weight: normal;}
/** user widget "subeta: yourname" **/
/*--hide redundant text */
.x-js-login .sidebar-widget-contents p:first-child{font-size: 0;}
/*--reset user name size */
.x-js-login .sidebar-widget-contents p:first-child a{font-size: 14px;font-weight: bold;}
/*--bold text */
.x-js-login .sidebar-widget-contents p{font-weight: bold;margin: 0 0 4px 0;}
/*--padding */
.x-js-login .sidebar-widget-contents{padding: 4px 4px 1px 4px;line-height: 1.2;}
/*--unbold links */
.x-js-login .sidebar-widget-contents a{font-weight: normal;}
/** shop profits widget **/
.x-js-widget-uProfit .sidebar-widget-contents{padding: 5px 4px;}.x-js-widget-uProfit td:last-child{padding-bottom: 3px;}.x-js-widget-uProfit td{display: block;width: unset;text-align: left;padding: 0;line-height: 1.3;}.x-js-widget-uProfit tr:last-child td:last-child{padding-bottom: 0;}.x-js-widget-uProfit tr td:last-child{padding-left: 10px;}
/** coda caves widget **/
.x-js-widget-codacave .sidebar-widget-contents{line-height: 1.2;padding: 5px 0;}.x-js-widget-codacave img{display: none;}.x-js-widget-codacave br{display: none;}
/** melody"s cottage widget **/
.x-js-widget-melody .sidebar-widget-contents{padding: 2px;}.x-js-widget-melody img,.x-js-widget-melody br{display: none;}.x-js-widget-melody .sidebar-widget-contents p{margin-bottom: 0;padding: 0;}
/** friends online widget **/
.x-js-friends .sidebar-widget-contents{padding: 5px 4px;}.x-js-friends .sidebar-widget-contents ul{padding: 0 !important;}.x-js-friends .sidebar-widget-contents li{padding: 0 0 5px 0 !important;line-height: 1.3 !important;}.x-js-friends a[href^="/users/"]{font-weight: bold;}.x-js-friends .sidebar-widget-contents ul li:last-child{padding-bottom: 0 !important;}
/** shop list widget **/
.x-js-widget-mainshop .sidebar-widget-contents a{display: block;line-height: 1.3;}.x-js-widget-mainshop .sidebar-widget-contents{padding: 4px;}.x-js-widget-mainshop .sidebar-widget-contents br{display: none;}
/** quests widget **/
/*--left align links */
.x-js-widget-quests a{float: left;}
/*--right align text */
.x-js-widget-quests .sidebar-widget-contents{text-align: right;padding: 5px 4px;line-height: 1.3;}
/** the oracle widget **/
.x-js-widget-oracle center{font-size: 0;line-height: 1;}
/*--custom text */
.x-js-widget-oracle .sidebar-widget-contents center::before{content: "Please bring me…";display: block;text-align: center;padding: 2px 0;font-size: 14px;line-height: 1.5;}.x-js-widget-oracle .sidebar-widget-contents center a,.x-js-widget-oracle .sidebar-widget-contents center b{font-size: 14px !important;}.x-js-widget-oracle .sidebar-widget-contents center b::before{font-weight: normal;content: "\00A0wants a\00A0";font-size: 14px !important;}
/** shop search and search subeta widgets **/
/*--remove widget chrome */
.x-js-widget-search .sidebar-widget-header,.x-js-widget-search .sidebar-widget-sep,.x-js-widget-search input[type="submit"],.x-js-widget-shopsearch .sidebar-widget-header,.x-js-widget-shopsearch .sidebar-widget-sep,.x-js-widget-shopsearch input[type="submit"]{display: none;}
/*--allow box shadow overflow */
.x-js-widget-search,.x-js-widget-search .sidebar-widget-contents,.x-js-widget-shopsearch,.x-js-widget-shopsearch .sidebar-widget-contents{background: none;border: none;overflow: visible !important;}
/*--explicit height */
.x-js-widget-search .sidebar-widget-contents,.x-js-widget-shopsearch .sidebar-widget-contents{height: 34px;}
/*--placeholder text */
.x-js-widget-search form,.x-js-widget-shopsearch form{position: relative;}.x-js-widget-search form::before, .x-js-widget-shopsearch form::before{position: absolute;height: 100%;width: 100%;line-height: 34px;left: 0;opacity: .5;color: #000;pointer-events: none;z-index: 1;}.x-js-widget-search form::before{content: "Search Subeta";}.x-js-widget-shopsearch form::before{content: "Shop Search";}
/*--focus state */
.x-js-widget-search input[type="text"]:focus,.x-js-widget-shopsearch input[type="text"]:focus{z-index: 2;color: #000;}
/*--search box */
.x-js-widget-search input[type="text"],.x-js-widget-shopsearch input[type="text"]{text-align: center;color: transparent;position: absolute;left: 0;outline: none;height: 34px;border-radius: 3px;border: 1px solid transparent;border-top: none;border-bottom: 1px solid #DDD;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .39), 0 -1px 1px #FFF, 0 1px 0 #FFF;box-shadow: inset 0 1px 2px rgba(0, 0, 0, .39), 0 -1px 1px #FFF, 0 1px 0 #FFF;width: calc(100% - 2px) !important;background: #fff;padding: 2px 4px;margin: 0 0 0 1px;}
/** my shops widget **/
.x-js-widget-uShopList .sidebar-widget-contents{padding: 5px 4px 2px;}.x-js-widget-uShopList td{padding: 0;line-height: 18px;padding-bottom: 3px;}.x-js-widget-uShopList table td[style="width:18px;"]{padding-right: 5px;}
/** special currencies widget **/
/*--divider spacing */
.x-js-currency .ui.dividing.header{padding: 0;margin: 6px 0 2px;font-size: 14px !important;}.x-js-currency .ui.dividing.header:first-child{margin: 0 0 2px;}
/*--container overflow */
.x-js-currency .sidebar-widget-contents{padding: 5px 4px;overflow: hidden;line-height: 1.3;}
/*--hide button */
.x-js-currency .widget-currency-hide{left: 0;right: unset !important;display: block !important;-webkit-transform: translateX(-1.5em);transform: translateX(-1.5em);}.x-js-currency i.icon{width: 1em;margin: 0;opacity: 1;background: rgba(255, 255, 255, .5);border-radius: 2px;}.x-js-currency .widget-currency-hide{padding: 0;}
/*--animations */
.x-js-currency .widget-currency-data,.x-js-currency .widget-currency-hide{-webkit-transition: -webkit-transform 250ms ease-out;transition: -webkit-transform 250ms ease-out;transition: transform 250ms ease-out;transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;}.x-js-currency .widget-currency-list:hover .widget-currency-hide{-webkit-transform: translateX(0);transform: translateX(0);}.x-js-currency .widget-currency-list:hover .widget-currency-data{-webkit-transform: translateX(1.3em);transform: translateX(1.3em);}
/*--reset widget button */
.x-js-currency #widget-currency-reset{margin: .5em 0 0;}.x-js-currency #widget-currency-reset a{font-size: 0;}.x-js-currency #widget-currency-reset a::before{content: "Show All";font-size: 14px;}
/** battle pet widget **/
/*--training status */
.x-js-widget-battlepet font font{padding: 0;margin: 0;}
/*--reset font sizes */
.x-js-widget-battlepet{font-size: 1em !important;}
/*--pet name */
.x-js-widget-battlepet center{font-weight: 700;}
/*--quicklink icons */
.x-js-widget-battlepet table[width="90%"]{display: none;}
/*--pet image */
.x-js-widget-battlepet img[src^="//img.subeta.net/pets/"]{width: 125px !important;margin: 0 !important;}
/*--pet image link */
.x-js-widget-battlepet a[href^="/pet.php?petid="]{text-decoration: none;display: inline-block;}
/*--time remaining */
.x-js-widget-battlepet font{display: inline-block;border-radius: 8px;padding: 2px 6px 1px;background: #fff;font-family: monospace;font-size: 1em !important;margin-top: .5em;font-weight: 400 !important;line-height: 1.5;}
/*--stats table */
.x-js-widget-battlepet td[width="100%"]{padding: 0 !important;}
/*--stats cells */
.x-js-widget-battlepet table[width="100%"] tr td[width="50%"]{line-height: 1.3;padding: 0 .1em;font-weight: 400 !important;font-size: 1em !important;}
/*--not in training message */
.x-js-widget-battlepet font font[style="color:red;"]{font-size: 0 !important;}.x-js-widget-battlepet font font[style="color:red;"]::before{font-size: 10px;content: "Not in a session.";color: #8b0000;}
/*--done training message */
.x-js-widget-battlepet font font[style="color:green;"]{font-size: 0 !important;}.x-js-widget-battlepet font font[style="color:green;"]::before{font-size: 10px;content: "Session is complete!";color: #008000;}.x-js-widget-battlepet .sidebar-widget-contents{padding: 5px 0;}
/** combo active battle pet widgets **/
/*--remove widget chrome when neighbours */
.x-js-widget-activepet+.x-js-widget-battlepet,.x-js-widget-activepet+.x-js-widget-battlepet .sidebar-widget-contents{margin-top: 0;border-top: 0;}.x-js-widget-activepet+.x-js-widget-battlepet .sidebar-widget-header,.x-js-widget-activepet+.x-js-widget-battlepet .sidebar-widget-sep{display: none !important;}
/*--reset font sizes */
.x-js-widget-activepet+.x-js-widget-battlepet center{font-size: 0;}.x-js-widget-activepet+.x-js-widget-battlepet table[width="100%"]{font-size: 1.4rem !important;}.x-js-widget-activepet+.x-js-widget-battlepet table[width="100%"] tr td[width="50%"]{font-size: .9em !important;}.x-js-widget-activepet+.x-js-widget-battlepet font{font-size: .75em !important;}
/*--only show stats */
.x-js-widget-activepet+.x-js-widget-battlepet img[src^="//img.subeta.net/pets/"]{display:none;}.x-js-widget-activepet+.x-js-widget-battlepet center br{display:none;}.x-js-widget-activepet+.x-js-widget-battlepet center{line-height:1;}.x-js-widget-activepet+.x-js-widget-battlepet table[width="100%"]{margin-top:5px;}

(Overhaul Addon) Notepad: Theme ColoursWelcome to Subeta is the default, picking one of these will override it. No other widgets have colour themes.

Example Images

/*--notepad widget theme: riverside valley */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#627788;
  -webkit-box-shadow:0 -6px 6px -6px #231a18,6px 0 6px -6px #231a18,0 6px 6px -6px #231a18;
  box-shadow:0 -6px 6px -6px #231a18,6px 0 6px -6px #231a18,0 6px 6px -6px #231a18;
  border-color:#231a18;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#9dbea8;
}
#x-notepad .spoiler_click {
  background:#bfd6bf;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/riverside/images/down_arrow.png);
}
#x-notepad .spoiler_text {
  border:1px dashed #bfd6be;
}
#x-notepad-content hr {
  background:#e1efd9;
}
#x-notepad-content hr::before {
  color:#e1efd9;
  text-shadow:0 0 2px #9dbea7,0 0 2px #9dbea7,0 0 5px #9dbea7,0 0 5px #9dbea7,0 0 8px #9dbea7,0 0 8px #9dbea7;
}

/*--notepad widget theme: delphi beach */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#37a3af;
  -webkit-box-shadow:0 -6px 6px -6px #d9fafd,6px 0 6px -6px #d9fafd,0 6px 6px -6px #d9fafd;
  box-shadow:0 -6px 6px -6px #d9fafd,6px 0 6px -6px #d9fafd,0 6px 6px -6px #d9fafd;
  border-color:#d9fafd;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#f4e2c0;
}
#x-notepad .spoiler_click {
  background:#d1d2ba;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/delphi/images/down_arrow.png);
}
#x-notepad .spoiler_text {
  border:1px dashed #d1d2ba;
}
#x-notepad-content hr {
  background:#35a2b0;
}
#x-notepad-content hr::before {
  color:#35a2b0;
  text-shadow:0 0 2px #f4e2c0,0 0 2px #f4e2c0,0 0 5px #f4e2c0,0 0 5px #f4e2c0,0 0 8px #f4e2c0,0 0 8px #f4e2c0;
}

/*--notepad widget theme: shadowglen graveyard */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#394933;
  -webkit-box-shadow:0 -6px 6px -6px #1d1e26,6px 0 6px -6px #1d1e26,0 6px 6px -6px #1d1e26;
  box-shadow:0 -6px 6px -6px #1d1e26,6px 0 6px -6px #1d1e26,0 6px 6px -6px #1d1e26;
  border-color:#1d1e26;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#e4e4e4;
}
#x-notepad .spoiler_click {
  background:#c4bdbf;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/shadowglen/images/down_arrow.png);
}
#x-notepad .spoiler_text {
  border:1px dashed #c4bdbf;
}
#x-notepad-content hr {
  background:#394933;
}
#x-notepad-content hr::before {
  color:#394933;
  text-shadow:0 0 2px #e4e4e4,0 0 2px #e4e4e4,0 0 5px #e4e4e4,0 0 5px #e4e4e4,0 0 8px #e4e4e4,0 0 8px #e4e4e4;
}

/*--notepad widget theme: masquerade */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#3A8178;
  -webkit-box-shadow:0 -6px 6px -6px #0f212c,6px 0 6px -6px #0f212c,0 6px 6px -6px #0f212c;
  box-shadow:0 -6px 6px -6px #0f212c,6px 0 6px -6px #0f212c,0 6px 6px -6px #0f212c;
  border-color:#0f212c;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#dec8a0;
}
#x-notepad .spoiler_click {
  background:#fae4b9;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/masquerade/images/down_arrow.png);
}
#x-notepad .spoiler_text {
  border:1px dashed #fae4b9;
}
#x-notepad-content hr {
  background:#3A8178;
}
#x-notepad-content hr::before {
  color:#3A8178;
  text-shadow:0 0 2px #dec8a0,0 0 2px #dec8a0,0 0 5px #dec8a0,0 0 5px #dec8a0,0 0 8px #dec8a0,0 0 8px #dec8a0;
}

/*--notepad widget theme: arctic frost */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#90b6cd;
  -webkit-box-shadow:0 -6px 6px -6px #bed6e4,6px 0 6px -6px #bed6e4,0 6px 6px -6px #bed6e4;
  box-shadow:0 -6px 6px -6px #bed6e4,6px 0 6px -6px #bed6e4,0 6px 6px -6px #bed6e4;
  border-color:#bed6e4;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#deeff7;
}
#x-notepad .spoiler_click {
  background:#cbe0ed;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/arctic/images/down_arrow.png);
}
#x-notepad .spoiler_text {
  border:1px dashed #bed6e4;
}
#x-notepad-content hr {
  background:#90b6cd;
}
#x-notepad-content hr::before {
  color:#90b6cd;
  text-shadow:0 0 2px #deeff7,0 0 2px #deeff7,0 0 5px #deeff7,0 0 5px #deeff7,0 0 8px #deeff7,0 0 8px #deeff7;
}

/*--notepad widget theme: darkside */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#642139;
  -webkit-box-shadow:0 -6px 6px -6px #280c18,6px 0 6px -6px #280c18,0 6px 6px -6px #280c18;
  box-shadow:0 -6px 6px -6px #280c18,6px 0 6px -6px #280c18,0 6px 6px -6px #280c18;
  border-color:#280c18;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#c093a1;
}
#x-notepad .spoiler_click {
  background:#b07889;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/darkside/images/down_arrow.png);
}
#x-notepad .spoiler_text {
  border:1px dashed #b07889;
}
#x-notepad-content hr {
  background:#642139;
}
#x-notepad-content hr::before {
  color:#642139;
  text-shadow:0 0 2px #c093a1,0 0 2px #c093a1,0 0 5px #c093a1,0 0 5px #c093a1,0 0 8px #c093a1,0 0 8px #c093a1;
}

/*--notepad widget theme: morostide */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#6f422c;
  -webkit-box-shadow:0 -6px 6px -6px #b58254,6px 0 6px -6px #b58254,0 6px 6px -6px #b58254;
  box-shadow:0 -6px 6px -6px #b582548,6px 0 6px -6px #b58254,0 6px 6px -6px #b58254;
  border-color:#b58254;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#e4d4b8;
}
#x-notepad .spoiler_click {
  background:#ceaf78;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/morostide/images/down_arrow.png);
  background-repeat:no-repeat; /* morostide fix */
  margin:2px 0 0 2px; /* morostide fix */
}
#x-notepad .spoiler_text {
  border:1px dashed #ceaf78;
}
#x-notepad-content hr {
  background:#aa6138;
}
#x-notepad-content hr::before {
  color:#aa6138;
  text-shadow:0 0 2px #e4d4b8,0 0 2px #e4d4b8,0 0 5px #e4d4b8,0 0 5px #e4d4b8,0 0 8px #e4d4b8,0 0 8px #e4d4b8;
}
.sidebar-widget.x-js-widget-notepad {
  background:none !important; /* morostide fix */
}

/*--notepad widget theme: autumn */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#b0481c;
  -webkit-box-shadow:0 -6px 6px -6px #cd6037,6px 0 6px -6px #cd6037,0 6px 6px -6px #cd6037;
  box-shadow:0 -6px 6px -6px #cd6037,6px 0 6px -6px #cd6037,0 6px 6px -6px #cd6037;
  border-color:#231a18;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#f1c597;
}
#x-notepad .spoiler_click {
  background:#e79d50;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/autumn/images/down_arrow.png);
}
#x-notepad .spoiler_text {
  border:1px dashed #e79d50;
}
#x-notepad-content hr {
  background:#9d622d;
}
#x-notepad-content hr::before {
  color:#9d622d;
  text-shadow:0 0 2px #f1c597,0 0 2px #f1c597,0 0 5px #f1c597,0 0 5px #f1c597,0 0 8px #f1c597,0 0 8px #f1c597;
}
.sidebar-widget.x-js-widget-notepad {
  background:none !important; /* autumn fix */
}

/*--notepad widget theme: luminaire */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#82514c;
  -webkit-box-shadow:0 -6px 6px -6px #dac6b5,6px 0 6px -6px #dac6b5,0 6px 6px -6px #dac6b5;
  box-shadow:0 -6px 6px -6px #dac6b5,6px 0 6px -6px #dac6b5,0 6px 6px -6px #dac6b5;
  border-color:#280c18;
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#ebdcc7;
}
#x-notepad .spoiler_click {
  background:#d0bca7;
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/luminaire/images/down_arrow.png);
  background-repeat:no-repeat; /* luminaire fix */
  margin:2px 0 0 2px; /* luminaire fix */
}
#x-notepad .spoiler_text {
  border:1px dashed #d0bca7;
}
#x-notepad-content hr {
  background:#848675;
}
#x-notepad-content hr::before {
  color:#848675;
  text-shadow:0 0 2px #ebdcc7,0 0 2px #ebdcc7,0 0 5px #ebdcc7,0 0 5px #ebdcc7,0 0 8px #ebdcc7,0 0 8px #ebdcc7;
}
.sidebar-widget.x-js-widget-notepad {
  background:none !important; /* luminaire fix */
}

/*--notepad widget theme: shengui guo */
.x-js-widget-notepad .sidebar-widget-header {
  background-color:#7f2841 !important; /* shengui guo fix */
  -webkit-box-shadow:0 -6px 6px -6px #270c19,6px 0 6px -6px #270c19,0 6px 6px -6px #270c19;
  box-shadow:0 -6px 6px -6px #270c19,6px 0 6px -6px #270c19,0 6px 6px -6px #270c19;
  border:1px solid #270c19 !important; /* shengui guo fix */
  border-left:none !important; /* shengui guo fix */
}
.x-js-widget-notepad .sidebar-widget-contents {
  background:#1c1c1c !important; /* shengui guo fix */
}
#x-notepad .spoiler_click {
  background:#2f2f2f !important; /* shengui guo fix */
}
#x-notepad .spoiler_click::before {
  background-image:url(https://img.subeta.net/layouts/darkside/images/down_arrow.png);
}
#x-notepad .spoiler_text {
  border:1px dashed #bed6e4;
}
#x-notepad-content hr {
  background:#BB9142;
}
#x-notepad-content hr::before {
  color:#BB9142;
  text-shadow:0 0 2px #1c1c1c,0 0 2px #1c1c1c,0 0 5px #1c1c1c,0 0 5px #1c1c1c,0 0 8px #1c1c1c,0 0 8px #1c1c1c;
}
.x-js-widget-notepad .sidebar-widget-arrow::before {
  content:none; /* shengui guo fix */
}
.x-js-widget-notepad .sidebar-widget-header::after {
  color:#BB9142; /* shengui guo fix */
}
.x-js-widget-notepad {
  color:#D4D4D4; /* shengui guo fix */
}

(Overhaul Addon) Battle Pet Widget: Only Show StatsTakes away the pet image and only leaves the stats.

/** battle pet optional: only show stats **/
.x-js-widget-battlepet img[src^="//img.subeta.net/pets/"] {
  display:none;
}
.x-js-widget-battlepet center br {
  display:none;
}
.x-js-widget-battlepet center {
  line-height:1;
}
.x-js-widget-battlepet table[width="100%"] {
  margin-top:5px;
}

(Overhaul Addon) Shoutbox Widget: Overlay VersionMakes the shoutbox more readable, less garish, more reliable text color contrast.

/** shoutbox widget: overlay version **/
.shoutbox_shout {
  color: #111 !important;
  position: relative;
  margin: 0;
  border: 0 !important;
  line-height: 1.4;
  margin: 5px 3px;
  z-index: 1;
}
/*--submit button */
.x-js-widget-shoutbox textarea + p + .ui.icon.button {
  padding: .5em;
  margin-top: 5px;
}
#shoutbox {
  margin-bottom: 5px;
}
#shouts .shoutbox_shout:first-child {
  margin-top: 0;
}
#shoutbox textarea + p {
  display: none;
}
/*--transparent shout overlay, thanks Bug */
.shoutbox_shout:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.68);
  position: absolute;
  right: 0;
  top: 0px;
  left: 0;
  bottom: 0;
  z-index: -3;
  border-radius: 4px;
}
.shoutbox_user {
  border: 1px solid rgba(0, 0, 0, .3);
  border-left-width: 0;
  border-top-width: 0;
  font-weight: normal;
  border-radius: 4px;
  background: none;
  top: 0;
  left: 0;
  color: #111 !important;
}
.shoutbox_user a {
  color: #111 !important;
  font-size: 110%;
}
/* --remove buttons */
#shoutbox_container a.small.awesome.default {
  display: none;
}
.shoutbox_options {
  margin-top: 0;
}
.shoutbox_options a {
  color: rgba(0, 0, 0, .4) !important;
  padding: 2px 0 2px 2px;
  display: block;
}
.shoutbox_options a:hover {
  text-decoration: none;
}

(Overhaul Addon) Shoutbox Widget: Floating ModeRemoves the border and background from the shoubox so it can float freely in your sidebar.

/** shoutbox optional: floating mode **/
.x-js-widget-shoutbox,
.x-js-widget-shoutbox .sidebar-widget-header,
.x-js-widget-shoutbox .sidebar-widget-contents {
  background: none;
  border: none;
}
.x-js-widget-shoutbox .sidebar-widget-sep {
  display: none;
}
.shoutbox_shout {
  margin: 5px 0px !important;
}

(Overhaul Addon) Shoutbox Widget: Fun ColoursColours the comment user icons. Brings some variety back to the shoutbox when using 'Shoutbox: Overlay Version'.

/** shoutbox optional: fun icons **/
.shoutbox_options a {
  color: #222 !important;
  mix-blend-mode: color-burn;
  opacity: 1 !important;
}

(Overhaul Addon) Shop List Widget: Mark FavouritesLets you quickly identify favourite shops for restocking.

/** shop list optional **/
/*--favourite shops */
.x-js-widget-mainshop a[href="/shop.php?shopid=99"],
.x-js-widget-mainshop a[href="/shop.php?shopid=100"] {
  font-weight: 600;
}
/*--hidden shops */
.x-js-widget-mainshop a[href="/shop.php?shopid=101"] {
  display: none !important;
}

(Overhaul Addon) Subscriptions Widget: Custom IconsLets you add an icon/marker before each subscribed thread name for easier scanning.

/** forum topic subscriptions optional: custom bulleted list **/
.x-js-widget-forumsub .sidebar-widget-contents a::before {
  content: "\1F4C3\00A0";
  display: inline-block;
}

(Overhaul Addon) My Shops Widget: Custom IconsLets you replace the default shop/gallery icons.

/** my shops optional: custom icons **/
.x-js-widget-uShopList img[src="//img.subeta.net/shop_norm.gif"],
.x-js-widget-uShopList img[src="//img.subeta.net/shop_gall.gif"] {
  width: 0;
  height: 0;
  padding: 18px 18px 0 0;
}
/*--custom icon for shops */
.x-js-widget-uShopList img[src="//img.subeta.net/shop_norm.gif"] {
  background: url(@shop-icon;) 0 0/18px 18px;
}
/*--custom icon for galleries */
.x-js-widget-uShopList img[src="//img.subeta.net/shop_gall.gif"] {
  background: url(@gallery-icon;) 0 0/18px 18px;
}

(Overhaul Addon) Active Pet Widget: Custom IconsLets you set custom images for the pet minion, treasure etc.

/** active pet optional: custom icons **/
.x-js-widget-activepet a[href^="/pet.php?petid="] + br + br + table td a img {
  width: 0;
  height: 0;
  padding: 32px 32px 0 0;
  background-size: 32px 32px;
}
/*--pet description */
.x-js-widget-activepet a[href="/pet.php?petid=@active-petid;"] + br + br + table td:nth-child(1) a img {
  background-image: url(http://img.subeta.net/items/book_dreamjournal.gif);
}
/*--battle equipment */
.x-js-widget-activepet a[href="/pet.php?petid=@active-petid;"] + br + br + table td:nth-child(2) a img {
  background-image: url(http://img.subeta.net/items/loot_meatslab_baal.gif);
}
/*--treasure chest */
.x-js-widget-activepet a[href="/pet.php?petid=@active-petid;"] + br + br + table td:nth-child(3) a img {
  background-image: url(http://img.subeta.net/items/treasurechest.gif);
}
/*--minion */
.x-js-widget-activepet a[href="/pet.php?petid=@active-petid;"] + br + br + table td:nth-child(4) a img {
  background-image: url(https://img.subeta.net/items/minion_dog.gif);
}

Dual SidebarsFor wide/full-screen users. Enables always-visible sidebars, dashboard on the left, events on the right. Only active above 1250px window width by default.

Example Images

/** dual sidebars **/
@media (min-width: 1250px) {
  #sidebar {
    float: none;
    overflow: initial;
    z-index: initial;
    width: unset;
    top: 0;
    padding: 0;
    position: relative;
  }
  #sidebar-inner {
    width: unset;
    padding: unset;
    background: none;
    border-right: none;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    display: block !important;
    width: 176px;
    padding-top: 37px;
    background: url(https://img.subeta.net/layouts/default/images/left_widgt_bg.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/default/images/left_bg.jpg) repeat-y;
  }
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    float: left;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    float: right;
    max-height: 3000px;
    overflow: auto;
    border-bottom: 1px solid #231e17;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    position: absolute;
    right: 0;
    background-position: 0 26px !important;
    border-right: 1px solid #a3aa53;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    position: absolute;
    margin: 0;
    border-left: 1px solid #231e17;
    background-position: -2px 26px !important;
  }
  #sidebar-inner-events .sidebar-widget:last-child {
    margin-bottom: 5px;
  }
  #sidebar-top {
    height: 0;
  }
  #events-counter-wrapper {
    left: calc(100% - 170px);
    top: 3px;
    height: 20px;
    line-height: 18px;
    right: unset;
  }
}

(Dual Sidebars Addon) Theme ColoursWelcome to Subeta is the default, picking one of these will override it.

/*--dual sidebars theme: riverside valley */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/riverside/images/left_widgt_bg.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/riverside/images/left_bg.jpg) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #1c221a;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #6a915a;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #1c221a;
  }
}

/*--dual sidebars theme: delphi beach */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/delphi/images/left_widgt_bg.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/delphi/images/left_bg.jpg) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #241e1c;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #d3c09f;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #241e1c;
  }
}

/*--dual sidebars theme: shadowglen graveyard */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/shadowglen/images/left_widgt_bg.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/shadowglen/images/left_bg.jpg) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #1d1d1d;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #acacac;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #1d1d1d;
  }
}

/*--dual sidebars theme: masquerade */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/masquerade/images/left_widgt_bg.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/masquerade/images/left_bg.jpg) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #271c19;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #ac9e87;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #271c19;
  }
}

/*--dual sidebars theme: arctic frost */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/arctic/images/left_widget_bg.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/arctic/images/left_bg.jpg) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #1d1f1f;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #7eaac3;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #1d1f1f;
  }
}

/*--dual sidebars theme: darkside */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/darkside/images/left_widget_bg.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/darkside/images/left_bg.jpg) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #260e10;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #420d1d;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #260e10;
  }
}

/*--dual sidebars theme: morostide */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/morostide/images/sidebar.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/morostide/images/left_bg.png) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #261815;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #c27639;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #261815;
  }
  /* morostide only fix */
  #main-content {
    background-position: top left !important;
    background-repeat: repeat-y !important;
  }
}

/*--dual sidebars theme: autumn */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/autumn/images/left_widget_bg.jpg) no-repeat 0 26px, url(https://img.subeta.net/layouts/autumn/images/left_bg.jpg) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #291914;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #733516;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #291914;
  }
}

/*--dual sidebars theme: luminaire */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: url(https://img.subeta.net/layouts/luminaire/images/sidebar.png) no-repeat 0 26px, url(https://img.subeta.net/layouts/luminaire/images/left_bg.png) repeat-y;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #846b75;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: 1px solid #846b75;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: 1px solid #614a41;
  }
}

/*--dual sidebars theme: shengui guo */
@media (min-width: 1250px) {
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active,
  #sidebar-inner-dash,
  #sidebar-inner-dash.sidebar-inner-active {
    background: none;
  }
  #sidebar-inner-dash {
    border-right: 1px solid #000;
  }
  #sidebar-inner-events,
  #sidebar-inner-events.sidebar-inner-active {
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
  }
  #sidebar-btn-events,
  #sidebar-btn-events.sidebar-btn-active {
    border-right: none !important;
    left: unset !important;
    background-color: #1b1b1b;
    border-color: #000 !important;
  }
  #sidebar-btn-dash,
  #sidebar-btn-dash.sidebar-btn-active {
    border-left: none;
    top: 4px;
    left: 0px;
    border-left-width: 0 !important;
    width: 86px;
    background-color: #1b1b1b;
    border-color: #000 !important;
  }
  #sidebar-top {
    border-bottom: none;
  }
  #sidebar {
    border-right: 0;
  }
  #sidebar-btn-dash::before,
  #sidebar-btn-events::after {
    content: "";
    display: block;
    background: #000;
    height: 1px;
    width: 176px;
    position: relative;
    top: 20px;
  }
  #sidebar-btn-dash::before {
    top: 20px;
  }
  #sidebar-btn-events::after {
    bottom: 1px;
    right: 89px
  }
}

Sticky ShoutboxFor avid shoutbox users. Enables a dedicated, always-visible, shoutbox sidebar. Only active above 1250px window width by default.

Example Images

/** sticky shoutbox **/
@media (min-width: 1250px) {
  #sidebar {
    width: 360px;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: auto;
  }
  #sidebar-top {
    width: 176px;
  }
  .x-js-widget-shoutbox {
    height: 0;
    overflow: visible;
    position: sticky;
    top: 0;
    border: none;
  }
  .x-js-widget-shoutbox .sidebar-widget-sep {
    display: none;
  }
  .x-js-widget-shoutbox .sidebar-widget-header {
    position: absolute;
    width: 170px;
    left: 173px;
    top: 3px;
    box-shadow: 0 0 0 1px #6c5a4c;
  }
  .x-js-widget-shoutbox .sidebar-widget-contents {
    position: absolute;
    width: 171px;
    left: 173px;
    margin-top: 2em;
  }
}

Better Sidebar EventsMakes events easier to delete, and removes the unclickable space between multiline links. Right-aligns the remove event icon.

/* better sidebar events */
#sidebar-inner-events .event-sep {
  width: 90%;
  margin: 2px auto;
}
.sidebar-widget {
  width: 163px;
}
.sidebar-event {
  position:relative;
}
.sidebar-event i {
  position: absolute;
  right: 0px;
  top: 2px;
  margin: 0;
  cursor: pointer;
  height: 1.3em;
  width: 1.3em;
  padding-top: 2px;
}
.sidebar-event small {
  width: 100%;
  padding: 1px 14px 2px 3px;
  overflow:hidden;
  line-height:1.5;
  display:block;
}
.sidebar-event small a {
  padding-bottom: 0.4em;
}
.sidebar-event small {
  font-size:89%;
}

Group Mention EventsHighlights Forum Group names in sidebar events. Makes it easier to focus on activity in important forum groups, and quickly scroll through built-up events.

Example Images

/* highlight group name in ping events */
#sidebar-inner-events .sidebar-widget-contents small a[href^="/forums.php/gotopost/"] + a[href^="/forums.php/groups/#/group/"] {
    font-weight: 700;
}

Disable Mobile Widget DraggingPrevents accidental widget rearranging on mobile devices only. Can still use the toggle arrow to close widgets.

/** disable mobile widget dragging **/
/*--detect mobile device */
@media (max-device-width:720px) {
  /*--block widget dragging */
  .sidebar-widget-header {
    pointer-events: none;
  }
  /*--allow widget closing */
  .sidebar-widget-header .sidebar-widget-arrow {
    pointer-events: auto;
  }
}

Bigger End Battle ButtonThat's all it does. End battle button is the same size as the make your turn button.

/* bigger end battle button */
#battleSubmit #battle-ui-main .endBattle a.end-game-btn {
  width: 80%;
}

Training Pet ImagesRemoves pet images from training page, reduces scrolling for users with many pets.

/* hide pet images on training page */
.container-fluid div.row.w-100 > div.col-3.p-3 > center > img[src^='//img.subeta.net/pets/'], .container-fluid div.row.w-100 > div.col-3.p-3 > center > img[src^='//img.subeta.net/pets/'] + br {
  display:none;
}

No AutotrainingRemoves autotraining buttons from training page. Also removes the autotraining price and stats text. Recommended, unless you actually autotrain.

/* hide autotrain */
input.btn[name="train_normal"] + input.btn[name="train_auto"],
input.btn[name="train_auto"] +br + small {
  display: none;
}

Selective Stat TrainingRemoves a stat training option of your choice, from a pet of your choice. Great for high-tier battlers.

/* remove stat training option for specified pet */
form > input + input[value="PETID"] + select[name="stat"] option[value="STATID"] {
  display:none !important;
}

Ping All Friends CheckboxRemoves options to ping all friends on new forum posts.

/* remove ping friends options on forum posts */
label[for="ping_friends"], input#ping_friends, label[for="ping_favorites"], input#ping_favorites {
  display:none !important;
}

Hide Human AvatarsReduces page height, for minimum scrolling. Also removes the heart avatar feature, since there's nothing to heart!

/* remove human avatars on forums */
.posts .user.details img.forum-avatar {
  display:none;
}
.posts .stats > div:nth-child(1) {
  display:none;
}

Hide forum imagesForum images are what's on the right side of posts.

/* remove forum-images */
.forum-image, .forum-image-tb {
  display:none;
}

Hide all signaturesMuch easier to browse forums without the visual noise and extra scrolling.

/* completely remove signatures */
.forum_signature, .thirteen.wide.column.post-body .ui.divider {
  display:none;
}

Remove Animated SignaturesNo more annoying and distracting animations.

/* removes animated .gifs from signatures */
.forum_signature img[src$="gif"] {
  display:none;
}
.forum_signature img[src*="subeta.net"] {
  display:initial;
}

Text Only SignaturesRemoves all images from signatures. Allows for easier browsing without completely removing signatures.

/* text-only signatures, removes images. */
.forum_signature img {
  display:none;
}
.forum_signature img[src*="subeta.net"] {
  display:initial;
}

Hide Leashed PetsRemoves leashed pets from forum posts. No more scrolling past long pet descriptions.

/* remove leashed pets */
.user.details .stats + div {
  display:none !important;
}

Recent Topics Horizontal OverflowStops the Recent Topics page from overflowing if you post a really long link. This is how it works in the forums, but the recent topics page doesn't want to follow the rules.

Example Images

/* stop recent topics horizontal overflow */
h1 + .ui.very.padded.celled.table.segment tr > td.max-image {
  word-break: break-word;
}

Forum Signature ExampleMakes the current forum signature preview (in dashboard preferences) actually match your positioning.

/* current forum signature example */
.prefscontent #sigtest {
  float:none !important;
}

Divine Discs Repositions the colours, and reset button, for less mouse movement when playing.

Example Images

/** divine discs **/
/*--reset button */
#game_rules + center > #loser + #youwin + table[width="90%"] + form[action="?reset=force"] #reset {
    position: absolute;
    top: 4px;
    right: 1em;
    width: 4em;
}
/*--colour buttons */
#game_rules + center > #loser + #youwin + table img[src^="//img.subeta.net/steele/sl6_piece_"].guess_button {
    position: absolute;
    top: 2px;
    right: 6em;
}
#game_rules + center > #loser + #youwin + table img[src="//img.subeta.net/steele/sl6_piece_gray.png"] {
    margin-right: 0;
}
#game_rules + center > #loser + #youwin + table img[src="//img.subeta.net/steele/sl6_piece_red.png"] {
    margin-right: 40px;
}
#game_rules + center > #loser + #youwin + table img[src="//img.subeta.net/steele/sl6_piece_yellow.png"] {
    margin-right: 80px;
}
#game_rules + center > #loser + #youwin + table img[src="//img.subeta.net/steele/sl6_piece_blue.png"] {
    margin-right: 120px;
}
#game_rules + center > #loser + #youwin + table img[src="//img.subeta.net/steele/sl6_piece_green.png"] {
    margin-right: 160px;
}
#game_rules + center > #loser + #youwin + table img[src="//img.subeta.net/steele/sl6_piece_purple.png"] {
    margin-right: 200px;
}

Leviathan Harpooning Makes the tiles larger, adds more contrast between rough and calm water tiles.

/* leviathan harpooning */
img[src^="https://img.subeta.net/safe_water"],
img[src^="https://img.subeta.net/battleship_tile_monster"],
img[src^="https://img.subeta.net/rough_water"] {
  margin: 1px;
  width: 32px;
}

img[src^="https://img.subeta.net/rough_water"] {
  opacity: 0.4;
}

Item ScrambleChanges the font and size so letters/words are easier to read. Makes inputs wider so you can see the whole item name without scrolling.

Example Images

/** item scramble **/
form[action="scramble.php?act=guess"] {
  font:1.3em/1.9 monospace !important;
}
form[action="scramble.php?act=guess"] input[type="submit"],
form[action="https://subeta.net/games/scramble.php?act=guess"] input[type="submit"] {
  font: 700 14px/1 system-ui !important;
}
form[action="scramble.php?act=guess"] input[placeholder="Unscrambled Item Name"] {
  width:50%;
  font:1em/1.5 monospace !important;
  margin:2px 0;
}
/*--challenge mode */
form[action="https://subeta.net/games/scramble.php?act=guess"] {
  font:1.2em/1.9 monospace !important;
}
form[action="https://subeta.net/games/scramble.php?act=guess"] > div[style="width: 750px; margin: auto;"] {
  font-size:.8em;
  line-height:1.3;
}
form[action="https://subeta.net/games/scramble.php?act=guess"] input[placeholder="Unscrambled Item Name"] {
  width:50%;
  font:1em/1.5 monospace !important;
  margin:2px 0 0;
  border:1px solid #28a745;
}
form[action="https://subeta.net/games/scramble.php?act=guess"] input::placeholder {
  color:#ccc;
}

Slots Spin ButtonLocks the spin again button in one place for faster repeat spins.

Example Images

/* keep slots button in one place */
input[value="Spin again!"], input[value="Have a spin!"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2px 0;
  margin: 3px 0;
}

Mystery Box ButtonsMoves the buttons for easy mass-buying.

/** mystery box buttons **/
img[src="//img.subeta.net/trivia.gif"]+p+p>a.ui.button.green[href="?act=buy"] {
  position: absolute;
  width: 7em;
  top: 1em;
  left: 1em;
}
img[src="//img.subeta.net/trivia.gif"]+p+p>a.ui.button.basic[href="?act="] {
  position: absolute;
  top: 1em;
  left: 9em;
}
img[src="//img.subeta.net/mystery_box.gif"]~[href="mystery_box.php"] {
  position: absolute;
  top: 1em;
  left: 1em;
  display: block;
  line-height: 10px;
  padding: 8px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  border-radius: 2.5px;
  font-size: 10px;
  color: #808080;
}

Mind ReaderChanges the page layout for faster playing.

Example Images

/** mind reader **/
/*--keeper image */
div.row.w-100.mx-auto + center > b + br + br + img[src="//img.subeta.net/keeper_graveyard.gif"] {
  width:200px;
  float:left;
}
/*--item table */
div.row.w-100.mx-auto + center > b + br + br + img[src="//img.subeta.net/keeper_graveyard.gif"] ~ table[width="750"] {
  width:100%;
}
/*--item cell */
div.row.w-100.mx-auto + center > b + br + br + img[src="//img.subeta.net/keeper_graveyard.gif"] ~ table[width="750"] td {
  min-width:unset !important;
  max-width:unset !important;
  padding:0;
  display:block;
  font-size:0em;
}
/*--cell borders */
div.row.w-100.mx-auto + center > b + br + br + img[src="//img.subeta.net/keeper_graveyard.gif"] ~ table[width="750"] td:nth-child(even) {
  border-left:3px solid #d8d0c2;
  border-right:3px solid #d8d0c2;
}
div.row.w-100.mx-auto + center > b + br + br + img[src="//img.subeta.net/keeper_graveyard.gif"] ~ table[width="750"] td:nth-child(odd) {
  border-left:3px solid #999186;
  border-right:3px solid #999186;
}
/*--turn and start buttons */
div.row.w-100.mx-auto + center > b + br + br + img[src="//img.subeta.net/keeper_graveyard.gif"] ~ a[href="?action=start_game"], div.row.w-100.mx-auto + center > b + br + br + img[src="//img.subeta.net/keeper_graveyard.gif"] ~ a[href="mind_reader.php"] {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:355px;
  padding:.5em;
  text-decoration:none;
  background:#eee;
  border-radius:6px;
  font-weight:bold;
}
/*--return to games button */
div.row.w-100.mx-auto + center > b + br + br + img[src="//img.subeta.net/keeper_graveyard.gif"] ~ table[width="750"] + br + br + a[href="index.php"] {
  display:none;
}

Shop ItemsImproves readability of item names/prices, stops item images from getting squished at small window sizes. Lets images be full size (64x64), making them less blurry.

Example Images

/* NPC Shop Items */
/*--item name */
.shop_item_container .ui.grid .two.wide.column form[action^="shop.php?shopid="] {
  font-size:100%;
}
/*--item price */
.shop_item_container .ui.grid .two.wide.column form[action^="shop.php?shopid="] font[style="font-size:10px;"] b {
  font-size:inherit !important;
  font-family:Monaco, Consolas, "Lucida Console", monospace;
  font-weight:normal;
  display:block;
}
/* --item count */
.shop_item_container .ui.grid .two.wide.column form[action^="shop.php?shopid="] font[style="font-size:10px;"] {
  font-size:80% !important;
  color:#555;
  line-height: 1.5;
  padding-top: 3px;
  display: inline-block;
  white-space:nowrap;
}
/*--item count linebreak */
.shop_item_container .ui.grid .two.wide.column form[action^="shop.php?shopid="] font[style="font-size:10px;"] br {
  display:none;
}
/*--item image no squish */
.shop_item_container .two.wide.column {
  min-width: 75px;
}
/*--item image look*/
.shop_item_container form[action^="shop.php?shopid="] input[type=image] {
  border: 0 !important;
  padding: 0 !important;
}

Mystery BoxShrinks mystery box image, eliminates scrolling for the buy button.

Example Images

/* remove mystery box image */
img[src="//img.subeta.net/mystery_box.gif"] {
  display:none;
}

/* shrink mystery box image */
img[src="//img.subeta.net/mystery_box.gif"] {
  max-width: 50%;
}

Remove ShopkeepersRemoves shopkeeper images to reduce scrolling before items come into view.

Example Images

/* remove all shopkeeper images */
center a[href=""] img[src*="//img.subeta.net/keeper_"] {
  display:none;
}
/* remove specific NPC images */
img[src="URL"] {
  display:none;
}

Shrink ShopkeepersKeeps the keepers, but makes them small, so there's still less scrolling.

/* shrink all shopkeeper images */
center a[href=""] img[src*="//img.subeta.net/keeper_"] {
  max-width:200px;
  }

Blob SpeciesAppends the legacy experiment number to your blob's species. "Common Blob" becomes "Common Blob Experiment #5162".

Example Image

.pet_color_info::after {
  content:" Experiment #5162";
}

Better Show ClothesMakes the Avatar profile widget more elegant, and compact. Requires the show clothes option to be checked.

/* better show clothes */
#content_avatar {
  margin-bottom:1.7em;
}
#content_avatar table {
  display:inline-block;
  position:relative;
  text-align:center;
  border-spacing: 0;
  top:1.7em;
}
#content_avatar table:before {
  content:"Hover for Full Outfit";
  display:block;
  position:absolute;
  top:-1.2em;
  text-align:center;
  width:100%;
  font-size: 1em;
  line-height: 1;
}
#content_avatar table tbody {
  transition: max-height 300ms ease;
  display:inline-block;
  max-height: 46px;
  overflow:auto;
}
#content_avatar table tbody:hover {
  max-height:250px;
}
#content_avatar table td {
  display:inline-block;
  transition: opacity 200ms ease;
}
#content_avatar table img {
  width: 45px !important;
  height: 45px !important;
  padding: 1px;
}
#content_avatar br {
  display: none;
}

Remove Hustler BannerEnsures that the hustler does not interrupt your pet pages.

/* remove hustler banner */
.hustler {
  display:none;
}

Item CensoringBlurs out—instead of hiding—items you don't want to see. Includes optional code that lets you click-and-hold to show the images again.

Example Images

/** item censoring **/
.hover-item[src="@item-img"], .hover_item_preview > img[src="@overlay-img"] {
    filter: blur(3px) grayscale(1);
}
/*--optional click-to-disable */
.hover-item[src="@item-img"]:active, .hover_item_preview > img[src="@overlay-img"]:active {
    filter: none;
}

Custom CSS TextareasMakes the user profile, pet profile, and custom CSS textareas bigger, easier to read, and makes the submit button easier to reach without scrolling.

Example Images

/* custom CSS textareas bigger */
/*--textarea */
textarea#descr,
.prefscontent form center textarea[name="profile"],
.prefscontent form center textarea[name="update"] {
  height: 450px !important;
  width: 100% !important;
  padding: .5em !important;
  font-size: 13px;
  color: #000;
  margin: 0;
  border-radius: 4px;
  border-color: rgba(0, 0, 0, .25);
  font-family: monospace;
  outline: none;
}
/*--button */
#profile-preview-button + br + br + input[value="Update Description"],
input[value="Submit your Profile"].ui.button,
input[value="Update CustomCSS"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.05)));
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
  color: #555;
  border-radius: 0.25em;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset, 0 8px 0 0 #FFF;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset, 0 8px 0 0 #FFF;
  color: #808080;
  cursor: pointer;
  background-color: #FAFAFA;
  line-height: 1;
  padding: .5em 0;
  position: fixed;
  /* page width - left - #page margin */
  width: calc(94% - 176px - 30px) !important;
  bottom: 0;
  left: 186px;
  margin: 0 15px 5px;
  font-weight:400;
}
/*--button focus */
#profile-preview-button + br + br + input[value="Update Description"]:focus,
input[value="Submit your Profile"].ui.button:focus,
input[value="Update CustomCSS"]:focus {
  outline: none;
}
/*--button hover */
#profile-preview-button + br + br + input[value="Update Description"]:hover,
input[value="Submit your Profile"].ui.button:hover,
input[value="Update CustomCSS"]:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08)));
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
  color: rgba(0, 0, 0, 0.7);
  background-color: #FAFAFA;
}
/*--button active */
#profile-preview-button + br + br + input[value="Update Description"]:active,
input[value="Submit your Profile"].ui.button:active,
input[value="Update CustomCSS"]:active {
  background-color: #F1F1F1;
  color: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset, 0 8px 0 0 #FFF;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset, 0 8px 0 0 #FFF;
}

New News BannerSlightly better looking new news banner, adds an animation, just for fun.

Example Images

/* new news banner */
.new-news-announcement-banner {
  background-color: rgba(89, 158, 241, .25) !important;
  color: #234d77 !important;
  border: 1px solid #234d77 !important;
  border-radius: 3px;
  margin: 0 auto 15px !important;
  -webkit-animation: fadeIn 500ms ease-out 250ms both;
  animation: fadeIn 500ms ease-out 250ms both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Random EventsAnimated for greater noticeability. Useful for events that require interaction (Ice King, Tempest).

Example Images

/** random events animation **/
#random_events {
  -webkit-animation: fadeIn 500ms ease-out 250ms both;
  animation: fadeIn 500ms ease-out 250ms both;
  margin-bottom: .5em;
}

/*--keyframes */
@-webkit-keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/*--title */
#random_events .sp-sub {
  border: none;
  background-color: #E6F4F9;
  color: #4D8796;
  font-weight: 300;
  border-radius: 1em;
  padding: .1em 0;
}

/*--img */
#random_events td[width="64"] {
  padding-top: 5px;
}

Custom PostcardsReplaces the theme-matching postcards with an image of your choice.

#postcards {
  display: block;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding-top: @img-height;
  padding-left: @img-width;
  background: url(@img-url) no-repeat;
}

Shengui Guo (Night Mode)A cohesive and thorough custom site theme, designed to be easy on the eyes. Made by Subeta user Silverfish, posted here with permission.

Example Images