Colour management

Qwwwik has colour by design. The default colours are below. They can be changed by copying the black text (with the HEX colours in red), changing the HEX colour, then pasting the style rule into 'extra.css' and updating it. This will replace the default colour.

Default link

:root { --link: #f09; } /* Can also be changed in setup */

Linen coloured background

.fw2 { background-color: #faf0e6; }

"You last viewed:"

#history {
color: #000;
background-color: #eee;
}

Quotes

blockquote {
  border-left: 6px solid #9cc;
  color: #000;
  background-color: #eefcfc;
}

Site name

#footer p a {
color: #fff;
background-color: #666;
}

"Edit" button

#edit p a {
color: #fff;
background-color: #dc143c;
}

Box background colours (white text)

.bg { background-color: #eee; }
.bgred { background-color: #d16356; }
.bgpurple { background-color: #786abe; }
.bggreen { background-color: #37ae50; }
.bgdark { background-color: #555; }

<span>Text colours</span>

span { color: #649300; }
span.red { color: #dc143c; }
span.blue { color: #39f; }
span.orange { color: #e18d08; }
span.grey { color: #999; }

Dropped cap

p span.dc {
color: #c82d3f;
}

"Crossband" example

@media screen and (min-width: 738px) {
  .crossband-red { /* Edit name and HEX colour */
    box-shadow: -720px 0 0 0 #d16356, 720px 0 0 0 #d16356;
  }
}

Slides bullets

.bullets .active,
.dot:hover {
background-color: #649300;
}

Bottom link bar

p.more-pages-bottom {
border-top: 6px solid #aa9cf2;
}

As an example, create a new coloured box named 'bgnew' with your chosen background colour:

.bgnew {
  margin: 2.4em 0 2.6em 0;
  padding: 1.2em 30px 1.2em 30px;
  border-radius: 12px;
  color: #fff;
  background-color: #cc56a5;
}

.bgnew h2, .bgnew h3, .bgnew h4, .bgnew h6 {
  margin-top: 0.6em;
  color: #fff;
  text-shadow: none;
}

.bgnew h5 {
  margin: 0.6em auto 0.8 auto;
  text-shadow: none;
}

.bgnew a {
  color: #fff;
  padding-bottom: 2px;
  border-bottom: 1px dotted #fff;
}

.bgnew a:hover {
  color: #fff;
  padding-bottom: 2px;
  border-bottom: 1px solid #fff;
}

Use a background HEX colour of your choice (a dark enough colour for white text) then paste the style rules into 'extra.css' and update it.

EXAMPLE

Content ...

</div>

[ green box not included ]

See information

Page last modified: 22 July, 2024
Search | Legal | Qwwwik