This is an old revision of the document!


Custom CSS

You can modify the css/custom.css to design the site to your own colours.

This stylesheet is loaded at last, which means that you can override any style from there.

Bootstrap Based

Our site template is mainly based on the industry standart Boostrap CSS that is used by many major sites, including Twitter (who created and use it).

One of the main advantage of using Bootstrap is that it is fully responsive by default. This means thats pages will automagically adapt to any browsers page size, including mobiles, tablets and desktop computers.

Therefore, when you design your site, keep in mind to always check your pae, with various page width to be sure it is still nicely displayed on any devices. But if you wish to bypass this functionnalily ala old-school way, you could simply set a fixed 'container width' in your CSS

Using Bootstrap premade themes

If you're lazy designing your own CSS, you could start from one of the many bootstrap theme available on the web.

You will find some there:

BTW be aware that despite we based our template on Bootstrap one and as you wont be able to alter the page HTML layout, we cannot warranty that ANY commercial template will nicely adapt to your site.

To quickly test an external Bootstrap theme, you can simply add this to your custom.css file at top:

/* Import superhero BootStrap Theme EXTERNALLY from MaxCdn */
 @import url("//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/superhero/bootstrap.min.css");

If you are happy with an external theme, we strongly suggest you to NEVER rely on a call from an external server (except a well established CDN) because in the case it fails to respond, your site will load slowly and be ugly without this css. You would rather copy the css (and all its dependencies) to a subfolder of your css directory, ie like that:

/* Import superhero BootStrap Theme from a LOCAL superhero_theme sub-directory */
 @import url("superhero_theme/bootstrap.min.css");