Need help w/ dark background on Wowhead, please

Hi guys,
My astigmatism gives me a very bad time on websites that feature light text on a black background, so Stylify has been a blessing for me. Unfortunately, my rudimentary attempts to correct the WoWhead website (http://www.wowhead.com/) have been unsuccessful. I am able to override the background and text color, but they're doing something with their images that causes them to become unviewable after my changes. In particular, the "Today in Broken Isles" section has some informational images with dynamic content that I am unable to view with my filter enabled.

Here's my filter as it stands:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("wowhead.com") {
* {
background: #FCFCFC !important;
background-color:#FCFCFC;
color: #000000;
}
a:link {color:#0000EE !important;}
a:visited {color:#551A8B !important;}
a:hover {color:#0000EE !important;}
a:active {color:#0000EE !important;}
.comment-green, .comment-green ol li div, .comment-green li div {
color: #0000ee !important;
}
.comment-gold, .comment-green ol li div, .comment-green li div {
color: #0000ee !important;
}


}

I've tried adding defaults back into the .today-in-wow, .tiw-group-wrapper, and .featured-content-block.type-today-in-wow div sections, but I can't seem to get it to work. If anyone could give me an assist, I would be most grateful.

Thanks!

Comments

  • edited August 2017 Firefox

    they're doing something with their images

    They don't display the images directly but include them as background images (which is not uncommon for different reasons, e.g. if you use sprites).
    You forced all backgrounds to be light grey, so the images are gone/overwritten.

    Try to be more specific:
    body,
    .zul-bar,
    .header,
    .header-nav,
    .menu a.open, .menu a:hover, .menu a.open span, .menu a:hover span,
    .menu .menu-outer,
    .menu[data-reverse-tier="1"] .menu-outer, .menu:hover .menu-outer,
    .page-content,
    .header-nav-features,
    .main-precontents,
    .main-contents,
    .news-recent-content-row > [class^="news-recent-"],
    .featured-content-block,
    .news-list .news-post,
    .site-footer
    { background:white; color:black; }
    and so on. You may need to find and add more classnames.
  • Brilliant reply. Thank you so very much for your help, mate.
Sign In or Register to comment.