Now, let’s correct the problems we have with missing assets. First, we need to actually make sure the assets we need are present in the theme. While you could take this time to determine which stylesheets and JavaScript files you’re actually going to need, I like to do that later. Instead, just copy all of these assets from the source theme directory into our theme, and sort it out later.
Move these into the theme. Make sure you’re moving them into the theme_dreamrs directory, and not the outer package. Your package should now look like this.
Now, using your favorite browser, load the page and find the developer tools that let you inspect which assets aren’t being loaded properly. Here’s what mine looks like:
There are actually a lot more displayed below that haven’t scrolled into view. Why aren’t these loading, even though we’ve now moved the stylesheets and JavaScript files into the theme? Because their relative paths are no longer valid -- they’re in a much different relative location now that they’re in a Concrete CMS theme. So let’s correct that.
Find every relative stylesheet imported, and make sure that <?=$view->getThemePath()?>/ is placed before it. This method, which is present on the Concrete\Core\Page\View\PageView object that’s automatically in scope in the PHP template file, outputs the relative directory to the Dreamrs theme. This method is reliable -- it will work whether the theme is installed in the local Concrete application/ directory or within a package.
Now, let’s do the same for the JavaScript that’s loading in the footer of the page. Open up footer.php and scroll to the bottom.
There’s a lot happening here -- and we may not ultimately use all of these JavaScripts. But for the time being, let’s just fix the import of all of them, and sort out which are truly required later.
Finally, let’s fix some of the images that aren’t being found. Just add <?=$view->getThemePath()?>/ into any <img> tags. In the header:
and in the footer:
Finally, let’s remove the “Hello World” from our Full page template, and reload the page.
Looking good! We now have a functional, rendering header and footer. But since these footers are fully static, there’s no way the Concrete editing toolbar can bolt onto this page, rendering it un-editable through the CMS. That won’t do. Let’s fix that.