Smart skins format

The Smart skins are one of our most used templates. In this guide you will find tips and tricks for getting the most out of your creation.

The skins contain two main content holders: A #content div, a #scalableContent div. It also has a #sharedBackground div for a large background image. We will go through each div below. 

#content

The #content holder always has the same width as the visible width. Meaning, while the skin starts out as a 640x1500, part of the skin might not be visible on smaller screens or wider sites. This results in having a smaller #content div.

As an example. Your screen has a width of 1920px and the content of a site is 1000px wide. This means that you have half of 920px left for each skin. So each skin is only capable of showing 460px while both skins are each 640px wide. The #content div will resize itself to match that visible width of 460px.

Before the latest skin update this meant that you had to use JavaScript to position your elements based on the available width.

After the latest skin update you can now also use @media queries in CSS.

#scalableContent

The #scalableContent holder scales its content based on the available visible width and height to make sure that the content inside the div is always completely visible.

This scaling is done by adding a CSS transform: scale(amount) to the #scalableContent div. This will ensure that the content inside the #scalableContent always retains its aspect ratio.

#sharedBackground

The #sharedBackground holder is a div that is shared between the skins and the header. If you have entered an image name in the BG_image variable in the skinLeft.html file then both skins and the header will load that image and position it so that it is seamless between the 3 layers.

You should not directly add content to this div. It is purely there for the BG_image.

Use the #sharedBackground in combination with other content. The #sharedBackground should not contain important content like CTA's and text as it displays differently on each website.

The #sharedBackground can be used in combination with both the #content and #scalableContent holders.

How to pick the right content holder

This all depends on what you're working with.

• Do you only have 1 image as your entire content? Then adding that image to the #scalableContent div is probably the best option for you.
• Do you want your content to always look the same, no matter the size? Then using the #scalableContent is the way to go.
• Do you want to change the positioning, sizes and/or images based on how much room you have? Then the #content div is the holder for you. This is the best place to use @media CSS or JavaScript to position your content.