A Micro Micro CMS

Default theme colours

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>


Light navigation bar:

@media screen and (min-width: 798px) { /* Desktops, laptops */

  /* Navigation bar ------------- */

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

  nav li strong {
    color: #000;
    border-bottom: 6px solid #e4ff00; /* Or #ddd */
  }

  nav a {
    color: #000;
  }

  nav a:hover {
    color: #ff0099;
    border-bottom: 6px solid #ff0099;
  }

  nav li.admin a {
    color: #ff0099;
  }

  nav li.admin a:hover {
    color: #ff0099;
    border-bottom: 6px solid #ff0099;
  }

  /* End navigation bar --------- */

} /* End desktops, laptops */

Copy and paste into extra.css and update styles.

Dark navigation bar:

@media screen and (min-width: 798px) { /* Desktops, laptops */

  /* Navigation bar ------------- */

  nav {
    color: #fff;
    background: #000;
    border-bottom: none;
    opacity: 0.8;
  }

  nav li strong {
    color: #000;
    border-bottom: 6px solid #e4ff00;
  }

  nav a {
    color: #fff;
  }

  nav a:hover {
    color: #fff;
    border-bottom: 6px solid #ff0099;
  }

  nav li.admin a {
    color: #fff;
  }

  nav li.admin a:hover {
    color: #fff;
    border-bottom: 6px solid #ff0099;
  }

  /* End navigation bar --------- */

} /* End desktops, laptops */

Copy and paste into extra.css and update styles.

Light footer

footer {
  border-top: 1px solid #444;
  border-bottom: 3.0em solid #36322e;
  color: #fff;
  background: #36322e url('../img/bg_footer.gif') no-repeat;
  background-position: center bottom;
}

footer p a {
  color: #fff;
}

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

footer span {
  color: #666;
}

Copy and paste into extra.css and update styles.

Dark footer

@media screen and (min-width: 798px) { /* Desktops, laptops */

  #content {
    min-height: 480px; /* Push down on short pages */
  }

}

footer {
  border-top: 1px solid #444;
  border-bottom: 3.0em solid #444;
  color: #fff;
  background: #444 url('../img/bg_footer.gif') no-repeat;
  background-position: center bottom;
  -webkit-box-shadow: 0 700px 0 700px #444;
  -moz-box-shadow: 0 700px 0 700px #444;
  box-shadow: 0 700px 0 700px #444;
}

footer p a {
  color: #fff;
}

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

footer span {
  color: #666;
}

Copy and paste into extra.css and update styles.

Page last modified: 05 October, 2020