Even though the USoft Web Designer has default stylesheets and scripts, every now and then you want to add new files. In this blog I will explain how to add new scripts and/or stylesheets to your project.

File location

When adding the files it is important to know that these are to be placed in the ALT folder of the Web Designer publication. To get the location of the ALT folder simply open the Web Designer, open the ‘Publish’ tab in the menu and click on ‘Publication Configurations’

After clicking the ‘Publication Configurations’ in the menu, the following image should appear on your screen and in here you should find the path to your ALT folder (which you defined yourself by creating the publication).

Copy the link of the Alt Template Folder from the Publication Configuration and paste it in the windows file explorer. Your are now in your ALT folder.

Create files

Now that you’re in the ALT folder, create a new folder called ‘Website’. When this folder is created, open it and inside create either a css folder, a js (JavaScript) folder or both.

When the folder is created we can create the new files. For this example, let’s create a css file. Open the css folder and create the new css file inside.

Add the files to your application

The last step of adding the files to your project is to add them to the application.html file, located in the USoft installation folder. To get there, navigate to <installdir>\PageEngine\templates\WebSite’ and copy the application.html. Next, paste the application.html file inside the Website folder in your ALT folder.

Once its inside the ALT folder, open the file and scroll down. The next thing to do is add a new line with the name of your new css file.

<link rel="stylesheet" href="css/CustStyle.css" type="text/css"/>

<link rel="stylesheet" href="css/MyCSS.css" type="text/css"/>

Note that the folder you created which contains the new css file is the same as the folder in the href. The example below shows how to add a javascript file instead of a css file.

<script custom type="text/javascript" src="js/CustScript.js"></script>

<script type="text/javascript" src="js/MyScript.js"></script>

You can now use the scripts and stylesheets in your project, good luck!