BtR's Blog

Bug in some designs with Sandvox 2.8

Some designs are currently affected by a (harmless) bug when used in Sandvox 2.8. When working in Sandvox, images contained inside a pagelet are aligned to the left, as in this image:

bug-sandvox

When you publish or export your website everything looks as expected, though:

bug-exported

This bug has been already reported and doesn’t affect your published website, so you can keep working with your design.

An update to all designs is on its way but, other than fixing this, I would like to add retina support and maybe some more features, so it may take some time.

If you see any other unexpected behavior, please contact support.

Update: temporary fix

If you’re bothered by this bug, while you wait for an update, you can fix it by yourself (make a backup copy first, in case something goes wrong).

  1. Open the designs drawer
  2. Right-click on the bugged design
  3. Reveal the design in the Finder
  4. Right click on it, then show package content
  5. Open “main.css”
  6. Look for this line and delete it:
    img.graphic {display:block !important;}
  7. Save, close, restart Sandvox
— ✻ —

Hydrogen and Kryptonite bundled with Sandvox 2.8

I’m glad to announce that Hydrogen and Kryptonite have been acquired by Karelia and are now offered for free, bundled with Sandvox 2.8. You just need to update your copy of Sandvox and you’ll find them already installed.

First of all, let me thank Dan, Terrence and Mike for their support and appreciation. They are a great team and people at Karelia is wonderful.

Now, some explanation is required.

Hydrogen

Hydrogen 2.8Hydrogen moves to version 2.8. There are two important new features in this update:

  1. It’s retina-ready. You can implement this Sandvox 2.8 new feature and enjoy the benefits of a retina-ready website with Hydrogen. I own a retina Mac and I can tell you that a retina friendly website is a huge, huge thing for retina users.
  2. Version 1.x of Hydro used to require a workaround to hide the title from the header while keeping the underlying banner visible. I managed to solve this limitation, so Hydrogen 2 doesn’t require anymore code injection, 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.

A selection of ready-made banners was offered with the previous version of Hydrogen. You can now download them for free.

Krypton & Kryptonite

KryptoniteKrypton is a feature-rich design with few extra customization options available via code injection. We agreed that this is not proper for a bundled design, so we decided to use a more basic version of Krypton for this purpose, stripping down just the code injection options.

The result is Kryptonite, which is exactly how Krypton is if you don’t use extra code. Kryptonite too is retina-ready.

What about previous users of Krypton? No problem: Kryptonite is identified as a different design, so you keep both. In the next days an update to Krypton will be released to add retina support. To better differentiate the two designs, its name will change to “Krypton Pro”.

Krypton Pro will be available again for sale in a couple of weeks for users who still want to benefit from its code injection features for a special price of $4.99.

That said, let me say that I’m very, very happy about this announcement and I hope you will enjoy these two designs as I do.

— ✻ —

Welcome to the new BehindTheRabbit

circle-rabbitHere we are!

Welcome to the new BehindTheRabbit. First of all, BehindTheRabbit sports a brand new look, built on a customized version of twitter bootstrap and retina-friendly. There are changes in the content as well: the support section has been completely reorganized and searching posts in the blog should be more rational now.

To celebrate this redesign, I’m releasing today a new Sandvox Design: Lithium, a white background, wide theme with gorgeous photo galleries. Lithium follows all the latest trends in web design (improved typography, flat design, CSS graphics, pure-CSS drop-down menus, balanced whitespace); moreover, with the upcoming version 2.8 of Sandvox you will be able to make your website retina-ready!

Hydrogen and Krypton are in the waiting line: there’s something behind the corner that I’m pretty sure will make you happy. Don’t peek! Just wait a few more days and stay tuned for further announcements.

Another new feature is BehindTheRabbit’s Newsletter: you can subscribe to receive news about new products or important updates. Your mailbox will not be spammed, I’m too lazy to write more than an e-mail every 1-2 months…

There’s something else in the pipeline, but it’s too early to talk about it. April has been a very busy month for the rabbits and the work is not finished yet.

Stay tuned!

— ✻ —

Beta test program launched

betaHere is another announcement (I told you this would be a busy month): BehindTheRabbit launches a new beta-test program!

Interested in free designs? Are you looking for something specific and nothing meets your expectations?

This is your chance to have early access to upcoming products and to influence their design.

If you want to apply, start from this page.

— ✻ —

Price drop for 4 Sandvox Designs

I’m pleased to announce that four Sandvox Designs are now available for $7.90 instead of $9.90. This is the first of a series of announcements that will be gradually released in the next weeks.

The designs involved are:

— ✻ —

Major reorganization imminent

BehindTheRabbit is undergoing a major reorganization: in the next weeks a number of changes are to be expected involving different areas.

  • First of all, Hydrogen is temporarily not available for sale. This is – I repeat – a temporary situation and the reason will be announced soon. This doesn’t mean that Hydrogen is end-of-life: as a matter of fact it’s the opposite because I’m working on a 2.0 version.
  • Second: expect a price drop for all the designs.
  • Third: there’s good news for Krypton as well, but it’s too early to talk about it – stay tuned, hopefully there will be an announcement in a week or so.
  • Last but not least, a new design is finally on its way. It will be a white background, wide design with nice typography and some interesting new features.

The next month will be full of changes, so let’s keep in touch!

— ✻ —

Reduce the header’s height in Hydrogen and Krypton

I already wrote about this but for an easier access it needs a post on its own.

There’s a debate about the position of the sitemenu: usually it’s placed below the header, but with my recent themes I decided to put it on top of the page. Someone likes it, someone doesn’t, it’s a matter of taste. With a tall header I understand that it may be less usable, but still I like it where it is in Hydrogen and Krypton for a number of other reasons. If you think the header is too tall for your taste, just remember that you can make it shorter via Code Injection, it’s very easy. Examples:

Hydrogen:

#title h1, #title h1 a {height:120px !important;}

Krypton:

#title {height:120px !important;}
— ✻ —

Tips for embedding twitter on your website

Sandvox has had (it’s gone now with version 2.7.7) an useful “twitter” object for embedding a twitter timeline on your website with just a click.

If you’re looking for something more sophsticated, you can use an HTML raw object to use twitter’s own presentation and have a finer control on what’s published. Moreover, you can also embed a single interesting tweet anywhere, for example inside a post.

The default Sandvox object depends a lot on the design you’re using and you may be not completely satisfied with how it looks:

The default Sandvox Object

First of all, let’s go into your twitter account and open your settings:

Twitter settings

Create a new widget: – Read more »

— ✻ —

A different use for the blockquote object

This is a tip – particularly useful for coders – sent by my customer Jörg (thank you!) that I’d like to share.

If you already know that you don’t need the “blockquote” object, you may find an alternate use of it. In this example, we will use it as a ready-made object for code. Of course you could add a raw html element and embed your code inside a “pre” tag, but it’s more work.

You can find any other use of your choice of it, if you have some recurring content that needs its own presentation and you still want to keep things simple and handy and avoid repetitive tasks.

In this example, we’ll accomplish this result using Hydrogen.

First of all, we need some insight into the code; there are many options: you can export your site and look through the main.css file, browse it from a browser and use its own Web Inspector or do the whole thing in Sandvox. We’ll try the latter, so we must activate the Web Inspector directly into Sandvox from the preferences dialog:

Go to Sandvox Menu > Preferences and check “Show Developer menu in menu bar”. Then, relaunch Sandvox.

Create a blockquote object, select some text and right-click on it. Choose “Inspect element” from the contextual menu: the lower side of the window will show the insights we need (clock on images to see them larger).

Inspect the blockquote object – Read more »

— ✻ —

How to use a custom Banner

Since this is a very common request, I decided to write a post about it to clarify how banners work in Sandvox.

Many designs come with a choice of ready-made “banners” or “gradients”. For gradients, you can skip directly to this tutorial (the principle is the same).

Banners are simple jpg images, sized to fit exactly into the header. Each design has its own header size and behaviour. For “behaviour” I mean that images that have a different size may be stretched or tiled to fill the whole space available: it depends on the design itself.

If you want to create one on your own, the best choice is to create an image of the size of your header (you can find it on individual design’s pages) – this way you’re sure that your image will not be stretched and will look exactly as you want it to be.

If you want to use one of the provided banners (or any image you have created), this is the Inspector panel you are looking for:

Ignore the “design-supplied” option: this just means that the default header is displayed.

A banner is an image located somewhere on your Mac: it’s not “inside” Sandvox nor inside the design: it’s just a regular file. So:

  • Open the Inspector
  • Choose the second tab (Appearance)
  • Choose the “Image fill” under the “Banner” section
  • Click on “Choose…”
  • Locate the image on your Mac

And that’s it!

— ✻ —