Theme change with CSS

An easy way to customize a theme with css with given options.

by Carlos González

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-3 col-xs-6">
      <article class="post-wrapper">
        <h1>Post Regular Theme</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec metus ante. Aenean sed erat imperdiet ante convallis sagittis nec in augue.</p>
      </article>
    </div>
    <div class="col-sm-3 col-xs-6">
      <article class="post-wrapper info">
        <h1>Post Info Theme</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec metus ante. Aenean sed erat imperdiet ante convallis sagittis nec in augue.</p>
      </article>
    </div>
    <div class="col-sm-3 col-xs-6">
      <article class="post-wrapper success">
        <h1>Post Success Theme</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec metus ante. Aenean sed erat imperdiet ante convallis sagittis nec in augue.</p>
      </article>
    </div>
    <div class="col-sm-3 col-xs-6">
      <article class="post-wrapper warning">
        <h1>Post Warning Theme</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec metus ante. Aenean sed erat imperdiet ante convallis sagittis nec in augue.</p>
      </article>
    </div>
  </div>
</div>

CSS

/* Theme color */

.warning{
  color: #9A2C2C;
  background-color: #FFE2E2;
  border-color: #9A2C2C;
}

.info{
  color: #2D5E7D;
  background-color: #CEEAF1;
  border-color: #2D5E7D; 
}

.success{
  color: #2D7D36;
  background-color: #CEF1D2;
  border-color: #2D7D36;
}

/* General Classes */

.post-wrapper{
  padding: 15px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.2);
  border-radius: 5px;
}