LiveWhale CMS

Welcome, Guest Login

Support Center

Our documentation is moving: docs.livewhale.com

Please check docs.livewhale.com for the most up-to-date LiveWhale CMS and LiveWhale Calendar documentation. The below legacy documentation will remain available as a reference until the documentation migration is complete.

LiveWhale Themes

Last Updated: Oct 16, 2015 12:32PM PDT

Front-end theming gives you the ability to allocate a set of styles and function to any page on any LiveWhale-powered website. You should be familiar with CSS, javascript and HTML and have SFTP access to the server in order to work with themes.

Theme Folders

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.

Theme Inheritance

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.

To update or modify /core resources in either /global or /your-theme, you copy or add files in the same folder structure as that in /core. Files in /your-theme that are exactly the same filename fully replace the core file completely. If however, you add a file that does not exist in /core then it is additive. (This is more applicable to CSS and javascript.)

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

OR

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.

eb8f96c071020d8b0923da726d6cab65@livewhale.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete?b_id=4256