Customizing the back-end

As a platform, LiveWhale is almost infinitely customizable. This page contains some examples of places you might begin customizing the user experience, but with custom modules even more is possible. Reach out in the forum or request help if you’re looking to customize LiveWhale in ways not covered here.

Adding custom fields to LiveWhale content

Adding Custom Fields is the most common type of LiveWhale customization.

Using Custom Fields you can add an “Author Name” field to news stories, “Ticket Link URL” or “Room Number” to Events—anything you have in mind. Fields can be text (single line or WYSIWYG), single-select (dropdown or radio buttons), or multi-select (checkboxes), and applied site-wide or to individual groups. Learn more about Custom Fields.

Setting required fields

In general, we discourage requiring fields beyond the LiveWhale defaults (for events: title and date), as it can make the editing experience more onerous, but you can choose to do so using the fields_required config file setting.

Adding custom CSS on the LiveWhale back-end

If you create a /_ingredients/backend/backend.css (or .less or .scss) file, it will automatically be loaded on every back-end page for logged-in users.

You can use body classes to target specific user permission levels and scenarios:

Permission levels
- body.admin-user = admins only
- body:not(.admin-user) = non-admins only
- body.has_core_globals = users with Manage Global Content permission (Curators and above)
- body.has_core_publish = users with Publish Content permission (Publishers and above)
Specific user(s)
- body.user_jsmith
Individual groups (when switched into via group switcher)
- body.group_biology

Or, body IDs to customize specific back-end pages.

body#events_edit and body#events_sub_edit = event editors for native and Linked Calendar events
body#users_edit = Edit User page
body#dashboard = Dashboard

Example: Hide certain fields for non-admins

A very common use case for back-end CSS is hiding certain fields for non-admins, if you don’t want day-to-day users worrying about that field. For instance, let’s say you wanted only admins to tag events, you could use:

body#events_edit:not(.admin_user) {
     .fields_tags {
          display: none; // show tags for admins only
     }
}

Example: Add CSS help text using :before

.fieldset.tags:before {
  display: block;
  margin: 0 0 1em 0;
  content:'Use tags to place on audience portals: faculty, staff, students, public.'
}

Adding custom JS to the LiveWhale back-end

If you create a /_ingredients/backend/backend.js file, it will automatically be loaded on every back-end page for logged-in users. Using this starter script will allow you to hook into the jQuery object $ after page load:

(function ($, LW) {
  
    // Add your custom JavaScript or jQuery here

}(livewhale.jQuery, livewhale));

Example: Add help text to back-end interfaces

(function ($, LW) {

        if (livewhale.page == 'forms_edit') {
                $('div.main').prepend("<br/><br/><div class=\"lw_notice\"><p>Please do not use LiveWhale forms to collect personally identifiable information such as dates of birth, home addresses, social security numbers, driver's license or any other ID numbers, credit card information, etc.<br/><br/>LiveWhale forms should not be used to collect any potentially sensitive or private information.</p></div>");
        }

}(livewhale.jQuery, livewhale));

Example: Remove certain toolbox options for non-admins

(function ($, LW) {

    if(!$('body').hasClass('admin-user') && $('#link_files').length) {
        // remove toolbox links for logged-in non-admins
        $('#link_files').parent().remove(); // Files
        $('#link_events_categories').parent().remove(); // Event Types
        $('#link_places_global').parent().remove(); // Global Locations
        $('#link_tags_global').parent().remove(); // Global Tags
    }

}(livewhale.jQuery, livewhale));

Example: Add ID to custom profile fields for admins

If you create a lot of widgets referencing profiles_12, you can use this to automatically surface those ID numbers when editing profiles,

(function ($, LW) {
  // Add ID to header for custom fields
  $('.fields[class*="_custom"]').each(function () {
    var $this = $(this);
    var itemID = 'id: '+$this.find('input[name="custom_fields[]"').val();
    $this.find('label.header').append(' <div class="lw_hidden"> '+itemID+'</div>');
  });
}(livewhale.jQuery, livewhale));

In addition to the above, add the following to your backend.less/scss file so the data shows up for admins:

// Show profile field ID
body.admin-user[id$="_edit"] {
  .header {
    position: relative;
    .lw_hidden {
      display:block !important;
      visibility: visible !important;
      font-size: 11px;
    }
  }
}

Customizing the front-end for logged-in users

Sometimes you may want to copy certain back-end customizations (say, to the LiveWhale toolbar) to the front-end as well. You can do this by replicating your CSS or JS in your front-end theming and targeting it to logged in users only by looking for body.livewhale. This body class gets added only for logged-in users.

body.livewhale {
    // this CSS will only display for logged-in LW users
}

if ($('body.livewhale').length) {
    // this JavaScript/jQuery will only run for logged-in users
}

Customizing the WSYIWYG formatting options

You can add/edit the dropdown options for TinyMCE WYSIWYG editing using the following config file options:

STYLE_FORMATS – predefine CSS classes that your editors can apply to content via the dropdown options
STYLE_BLOCK_FORMATS – change what paragraph/header options are available to editors
TOOLBAR_ADD_BUTTONS – add buttons to the TinyMCE WYSIWYG toolbar

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 and instructing LiveWhale to use it by adding the following to your global.config.php file:

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

This can be useful if you want to selectively load front-end CSS like fonts, colors, and sizing to make the back-end editing experience more closely match the front-end. It’s especially relevant if you’re using Content Layouts on dynamic content like news/events/profiles.

LiveWhale Support