Customizing the Back-end

Adding Back-end CSS and JS

You may want to load custom CSS and JS on the back-end pages of your LiveWhale installation. Some administrators use this custom CSS file to hide sections or options that aren’t in use on their site, to simplify things for their site editors.

Since 1.6.1

You can save a backend.css or backend.less into _ingredients/backend/ and it will be loaded for all logged-in LiveWhale users on the Dashboard or any other managers or editors. You can also put a backend.js in that same directory for the same effect.

1.6 and Earlier

In 1.6 and earlier, you can load custom CSS and JS using a module like the following:

/livewhale/client/modules/custom_backend/private.application.custom_backend.php

$_LW->REGISTERED_APPS['custom_backend']=[
    'title'=>'Custom Backend',
    'handlers'=>['onLaunch']
];

class LiveWhaleApplicationCustomBackend {
    public function onLaunch() {
        global $_LW;
        $_LW->REGISTERED_CSS[]='/path/to/my/backend.css';
        $_LW->REGISTERED_JS[]='/path/to/my/backend.js';
    }
}

Setting a Custom WYSWIYG CSS style

Customizing the Block Formats

You can add or remove from the drop-down formatting options by doing the following

Open the LiveWhale public client config (/livewhale/client/public.config.php) using an FTP client or via the command line.
Locate the style_block_formats setting and edit as needed:

1	$_LW->REGISTERED_APPS['pages_editor']['custom']['style_block_formats'][]=['h1', 'h2', 'h3'];

Adding Custom Styles to both the Page Editor and Backend Editor

Now you may set these values in global.config.php and it will be used by both the backend and the page editor, via the equivalent settings:

1 2	$_LW->CONFIG['STYLE_FORMATS'] $_LW->CONFIG['STYLE_BLOCK_FORMATS']

You can either add elements to the default lists, for example

1	$_LW->CONFIG['STYLE_BLOCK_FORMATS'][] = 'blockquote'; // (default: p, h2, h3, h4, h5, h6)

Or you can replace the default array to disallow certain options

1	$_LW->CONFIG['STYLE_BLOCK_FORMATS']=['p','h4','h5','h6']; // (remove h2, h3 options)

Adding Custom Styles to only the Page Editor

Custom styles can be configured for the styles menu on the pages editor WYSIWYG toolbar by defining an array of styles in your private config file.

Open the LiveWhale public client config (/livewhale/client/public.config.php) using an FTP client or via the command line.
Locate the style_formats setting and edit as needed:

$_LW->REGISTERED_APPS['pages_editor']['custom']['style_formats']=[
     ['title'=>'Table styles:'],
     ['title'=>'Data table (borders)','selector'=>'table','classes'=>'data'],
     ['title'=>'Text styles:'],
     ['title'=>'Small type','selector'=>'p,h2,h4','classes'=>'font-small']
);

The “selector” attribute defines the valid selector for the style (multiple selectors can be listed as comma separated). In this example, the custom style is valid for paragraph elements. The selector also impacts the context for the style’s availability. A selector for table elements will appear on in the table WYSIWYG interfaces. A selector for a links will appear in the insert-link interface, and so forth.

The “classes” attribute defines the class name to be applied to the element. (This also supports multiple classes, separated with spaces.)

Note: In some cases you may also want to use the “inline” or “block” attribute. These specify an inline or block tag to be applied to the selector.

If only title is defined, a non-selectable divider will be added to the drop-down list with the specified text.

Using a Custom Stylesheet for the Back-end WYSIWYG Editor

You can customize the style of the WYSIWYG back-end editor by adding a wysiwyg.css (or .less, if your server supports it) to your site. Since 1.6.1, the recommended location for this file is /_ingredients/backend/. Then, edit /client/global.config.php to add the following line:

1	$_LW->REGISTERED_WYSIWYG_CSS=['/_ingredients/backend/wysiwyg.less'];

Using Custom WYSIWYG Templates

In LiveWhale 1.7.1+, you can upload custom templates that editors can then easily insert into editable areas using the TinyMCE “Templates” functionality.

These re-usable code blocks might include:

column markup
special button styles
any other any other re-usable HTML you don’t want your editors to need to copy and paste

For static HTML that users shouldn’t be editing, consider using a file widget—but, if you have code that needs to be inserted and then edited, custom templates might come in handy. Here’s how they work:

Create a template (wysiwyg.my-template.xml) with a name, description, and your desired code block, and upload it to _ingredients/templates/wysiwyg/.

e.g., _ingredients/templates/wysiwyg/wysiwyg.2-columns.xml

<widget type="template">
<title>2 Columns</title>
<description>2 columns of text inside a light gold box</description>
<content>
<div class="alert alert-warning">
    <div class="columns">
        <div class="col-1-2">
            <h2>Header</h2>
            <p>Insert some text here</p>
            <p><a href="#" class="more">Optional Link</a></p>
        </div>
        <div class="col-1-2">
            <h2>Header</h2>
            <p>Insert some text here</p>
            <p><a href="#" class="more">Optional Link</a></p>
        </div>
    </div>
</div>
<br />
</content>
</widget>

LiveWhale will then parse all the template files in that directory and will add a “Templates” button to the WYSIWYG toolbar:
When an editor clicks that button, a modal popup will give them a drop-down list to choose from all available templates (listed by the <title> tag). When you select one, its <description> appears underneath, as well as a preview of the code (<content>).
Then, the editor can choose to Save and insert the selected template code, or cancel.

You can upload any number of XML templates to _ingredients/templates/wysiwyg/ following this format.

Choosing who receives help emails from the dashboard

On the Dashboard there is a form called Feedback (“Have a question, or having trouble? Contact support using the form below.”) If left unconfigured, messages will go to our team at support@livewhale.com.

However, frequently, your faculty and staff might use that form to ask day-to-day questions that your team can answer in-house. To configure that form to instead reach your help desk or communications team, edit the following line in /livewhale/core/config.php:

1
2

// Specify the e-mail address for the support staff. Feedback requests from the Dashboard are sent here, and defaults to support@livewhale.com.
$GLOBALS['LIVEWHALE_CONFIG']['SUPPORT_EMAIL']='help@myschool.edu';