All themes live in the LiveWhale folder on the website front-end, or: webroot/livewhale/theme.
Inside the /theme folder, you’ll find a /core folder that like the back-end /core shouldn’t be modified. (We’ll overwrite your changes on the next patch or update.)
You’ll also find a /global folder. The /global folder is available so that you can add to or replace the LiveWhale defaults in /core for any page that does not specify a theme. (There will be more on the methods of overriding in a moment.)
In addition, you can create as many other themes as you like just by creating a new folder in /theme and adding/copying the modified versions of resources to your new /theme folder. Then, to apply your custom theme to a page, just add <xphp var="theme">your-theme</xphp> to the page, typically in the <head>, where your-theme is the folder name inside /theme. Capitalization does matter, so be mindful of that.
Any custom theme(s) and /global are partners, so changes made in /global will not be inherited by any custom theme. In other words, all themes inherit from /core equally.
In select cases where you also use lesscss as part of your development process, you may opt to use a hybrid technique. For instance, the calendar.css is already included when the events_calendar widget appears in a page, and adding additional files would add it site-wide, and not in a targeted fashion. You can create a new calendar.less that simply @imports the original calendar.less in /core and modify the output as needed with subsequent rules. Your theme calendar.css has all the benefits of the original, with your modifications
Resource Load Order
Since CSS load order can be important in some cases, understand that all /core styles are loaded first in the order dictated by LiveWhale. When you replace /core styles the replaced file in that original order, as if it was /core. Additive styles are loaded last. For example, assuming the following:
theme/core/styles/foo.css theme/core/styles/bar.css theme/my_theme/styles/foo.css theme/my_theme/styles/foobar.css
The load order for the files could be either of the following, depending on what the real foo and bar are:
theme/core/styles/bar.css theme/my_theme/styles/foo.css theme/my_theme/styles/foobar.css
theme/my_theme/styles/foo.css theme/core/styles/bar.css theme/my_theme/styles/foobar.css
Why Use Themes?
As ever, you can manage your design and styles as you see fit, so you can keep all of your design and functional files located outside the theme. However, themes give you a little simpler control over the organization, auto-aggregation and minification LiveWhale has built in, without having to craft urls.
From our own recent work, we’ve also found it’s a great way to refresh a design, as you can create a new template that has the new theme, and then apply that to pages as needed. The theme keeps the new design segmented to the area you want easily while you continue work.