Page Comparison

...

...

Organization Manager (admin.styla.eu)

The Organization Manager tool in which you create new organizations, fronts and users, is also where you configure CSS per front. You do this in the THEME SETTINGS and MODULE SETTINGS tabs:

...

Any JSON you enter into the Organization Manager or Editor will be validated before saving. If it's invalid the changes won't be saved and will be lost, so if you're planning to enter a big chunk of JSON into the editor, better validate it somewhere else beforehand or back it up. The best approach is small incremental changes.

...

{
    "TEXTONVIDEO": {
        "styles": {
            "ctaLink": {
                "all": {
                    "border": "2px solid",
                    "fonts.formats": "button",
                    "padding": "14px 22px",
                    "transitionDelay": "0s, 0s",
                    "transitionDuration": "0.25s, 0.25s",
                    "transitionProperty": "background-color, color",
                    "transitionTimingFunction": "ease-out, ease-out",
                    "WebkitFontSmoothing": "antialiased"
                },
                "smallScreen": {
                    "textAlign": "center"
                }
            }
        }
    }     
}

Setting up Module Presets

If your client need several appearance variants of the same module and cannot achieve it with the default set of presets available for every client, you will need to create a set of custom presets for them.

As the Editor features a UI to create and manage such presets, clients themselves can create presets there. But the usual UI in the Editor does not enable them to apply any CSS property to any HTML element. Therefore, you will need to set up some more advanced things directly in module JSON data.

Here’s how you create a preset:

1. Log in as the target user/domain, click your user name top-right, then "Preset Manager" on the overlay menu.

2. Click "the Create" button top-left of the list. Then select module type from the dropdown, fill in the new Preset's name and click "Create" bottom-right.

3. Configure any CSS properties you can with the usual Editor UI on the next screen and click "Save changes" top-right.

4. Anything you cannot configure with the UI, you need to enter into this module's styles JSON directly.

5. Click the "edit as JSON" button bottom-left or simply add /json to the page's URL and then add nodes for HTML elements and their CSS properties as you'd do in the domain's Module settings.

Once you are done, save the changes and check desktop and module preview if the modules looks all right. You will probably need to go through several iterations.
Once this is done, the CSS and other settings from the preset you've just created can be applied to any other module of the same type with the "Presets" dropdown in the "Settings" tab. They will be saved in the "presets" node of its JSON data and merged to any other CSS it already has set. In case the same CSS property is set differently on both of them, the original settings in the module will prevail, being on a lower-level.

The preset that you've created will be available in the "Preset Manager" until you remove it. You can modify its JSON data and the changes will be reflected on any module you apply the preset to. The changes won't be automatically reflected on the modules you'd applied the preset to before. You'll need to re-apply it.