Override Image Effect CK with your own styles

There are a lot of predefined effects in the plugin that you can apply on your images. But if you could modifiy them in a secure way, and add your own ? This is possible !

You can create your own css file and use the override system so that it will not be losted by a future update, and you can create a JSON file to list your own css classes to use.

Note that this method is useful for designers who want to control the elements using their own CSS rules. If you are not a CSS expert of if you want to save  lot of time, you can use the complete styling interface with Image Effect CK Params.

How to override the CSS file

Copy the file that is located in the "media" folder of your website :

[site]/media/plg_system_imageeffectck/css/imageeffectck.css

Paste this file into your template, in

[site]/template/[template]/css/plg_system_imageeffectck/imageeffectck.css

Using this method you can edit and modify the CSS file to use your own color, and styles. You can also add your own effects.

How to add your own effects

You can add your own styles in the CSS file by creating your own CSS classes. Example if you want to add a "vintage" effect, you can use these CSS

.vintage {
    transition: filter 1s;
    filter: brightness(0.8) grayscale(2);
    transition-delay: 0s;
}

.vintage:hover {
    filter: brightness(1) grayscale(0);
}

then you can declare the effect to be listed in the editor button. Create a JSON file named "imageeffectck.json" in the same override folder as your CSS file (see image above). Create a JSON string with using the following structure :

{
    "onlythislist" : "false",
    "effectscklist" : {
        "Vintage" : "vintage",
        "My other style" : "otherstyle"
    }
}

onlythislist : boolean value to tell if you want to add your custom effect to the existing ones, or if you want to show only your styles

effectscklist : list of all your effects listed by "name : class" pair. The name will be used to show in the list of effects.

Overview of the effects list with the setting onlythislist to False

Overview of the effects list with the setting onlythislist to True

If you don't know how to create a CSS class or if you want to speed up your work, you can use the Image Effect CK Params to create the styles directly into the interface with a direct preview. The styles created by Image Effect CK Params will also be listed in the list, in the same way.

Note that the effects list is available thourgh the editor button, when using Image Effect CK Params.

Download Image Effect CK

Download Image Effect CK Params