BtR's Blog

BehindTheRabbit is closing

Dear BtR customer,
Dear Sandvox user,
Dear surfer of the Interwebs,

BehindTheRabbit will be closing soon. It took some time to take this decision and to plan a way to leave the business which is fair to all my current customers and to the Sandvox community.

Seven years ago I started this adventure more as an hobby than as a job. As soon as I started selling designs though, I tried to keep a professional approach even if my “real”, full-time job was completely different. According to the amazingly kind feedback I received in all these years, I think I succeded.

As you noticed, the development of new designs slowed down and came to a full stop during the last two years. I was developing a third generation of brand new, responsive, modern designs but I realized I just didn’t have the time to work on them with the required care. I’m not a perfectionist (even if some friends of mine might disagree…) but I didn’t want to release any unfinished or unpolished project. So I got stuck.

In the meantime, a lot of things were going on in my personal life, keeping me even busier then before.

Starting a few months from now, I will be traveling a lot between Rome and London and I will be often unavailable for support. This means that not only I cannot develop designs anymore: I won’t even be able to reply to basic support requests for an unpredictable amount of time. So, this is probably the right time to let it go.

What happens next?

My plan is to disengage gradually.

  • The first step is this announcement.
  • Designs will be for sale until the end of the year, to protect the investment of current users but if you’re buying one now you know that support will be unreliable and that there will be no further development (compatibility updates will be guaranteed, though).
  • The oldest designs are now released for free.
  • If you purchased a design in the last 30 days (between April 29th and May 29th) and you think this news would change your mind about your purchase, you are entitled to a full refund. Just use the contact form and ask for one (it might take a few days to process).
  • In early 2017 all designs and all their source files will be released for free. At the same time, support will end. The website will be kept up and running for at least a couple of years even if it will not be updated anymore (it still provides a lot of useful information).


I would like to thank all my customers and the Sandvox community. I found an extremely kind, patient, loving community which nowadays is a rare and precious thing.

Thank you to Terrence Talbot and Mike Abdullah for their support to any of my needs.

A special “thank you” goes to Dan Wood, who “recruited” me seven years ago and who was very very patient with all my issues and prompt to help.

My deepest regret is that I see a lot of potential in Sandvox that I cannot express further. If you’re a developer, I would consider giving it a try because working on a Sandvox Design is really easy.

I had a good and rewarding time, thank you all and see you around!

— ✻ —

New Design: Beryllium

berylliumI’m glad to announce the release of a new Sandvox Design: Beryllium.

Beryllium is a 960grid-based theme with a light gray background and a flat design. Photo grid thumbnails are slightly larger than usual (140px). A particular attention is given to typography and whitespace.

One of its specific features is the possibility for images to be marginless on their sides and to go full-width (so up to 600px or 920px, with/without sidebar). You might start to notice this kind of image presentation in many recent and popular websites.

Beryllium is available in six colors and, since it’s exclusively based on CSS, it’s highly customizable if you know how to play with code injection.

Beryllium is an all-purpose design: it’s suitable for blogs, corporate sites, personal pages and many other goals. I hope you’ll like it as a I do!

— ✻ —

Karelia Software acquires Potion Factory

Great news from Karelia Software today: people at Potion Factory (creators of – among the others – The Hit List) are joining Karelia’s family.

Here is the press release:

The Hit List, I Love Stars, Tangerine! and Five Moku added to Sandvox and iMedia Browser

Pasadena, Calif. – March 4, 2014 – Karelia Software today announced the company has acquired Potion Factory, and added The Hit List, I Love Stars, Tangerine! and Five Moku to its stable of award-winning software products. Potion Factory developers will also join Karelia, expanding capabilities in iOS development, synchronization, graphic design and user interface design.

“Giving our customers more great apps has always been part of our vision,” said Dan Wood, president of Karelia Software LLC. “We are excited to combine forces with such talent, possessing skills that fit so well with ours. We’ve already started working on development across the combined product line and are excited to create new, great apps for Mac and iOS.” (…)

Read more

You can also:

Congratulations, everybody!

— ✻ —

Create a nice badge-like object

You can create a nice round object and use it as a badge or a personal logo. It’s pure CSS, so it’s not suitable as a Sandvox logo like the one you usually place into the header: this needs to be an image. What I’m talking about is something more dynamic, something you can create, customize and add on the fly to any page.

You can use it to emphasize an article’s content, for example (like “New offer!”, or “Editorial”, or “Guest post”). You can also choose different colors to differentiate sections or categories. Or you can add it to your sidebar as its first element and use it as a site-wide logo.

Here is the code and how it looks like, just play with it and change values according to your taste and your goal (round corners and box shadows require IE9 or later, so check it gracefully degrades for IE8):

See the Pen hLmGc by Cristiano Maria Gaston (@cgaston) on CodePen.0

— ✻ —

Add a search box to your website

duckduckgoA very common request among Sandvox users is: “Can I add a search box to my website?”. An answer to this topic is already discussed here, but I’d like to put my two cents in.

Sandvox cannot perform a search by itself: for this purpose you need a (much more complex) dynamic website. The form has to call a script, the script needs an access to a database, the database must have an index of your content and so on. Platforms like WordPress have these features, but any static website – no matter how it is created – just can’t.

We can delegate someone else to do the job for us, though. In this short tutorial we’ll use DuckDuckGo for these reasons:

  • Super-easy
  • No registration required
  • Customization
  • Privacy
  • It also looks good
  • It’s a bit geeky, but you know it only if you’re a geek – which is good ;)

DuckDuckGo is an anonymous and powerful search engine that made of privacy and respect for user data its very strong point. You can read something more here (a recommended read).

Let’s say we want to add a search box to the sidebar of our website, which is hosted at the address (yes, we’ll pretend we want to search this website). We’ll be using Lithium for this example. The final page is already available here – take a look before we begin. – Read more »

— ✻ —

Why I’m not going Responsive

Responsive Web Design

This article will make a lot of people sad and a lot of people angry.

Likely, customers will be in the first group, web designers in the second one. But this is how I think at this time (this is not some kind of ideological statement) and I have to come clean about it because “Do you have any responsive themes?” is one of the most common questions I receive as a Sandvox developer.

If you are a developer, text in these boxes is for you. If you are not a developer, you can just skip them.

First of all, I’m not against RWD per se. We’ll come to this later. I’m against RWD in two specific situations:

  1. Sandvox, the platform I work on
  2. Anywhere else, unless there’s a reason to do otherwise

Point number two clashes directly against one statement that has become recently a sort of ultimate guideline for web design: “Mobile first”. So let me be clear also about this: I’m not against this statement per se, but there are two conditions:

  1. When RWD is mandatory, I agree that a mobile-first approach is the best strategy.
  2. Sandvox doesn’t make this easy: for a mobile-first approach you have to work on many levels, not just CSS with a pinch of javascript. Hopefully it will be clear soon that this is not an issue.

– Read more »

— ✻ —

Change metrics for Carbone and Grafite

Carbone MetricsCarbone and Grafite are two of the most successful themes by BehindTheRabbit. They are two “twin” designs, meaning that they share many characteristics; among them, most of their metrics. A common request about them is: “Can I increase their width”?

They are both 900px wide, which is suitable for most purposes but narrower than the 960px standard so common nowadays. Anyway, since the graphics of both designs are completely created via CSS, there’s a lot of changes we can do. We’ll use Carbone as an a example.

Header’s height

Header’s height is one of the easiest parts we can change. It is 120px tall and the title has a padding-top of 40px; to make it, for example, 100px tall the code is quite straightforward:

#title {height:100px;}

As you can see, we need to move up a little the title too. We shortened the header by 20px, so let’s subtract around 20px to the padding-top as well (let’s make it just 20px to keep things simple). This is the final code:

#title {height:100px;}
#title h1 {padding-top:20px;}

You can play with this values, according for example to the visibility of the tagline or you personal taste.

Technically, you can also increase its height, but there’s a catch: whatever the size of the header is, a banner picture can only be 120px tall. This limit is hardcoded into the design and cannot be changed via CSS injection, so you will not be able to use a picture as a header background (unless it’s a pattern). – Read more »

— ✻ —

Reduce header’s height in Hydrogen & Kryptonite (2)

This post is an update to a previous post about both Hydrogen and Krypton which is now outdated (Hydrogen has been completely rewritten to be bundled in Sandvox 2).

Let’s say we want the header to be 120px tall. For Kryptonite and Krypton Pro, nothing has changed:

#title {height:120px;}

For Hydrogen the situation has become slightly more complex and we need to do some math because more elements are now involved. 120px means we want the header to be 60px shorter than its default 180px height. So we need to subtract 60px to some default values.

These are the defaults:

  • height for #title h1 and #title h1 a is 180px (180-60=120)
  • height for #title is 135px (135-60=75)
  • position for #title p is top:180px (180-60=120)

Hence, this should be the code:

#title h1, #title h1 a {height:120px;}
#title {height:75px;}
#title p {top:120px;}

Here is another example. This is the code to change the header to 140px:

#title h1, #title h1 a {height:140px;}
#title {height:95px;}
#title p {top:140px;}
— ✻ —

How to create round images

Round imageRound images are a recent trend in web design, one I rather like if it’s used in moderation. CSS3 lets us to transform a square image into a round one with just few lines of code.

In this example, we will use round images as thumbnails for a “Staff” section of a hypothetical website. It’s a nice way to present staffer’s pictures and surely you have seen it before on the Internet.

What do we need

This code works with any Design. Actually, we’re using Sandvox but these principles are the same regardless of the platform.

What we need is just a square image. We could use a rectangle-sized image but things would be much more complex. So, choose your photo, crop it in a 1:1 ratio if it isn’t already a square and that’s it.

In Sandvox

As I said, we’re creating a “corporate” staff section. Of course, you can use this technique with any image no matter how large, no matter where it is (sidebar, callout, a gallery…). If your image is already in its place, you can skip this part.

Add your picture to the page where it belongs, as you usually do. In this case inside the main text, as an inline image:

Add your image
– Read more »

— ✻ —

Few thoughts about Aral Balkan’s speech [u]

Before I start, this is a video you really should watch (entirely):

Aral Balkan (you can follow him here) provides a clear, deep description of the current state of our digital life talking about devices, services, commodities, their relationship with us as persons and the role of few big players in this ecosystem.

One of his key points is the open/close dialectics and I agree with almost everything he says. Only two things make me think, that I’d like to share.


One consideration is missing from his reasoning: most closed environments are build on top of open technologies (FreeBSD is the core of MacOS X, Android is based on Linux and Java, Google runs on Linux servers, Facebook uses php; only Microsoft relies almost entirely on proprietary technologies).

This isn’t particularly interesting “per se” – unless we think of it as a key point. Is it? – Read more »

— ✻ —