Create a new style

Style Structure

Let's create a new style we call fresh. To do so we have to create a new style directory /styles/fresh. That's it! We created a new style which looks the same as our default theme.

Add your own layout markup

We can override the default layout /layouts/template.php file, by putting a new layout file right here /styles/fresh/layouts/template.php. Now you can start customizing it.

Add your own CSS

Next you can add your own CSS /css/layout.css file, by copying it to /styles/fresh/css/layout.css. The fresh style would now load its own layout style sheet. But what if you only have one small modification? For example you just want to change one color. Do you have to copy the whole layout CSS from the default theme? No, just import the /css/layout.css by using @import url(../../../css/layout.css); and add your small modification. You have full control over which CSS assets you want to include from the default theme, from the core framework or neither.

Important: If you do copy the /css/layout.css file to your custom style, make sure to correct the import path at the top of the file.

@import url(../../../warp/css/layout.css);

Useful override sources

This way you can inherit or override any resource from the default theme like the StyleSheets, JavaScript module or system markup files. A style directory can contain:

  • /styles/fresh/layouts/ (Template files, HTML, PHP)
  • /styles/fresh/images/ (Image files)
  • /styles/fresh/css/ (CSS files)
  • /styles/fresh/js/ (JavaScript files)

The newly created style should now be available in the theme settings. To active the new style go to the theme administration and look which default profile is activate. Click on the profile tab and select your active profile. Now choose your newly created style in the style option.

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!