Log in  \/ 
Register  \/ 


create new styleLet'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. But in order to make it your own you have to add some subfolders with the needed style information.

NOTE: The easiest way to create a new style would be to copy one of the current styles (ie. Blue). Then rename it. For example, you could rename it to mystyle. Now you have a good starting point. You can then edit the files in the new "mystyle" folder to create your new style. This is the best way to get a custom look. You could edit a current style, but if you ever want to update the template, your edits will be overwritten. Creating your own style allows you to update the template without having your custom style overwritten.

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 template? 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 template, 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 template 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 template settings. To active the new style go to the template 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.


Your cart is empty.