IntraWeb has a template layout control which allows mixing of HTML and IWML for a section or an entire page. However if you want to apply a global style to all pages you can turn the loader html into a template. This affects the entire application by default because IntraWeb creates Single Page Applications (SPA).
We made the loader HTML in the first step of our tutorial but have not modified it since. To keep things simple we are not going to use external files, images or CSS. But this is a normal HTML file, in the real world you can use all of those in your loader HTML.
Modify Index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"> <script src="IntraWeb.js" data-target="MyApp" data-Source="*"></script> </head> <body style="background-color:#E6E6FA"> <H1>My IntraWeb App</H1> <div id="MyApp" style="position: absolute; left: 75px; top: 75px; border: 3px solid green;"></div> </body> </html>
With the addition of the data-target attribute to our loader, we can tell IntraWeb to load our application into a specified HTML element. When we run it, it now looks like this:
