Snippets:

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, […]

Add a search box to your website

A 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 […]

Change metrics for Carbone and Grafite

Carbone 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 […]

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 […]

How to create round images

Round 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 […]

Lithium: change header colors

Lithium comes in three flavors (dark blue, green and red), but this doesn’t mean you can’t have your header in pink or yellow with a bright red text (or maybe something more subtle…). The code for customizing your header is quite simple. Here is an example. This, to change the background to a solid black […]

Lithium: prevent the banner from tiling

Lithium’s header is full-width. This means that its width is fluid and varies according to the browser window’s width (which is, of course, variable and unpredictable). The only option you have to customize this part of your website is using a solid background, a pattern or a gradient because the image will be tiled to […]

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 […]

Tips for embedding twitter on your website

Update (2013-05-31): this post has been updated to reflect recent changes in how twitter handles widgets. Sandvox 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. You can still use an HTML raw object to use twitter’s own presentation and have a […]

A different use for the blockquote object: code!

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 […]