LiquidFiles Documentation
LiquidFiles Documentation

Custom Stylesheet and JavaScript body tags to target specific pages, users or groups

If you look at the body tag of any page in LiquidFiles, you will see that it has several classes that can be targeted for different customizations. Here's an example:

<body class="page_message page_message_new group-sysadmins user-admin-company-com" id="page_message_new">

First you will see a couple of classes beginning with page_ that gets more and more specific. The first is page_message which will be set for any Secure Message page (compose message, show message, ...) and the second one is a specific page_ class for this specific page: page_message_new will only be set for the /message/new (the compose message) page.

When a user is logged in, LiquidFiles will also set body classes with the user id and group id. In the example above, you can see that a user admin@company.com, with a user id of admin-company-com, that is a member of the sysadmin group has logged in.

The unique ID fields for the user and group can be seen in Admin → Group or Admin → User, and click Edit. The ID is the first value listed.

Custom JavaScript using tags

These classes can now be used to create specific design for a specific user, group, specific page or group of pages. Consider the following JavaScript override:

$(function() {
  $('.group-external-users .external_users_info').removeClass('hide');
});

together with this footer:

<div class="external_users_info hide">Usage of this system is restricted to sending files to XYZ corp. Everything is being logged</div>

Normally, the footer would be hidden since it has the 'hide' class, and the JavaScript that is triggered when the group-external-users is visible on the page will remove the 'hide' class. So in effect, the external_users_info div will be visible to the external-users group but not to everyone else.

Custom Stylesheets using tags

An example for stylesheets would be a stylesheet override like:

.page_message p {
 font-size: 130%;
}

This override will only be applied to messages pages (pages with a class page_message) and it will set the font-size in paragraphs to 130% of the standard size.

Summary

Using these tags, you can make broad or very specific overrides for both Stylesheets and JavaScripts so that you can target specific customizations you wish to make.