ClickHelp User Manual

GIFs Border and Shadow

From this topic you'll learn how to add a shadow and border for the GIFs animations you insert into your topics. The same approach can be used for other image formats. Here are the steps:

The approach described in this topic works for online documentation only.
  • Open your project CSS file. The quick way is to open your topic and when you are in the Design mode, click the Edit Style button in the Styles section of the Home tab of the ribbon bar. This button will open the very first CSS file from the Project Styles list. 
    The Edit Style button on the Home tab of the Ribbon bar
  • Add the relevant CSS class and effects. In our case, it looks like this:
    /* Gifs */

    box-shadow: 10px 5px 5px gray;

  • If you want to add a border, your code will look like this:
    /* Gifs */

    border: solid;

  • Then open your topic with a GIF and click it.
  • Click Image Properties...
    Click an image (GIF) and click the Image Properties link
  • Choose the created CSS class for your GIF.
    Choose the created CSS class for your GIF in the Style settings
  • Click OK.
  • Here is the result:
    The GIF with the shadow in the View mode