Before:

The original design before visual treatments

After:

The design after visual treatments

Try it out yourself in Google Chrome:

  1. Get the Stylebot Chrome extension
  2. Go to harpjs.com/docs/
  3. Open Stylebot and click the "Edit CSS" button
  4. Paste in the following CSS and click Save:

/***********************************************************
   Go to harpjs.com/docs/
   Then try paste this CSS into Stylebot Chrome extension: 
***********************************************************/

:-moz-placeholder {
    color: #778b92;
    /* Mozilla Firefox 4 to 18 */
    opacity: 1;
}

:-ms-input-placeholder {
    color: #778b92;
    /* Internet Explorer 10-11 */
}

::-moz-placeholder {
    color: #778b92;
    /* Mozilla Firefox 19+ */
    opacity: 1;
}

::-webkit-input-placeholder {
    color: #778b92;
    /* WebKit, Blink, Edge */
}

.search-query {
    border: 1px solid #6B919E;
}

.nav-push-item.active {
    background-color: #26596A;
}

.nav-aside-item a {
    padding: 5px inherit;
}

.nav-aside-item.active > a, 
.nav-aside-item.active.active-last > a {
    background-color: #6B919E;
    border-color: white;
    color: white;
}


Tags

html-css redesign-case


Related posts