Hydrogen

Add to CartView CartView Demo

In the last few years the Web has changed more than during the previous ten. Old browsers like Internet Explorer 6 have almost disappeared allowing many users to enjoy features once limited to geeks and technology enthusiasts like html5 and css3; mobile devices with different screen sizes browse your website every day, not once in a while anymore; what was considered a promising standard just few months ago is now ancient history.

The web developer community grew and adapted accordingly.

The result is a number of best practices that Hydrogen – the first of BehindTheRabbit’s next generation of Sandvox Designs – comply with in order to give your visitor the most compatible and modern browsing experience possible.

Hydrogen is a basic, white-background theme, ready just out of the box to satisfy different needs.

Blogger? It looks good with text and even long articles. Photographer? Galleries support up to 900px wide images giving your pictures the center of the scene. Feel creative? You can mix pageletes (with or without border), objects, images, blockquotes: your website will always keep a good balance, perfect readability and a modern look-and-feel.

But if you have special needs it’s super-easy to use Site (or Page) Code Injection to modify the default look and add some color or change the fonts (see few examples below).

Features

Hydrogen comes with 20 ready-made banners

Hydrogen comes in two variations (with left or right sidebar) and includes 20 ready-made original banners that you can use to customize your header: gradients (6), gradients with rounded corners (6), watercolor (3), paper (2), “bokeh” effect (2) and “waves” effect (1).

Other features are:

  1. Printer-friendly: a specific style sheet makes pages look good when printed.
  2. Support for hiearchical menus, bordered pagelets, custom banner, custom logo and the new blockquote object.
  3. Images scale up to 900px in pages with no sidebar and up to 580px in pages with sidebar: your photos have all the room they need.
  4. If you work with Raw HTML, you’ll see sub, sup, pre, code and blockquote tags nicely formatted.
  5. Unobtrusive transitions and shadows on buttons, forms, sitemaps, image grids.
  6. The ideal size for your own banner is 960×180px. Other sizes will be cropped if larger, tiled if smaller.

Price and requirements

Price: $9.90.

Hydrogen requires Sandvox 2.0 or later and is not compatible with Sandvox 1.x. Please, read our policy before you buy.

Useful blog posts

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');
}