How do I customize the design of VIMP to meet my needs?

If you want to customize the design of VIMP to your individual style guide, there are basically two recommended ways to do so.

Custom skin

VIMP offers the possibility to customize the default design of a template with skins. Skins are custom CSS files that are added to the default CSS and supplement or overwrite it.

To do this, first select the template you want to use for your VIMP frontend. In the following we start from the Ocean template.

Then create a new CSS file in the templates/ocean/css directory that names your own skin. We'll call the file "myskin.css" here as an example.

Then edit the /templates/ocean/template.yml file with a text editor and add the filename of the skin you just created as a new parameter for the "skins" key:

templates:
  ocean:
    name:           Ocean
    engine:         PHP
    skins:          [default, accessibility, myskin]
    layouts:        {default: layout.php, embed: embed.php}
    application:    [frontend]
    mobile:         false
    separator:      '::'

Done - now you just need to clear the cache on the server:

./vimp cc

and then you can select the new skin in the backend under Configuration -> Basic -> Templates -> Template Skin.

Important note:

In VIMP versions lower than 6.x, please use the command ./symfony instead of ./vimp in the code above.

Changes you make in the myskin.css file are then applied immediately and are update-proof (which means your own skin file is preserved even after an update. You only need to restore the entry in the template.yml file after an update).

Custom template

If you want to change not only colors, spacing, fonts, i.e. not only the CSS, but also implement small functional changes or larger layout changes that require HTML changes, then create your own template for this purpose.

We recommend copying an existing template as a base. How to do that is described in this article.

Your own template is also update-proof, but you will always have to manually copy any changes that a new version may bring to the template into your own template. This makes an update a bit more time-consuming, but it also gives you more options for customizing your frontend.