Hydrogen

hydro-3-promo

Hydrogen, one of the most successful designs from BehindTheRabbit, is now bundled for free with Sandvox 2.8 (read the official announcement).

Previous users will see the updated version automatically after upgrading Sandvox to its latest update.

Freebies

You can download for free a set of ready-made banners created for Hydrogen.

Download the banners

Important notice to previous users

Version 1.x of Hydro used to require a workaround to hide the title from the header while keeping the underlying banner visible.

Hydrogen 2 doesn’t require anymore code injection for this: you can just hide and show the title as for any design. If you used this code, you can safely delete it from your Sandvox file.

Customization

Here are some examples of what you can do with just a few lines of code. Instructions on how to use this code are here.

To change the main color to, in this case, red (this code adds a text-shadow to the title too):

#title h1 {
background-color:#C8002A !important;
text-shadow:0 2px 1px #333;
}
#main a, #sidebar a, #page-bottom a {
color:#C8002A;
}

To change the main font to a serif font:

#main p, #main li {
font-family:Georgia, "Times New Roman", Times, serif;
}

If you want to use a gradient background but you don’t like graphic applications like Photoshop or similar, you can still accomplish this result with code. And if you don’t want to write your code neither, you can use one of many tools available online (like this one or this one). This is just an example (it creates a pale green gradient):

#title h1 {
background-color: #86b786;
background-image: -webkit-gradient(linear, left top, left bottom, from(#86b786), to(#a6caa6));
background-image: -webkit-linear-gradient(top, #86b786, #a6caa6);
background-image: -moz-linear-gradient(top, #86b786, #a6caa6);
background-image: -o-linear-gradient(top, #86b786, #a6caa6);
background-image: -ms-linear-gradient(top, #86b786, #a6caa6);
background-image: linear-gradient(top, #86b786, #a6caa6);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#86b786', EndColorStr='#a6caa6');
}

Snippets

You can check these posts on the blog: