Change background and font

Change the background color and font of your theme

by Martin Emanuelsson

HTML

<div class="col-md-12">
  <h3>Color</h3>
  <p>Here you can change the color of the theme.</p>
  <a id="blue" href="#color"><span class="colors blue"></span></a>
  <a id="black" href="#color"><span class="colors black"></span></a>
  <a id="grey" href="#color"><span class="colors grey"></span></a>
</div>

<div class="col-md-12">
  <h3>Font</h3>
  <p>Here you can change the main theme font.</p>
  <ul>
    <li><a id="dosis" href="#font">Verdana</a></li>
    <li><a id="arial" href="#font">Arial</a></li>
  </ul>
</div>

CSS

p {
  color: #F2F2F2;
}

a {
  color: #CCC;
}

html,
body {
  height: 100%;
  background: #333;
}

.colors {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.black {
  background: #141414;
  background-image: linear-gradient(to bottom, #141414 0, #2c2c2c 100%);
}

.grey {
  background: #333;
  background-image: linear-gradient(to bottom, #333 0, #999 100%);
}

.blue {
  background-color: #004386;
  background-image: linear-gradient(to bottom, #004386 0, #00346b 100%);
}

.verdana {
  font-family: 'Verdana', sans-serif;
}

.arial {
  font-family: 'Arial', sans-serif;
}

JavaScript

// Background Theme

$(document).ready(function() {
  $("#black").click(function() {
    $("body").removeClass("blue");
    $("body").removeClass("grey");
    $("body").addClass("black");
    $("body, html").fadeIn(100);
  });
});

$(document).ready(function() {
  $("#blue").click(function() {
    $("body, html").removeClass("black");
    $("body, html").removeClass("grey");
    $("body, html").addClass("blue");
    $("body, html").fadeIn(100);
  });
});

$(document).ready(function() {
  $("#grey").click(function() {
    $("body, html").removeClass("black");
    $("body, html").removeClass("blue");
    $("body, html").addClass("grey");
    $("body, html").fadeIn(100);
  });
});


// Font Theme

$(document).ready(function() {
  $("#dosis").click(function() {
    $("body").removeClass("arial");
    $("body").addClass("verdana");
  });
});

$(document).ready(function() {
  $("#montserrat").click(function() {
    $("body").removeClass("verdana");
    $("body").removeClass("arial");
  });
});

$(document).ready(function() {
  $("#arial").click(function() {
    $("body").removeClass("verdana");
    $("body").addClass("arial");
  });
});