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.
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.
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
1 | $_LW->REGISTERED_APPS['custom_backend']=[ |
You can add or remove from the drop-down formatting options by doing the following
style_block_formats
setting and edit as needed:1 | $_LW->REGISTERED_APPS['pages_editor']['custom']['style_block_formats'][]=['h1', 'h2', 'h3']; |
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) |
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.
style_formats
setting and edit as needed:1 | $_LW->REGISTERED_APPS['pages_editor']['custom']['style_formats']=[ |
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.
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']; |
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:
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
1 | <widget type="template"> |
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.
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 | // Specify the e-mail address for the support staff. Feedback requests from the Dashboard are sent here, and defaults to support@livewhale.com. |