How to create your own style

Create a new theme for storytlr

There are many different approaches to define html and Cascading Style Sheets or CSS. Our choices have often been based on achieving consistent behaviour across the following browsers: Internet Explorer 5.5 / 6.0, Internet Explorer 7.0, Firefox 2, Firefox 3 and Safari. In some cases we have reverted to ‘old techniques’ (like using tables for tabs instead of list items) to avoid the use of many CSS hacks and get good font scaling behavior. We hope you can achieve what you want with our design choices. If not, please let us know.

Storytlr uses different stylesheets

We have created two different stylesheets for the contents of the pages and the theme itelf. This way you can easily modify the theme without having to deal with the content part (this is a more tedious job). Each theme uses a content stylesheet that you can import in the Full control theme (see below).

Please note! The stories have a separate stylesheet that is currently not customisable.

How to achieve certain goals

If you are not a CSS guru yet, maybe these tips can help to get you started with a few basic customisations. If you want to learn more we suggest you have a look at the CSS tutorial of Web Monkey.

Hide the title

h1.title { display: none; }

Hide the description

div.description { display: none; }

Hide header image

div#header-wrapper { background-image: none; }

Change the width of the page content container

Use your desired width in pixels.

div#page #left-column { width: 530px; }

Change the width of the tab menu

Use your desired width in pixels. Please note that the number of displayed tabs is determined by the theme, the rest will be available in a popup. The Full Control theme displays 8 tabs.

// The width of the complete menu
div.tabMenu, div.tabMenu table.tabMenu{ width: 500px; }

// The width of the menu-items, if text does not fit it will become bigger
table.tabMenu td.inactive, table.tabMenu td.active { width: 70px; }

Use default content container stylesheet

This is only relevant in case you use the Full control theme.

`@import "../../style/public.css";`