Find articles, videos and help to use Spotler to the max.
  1. Spotler Help Center
  2. GatorCreator
  3. Email Design

Articles in this section

See more

Custom CSS in Email Design

The use of Custom CSS is one of our newer features within our Drag & Drop Editor for GatorCreator.
Custom CSS can be applied to individual blocks using multiple classes.

We strongly advise that if you want to use this feature you have an advanced knowledge of CSS. This is to ensure you do not cause design issues within your email designs and templates.

CSS Overview

When using the Custom CSS feature you must do so in this order.

First, click into the block itself and type in the class name, located under the 'Block Style' tab.
Then you can go into the 'Page Style' tab, select 'Add Custom CSS' and add in your CSS for each class specified.

 

Adding CSS Classes to Individual Blocks

First you need to add a CSS Class to the required block. If you wish to add multiple classes then please separate them with only a space.

 

 

Adding in your Custom CSS

  1. To add in your CSS make sure you have not got an element/block selected then click on 'Custom CSS'. This will bring up the above box.
  2. Add in your CSS.
  3. Select 'Add Custom CSS'.

 

Things to remember...

Any styling added to blocks and elements in your email design via the side bar have a higher display priority than the custom CSS you set.
So if an element is not displaying as styled you need to check the side bar design features aren't overwriting your CSS.

  • If you add a background colour and it isn't appearing make sure to check that the background colour in that block under 'Block Style' is set to none. If you do not do this then the colour set in Block Style will override the custom CSS you have added.
  • If a border is set to 'solid' with a width of '1' you will only be able to change the colour of the border. The border width and style cannot be overwritten by CSS.