DriveWorks Pro 22

How To: Change the Loading Gif in DriveWorks Live (KB18081402)

How To: Change the Loading Gif in DriveWorks Live

DriveWorks Live displays a loading Gif overlay when tasks are being performed on the DriveWorks Live server.

This could be the loading of a DriveWorks Specification or Transitioning the Specification.

Example:

By default DriveWorks Live shows the loading Gif above in the Web Theme for each Skin.

To add your own custom loading Gif to the DriveWorks Live Web Theme follow the steps below.

Adding a Loading Gif to DriveWorks Live

Adding a loading Gif to DriveWorks Live requires a custom Skin. Make sure you copy a Skin from the system folder and paste it into the custom folder and rename it, before making these changes.

Steps:

1. On the DriveWorks Live machine, navigate to C:\ProgramData\DriveWorks\<DriveWorksVersion>\Live\Themes\Web\content\custom
2. Create a new folder in this location called "images".
3. Copy your loading Gif file to this new folder.
4. Next, navigate to C:\ProgramData\DriveWorks\<DriveWorksVersion>\Live\Themes\Web\system\css
5. Open the file called core.css.
6. Find the class called ".loadingOverlayProgress".
7. Copy the CSS class to your clipboard. The data looks like the following:

   .loadingOverlayProgress {
       position: relative;
       padding-top: 16px;
       height: 20px;
       width: 100%;
       font-size: 15px;
       background-image: url('../img/progress.gif');
       background-repeat: no-repeat;
       background-position: center top;
    }

   Make sure you include the curly brackets and the full stop at the start of the class.
8. Next, go to your Custom Skin folder. This can be found here: C:\ProgramData\DriveWorks\<DriveWorksVersion>\Live\Themes\Web\content\custom\skins
9. In your skin, you will have a file called skin.css. Edit this file.
10. Find a gap between two CSS classes and paste in your copied CSS.
11. Next, change the background image URL to be '../../images/GifName.gif'.
    This path is relative to the CSS file. The ../ indicates that the file location is up a folder. This is done twice because the loading gif is located 2 folders above.
12. Change the GifName to be the name of your actual loading Gif file.
13. Save the skin.css file.
14. Restart DriveWorks Live or your IIS site.
15. If you are using IIS, you may need to recycle your Application Pool.
16. You may also need to clear your browser cache to see the change. Ctrl + F5 will force the browser to refresh and clear it's cache.
17. Once modified, you may to change the height property to allow your new Gif to fit inside the HTML element.

    For example:

    height: 90px;

After this change, you should see your new loading Gif appear in your browser tab when visiting your DriveWorks Live site.

Loading Gif's can be downloaded from websites or created using applications such as Photoshop.

You can download loading Gifs from Loading.io.