A Dark Domain Built Out of Rules

This is the old way of making a domain dark: overriding the engine's rules one by one with your own css. It still works, but the same thing is now done by a domain theme — by picking from a list, without a single line of css.

Try a theme first. “Domain” → “Design” → “Domain settings” → “Theme”: Dark Purple or Dark Radix give you a dark domain as a whole — the site, the game, the day and the night. Everything below is what a theme does without you.

If you do need a dark palette of your own, the place to start is not this list of selectors but the tokens: set –qeng-body-bg, –qeng-surface-bg and a few more names of the palette, and the colour spreads across the engine's rules by itself. The list opens in the studio, by the “Theme tokens” link next to a css slot.

Below is that same old example. It was written for the way the pages used to be built, and some of its selectors may no longer match anything.

It is copied into the CSS slot of the “Site” screen in the “Design” section, then “Save”.

Save your old settings so that you can come back to them — or use the “History” button in the studio: it remembers the last 30 saves.

/* Background setup at the edges */
body {
  background-color:#000;
  background-image: url("https://imagizer.imageshack.com/img924/7545/DlMobT.png"); /* background tiled image */
  background-repeat: repeat-x repeat-y;
  color:#FFF;
}
/* Admin panels */
.admin-control {
  background-color:#003;
}

/* Pages with a lot of text, without collapsible tabs, e.g., Monitoring */
.page-container {
  background-color:#111;
  color:#FFE;
}
.page-container a{
  color:#EEF;
}

.table {
  color:#FFF;
}

/* Collapsible tabs */
.sp-head, .sp-wrap {
  background-color:#555;
  color:#CCC;
}
.sp-wrap {
  box-shadow: 5px 5px 5px #113;
}
.sp-body .sp-wrap {
    box-shadow: 3px 3px 3px #113;
}
.sp-body {
  background-color:#111;
  color:#FFF;
}
.out_game_controls {
  background-color:#222; /* Background under game control buttons */
  color:#FFF;
}
.sp-wrap a {
  color:#FFE; /* game ID font color */
}

/* Collapsible tabs of active games */
.game.active .sp-wrap {
  background-color:#665; /* header color */
}
.game.active .sp-wrap .sp-head{
  color:#FFF;  /* game title font color */
}
.game.active .sp-wrap .sp-head a{
  color:#FFF; /* game ID font color */
}

/* Sometimes encountered, e.g. list of seasons in rating */
.list-group-item {
  border: 1px solid #CCC;
  border: 1px solid rgba(255,255,255,.125);
  background-color:#111;
  color:#FFE;
}