Add Static Resources
Now that you have a basic web site with some out-of-the-box features up and running and have configured the required image variants, there is one more thing you need to do before you can start adapting the templates to the web design.
Locate static resources
The HTML web design (see Introduction for up-to-date download link) makes use of several static resources. These can be split into four categories:
- CSS style sheets
In the folder structure of the web design these resources are located in the following folders:
In your Hippo project you can find corresponding folders (except for images) under bootstrap/webfiles/src/main/resources/site:
Add the Static Resources to your Project
Copy all contents of the css folder in the web design to the bootstrap/webfiles/src/main/resources/site/css folder in your project.
Copy all contents of the fonts folder in the web design to the bootstrap/webfiles/src/main/resources/site/fonts folder in your project.
Copy all contents of the images folder in the web design to the bootstrap/webfiles/src/main/resources/site/images folder in your project.
Copy all contents of the js folder in the web design to the bootstrap/webfiles/src/main/resources/site/js folder in your project.
Don't worry about the files already in those folders in your Hippo project. You can overwrite the ones with the same names as the files you are copying, and leave the other where they are.
Update the Web Files Whitelist
Open the file bootstrap/webfiles/src/main/resources/site/hst-whitelist.txt in your project. This file contains a whitelist of web files that should be publicly accessible. By default it contains:
css/ fonts/ js/
Add the new images folder to the list so it looks like this:
css/ fonts/ js/ images/
Adapt the Base Page Configuration to the Web Design