A Micro Micro CMS

Default theme colours

White navigation bar example, not default black. Dark footer, not white. See below.

Hex colours:

<span>text</span>

<a href="./url">links</a> (and nav menu mouseover underline – desktops):

Nav menu 'page on' underline and site name (desktops):


Coloured divs:

Coloured box class bg1:

<div class="bg1">

Content.

</div>

Coloured box class bg2:

<div class="bg2">

Content.

</div>

Coloured box class bg3:

<div class="bg3">

Content.

</div>

Coloured box class bg4:

<div class="bg4">

Content.

</div>

Coloured box class box:

<div class="box">

Content.

</div>

Change navigation bar from dark to light

White navigation bar and remove 'site name' as on this page (desktops and laptops only):

@media screen and (min-width: 798px) {

  nav {
    color: #000;
    text-transform: capitalize;
    background: #fff;
    border-bottom: 1px solid #ddd;
    opacity: 0.9;
  }

  nav ul {
   font-size: 0.9em;
  }

  nav li a,
  nav strong {
    color: #000;
  }

  nav li a:hover {
    color: #ff0099;
  }

  p#sitename { /* Removes site name (optional) */
    display: none;
  }

}

Dark footer (desktops and laptops only)

footer {
  border-top: 1px solid #333;
  border-bottom: 2.4em solid #333;
  color: #fff;
  background: #333 url('../img/bg_footer_monochrome.gif') no-repeat;
  background-position: center bottom;
  /* x-value y-value blur spread color */
  -webkit-box-shadow: 0 700px 0 700px #333;
  -moz-box-shadow: 0 700px 0 700px #333;
  box-shadow: 0 700px 0 700px #333;
}

footer a {
  color: #fff;
}

footer p a:hover {
  color: #fff;
  border-bottom: 1px solid #ddd;
}

footer span {
  color: #666;
}

Paste into extra.css and update styles.


Change dark colour of navigation bar

@media screen and (min-width: 798px) {

  nav {
    text-transform: uppercase;
    background: #d44117; /* example dark colour */
    opacity: 0.9;
  }

}

@media screen and (max-width: 797px) {

  p#sitename {
  background: #d44117; /* example dark colour */
  border-bottom: 1px solid #d44117; /* example dark colour */
  opacity: 0.9;
  }

}

Paste into extra.css and update styles.

Information »

Page last modified: 05 February, 2021