Grafite

Lake

Grafite is a design with an overall dark look. It's suitable for many purposes but it's a pity not to use it for photo galleries: in fact photos look gorgeous!

Bordered pagelets sport a modern, light grey design with a delicate 3D effect. The white, main text is slightly larger than usual, to improve readability on a dark background.

Photo pages

Photo pages have a minimalistic but elegant design: the header is hidden and the site menu is reduced to be unobtrusive. Pictures keep your visitor's focus, nothing else.

Grafite Mini

If you need just a simple and neat portfolio of your images (or movies), try the bonus design "Grafite Mini" (see the demo), which extends the photo page layout to the whole website.

Other features

Grafite supports custom logo and bordered pagelets and callouts. Moreover, you can usa a 150 pixel tall image as a gradient for your header (just select it as a banner). Seven gradients are provided (see the demo). You can also use a 900x150 pixel image that will fit exactly into your header.

Perfectly compatible with Explorer 6 & 7, Grafite sports as usual some pretty extra-features for modern, CSS2 & 3-compatible browsers (text and box shadows).

Sandvox Pro customization

If you are a Sandvox Pro user, you can use few lines of code to cutomize a single page ("Site » Page Code Injection...") or the entire website ("Site » Site Code Injection..."). Insert your code into the upper field of the "Head Area". Of course you can put multiple statements between <style> and </style>

Here are some examples (check the blog for other tips and tricks):

To change the header background to a solid color:

With different injections in different pages you can differentiate single pages of your website using a solid background color for your header (a dark red color in this example).

Site injection
<style>
#title {background-color:#700 !important; background-image:none !important;}
</style>
To align the sitemenu on the left side:
<style>
#sitemenu ul {text-align:left !important;}
</style>
To align the header on the right side:
<style>
#title {text-align:right;}
</style>
To change the default font

Lucida Grande, the default font for Grafite, has no italic style. If you use italic a lot, you'd maybe like a different font family (Trebuchet in this example) for the main body of your website.

<style>
#main {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif !important; font-size:120% !important;}
</style>

Version history

1.1 - 2010-02-10

1.0.1 - 2009-11-20
The image used for the rollover effect in site menu is now preloaded (previously there was a delay when the mouse was hovering for the first time).

Price and requirements

Price: $ 9.00

Requirements: Sandvox 1.6.