Skip to content

Wowhead Tweaks by mutly

Screenshot of Wowhead Tweaks
Write a review Install Get Stylus

Details

Authormutly

LicenseMIT

Categorywowhead

Created

Updated

Size3.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Tweaks for the new Wowhead.com layout, its menus and news list, especially for wide screen monitors.

Notes

Install Stylus addon, import CSS, be done with it.

Source code

/* ==UserStyle==
@name         Wowhead Tweaks
@version      20220531.02.32
@namespace    userstyles.world/user/mutly
@description  Tweaks for Wowhead.com menus and news list (logged in version)
@author       mutly
@license      No License
==/UserStyle== */
@-moz-document domain("wowhead.com") {
  /*menu*/
  .menu .menu-outer {
    overflow-y: auto;
    max-height: 250px;
  }
  .menu .menu-columns .menu-column {
    display: block;
  }

  /*news list*/
  @media screen and (min-width: 1025px) {
    .news-list-wrapper .news-list:not([data-pinned="true"]) {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 28px;
      padding: 16px;
      justify-content: center;
    }
    .news-list-wrapper .news-list:not([data-pinned="true"]) .news-list-card {
      display: flex;
      width: 48.5%;
      margin: 0;
    }
    .news-list-wrapper .news-list:not([data-pinned="true"]) .news-list-card .news-list-card-teaser-image {
      display: block;
      min-width: 30%;
      grid-column: none;
      border-radius: 4px 0 0 4px;
    }
    .news-list-wrapper .news-list:not([data-pinned="true"]) .news-list-card .news-list-card-content {
      padding: 16px 24px;
    }
    .news-list-wrapper .news-list:not([data-pinned="true"]) .news-list-card .news-list-card-content .news-list-card-content-body .wh-youtube {
      display: none !important;
    }
    .news-list-wrapper .news-list[data-pinned="true"] {
      gap: 16px;
    }
  }

  /*news post*/
  .news-post .news-post-image {
    height: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 972px;
  }
  .news-list-card {
    outline: 2px solid transparent;
  }
  .news-list-card[data-type="1"] {
    outline-color: #008833;
  }
  .news-list-card[data-type="2"] {
    outline-color: #0070dd;
  }
  .news-list-card[data-type="3"] {
    outline-color: #a335ee;
  }
  .news-list-card[data-type="4"] {
    outline-color: #00c0ff;
  }
  .news-list-card[data-type="5"] {
    outline-color: #a71a19
  }
  .news-list-card[data-type="6"],
  .news-list-card[data-type="14"],
  .news-list-card[data-type="15"],
  .news-list-card[data-type="16"] {
    outline-color: #660000;
  }
  .news-list-card[data-type="7"] {
    outline-color: #f06414;
  }
  .news-list-card[data-type="8"] {
    outline-color: #6a4427;
  }
  .news-list-card[data-type="9"] {
    outline-color: #d3490c;
  }
  .news-list-card[data-type="10"] {
    outline-color: #3e3cb4;
  }
  .news-list-card[data-type="17"] {
    outline-color: #6b9ede;
  }
  .news-list-card[data-type="18"] {
    outline-color: #f09b39;
  }
  .news-list-card[data-type="11"] {
    outline-color: #ffa040;
  }
  .news-list-card[data-type="20"] {
    outline-color: #543628;
  }

  /*pagination*/
  .news-pagination {
    display: flex;
    grid-template-columns: none;
    margin-bottom: 20px;
    margin-top: 50px;
    justify-content: center;
    align-items: center;
  }
  .news-pagination .news-pagination-pages {
    margin: auto 16px;
    grid-column: none;
  }
  .news-pagination .news-pagination-buttons {
    grid-column: none;
  }

  /*tooltip, hide set information*/
  .wowhead-tooltip table table + table div.q0.indent,
  .wowhead-tooltip table table + table span.q0 span,
  .wowhead-tooltip table table + table span.q0 br {
    display: none;
  }
}

Reviews

No reviews yet.