CSS Customisation

Certain elements within the interface of the Easy Edit Suite can be customised with CSS using natural cascading and/or specificity. These customisations are configured as CSS or Text File assets and then referenced in the Design of a Site via a nested Standard Page.

Please note that it is important to test the Easy Edit Suite after any changes are made to ensure that the interface is operating as expected. 

Example: Changing the Logo

We want to change the logo of the EES from the Squiz Matrix to our company's corporate logo.

Changing the logo

1. Create a new CSS File called custom-ees-style. You can use this file to place custom style overrides for various interface elements.
2. Upload the corporate logo as an Image file asset under the CSS File. This file should have the same dimensions (width/height) as the default logo.
3. On the Edit File screen, create a new CSS rule using the following example:

   #ees_toolBarLogo { 
      background-image: url(path/to/my_logo.png);
    }    

   Note: Replace 'path/to/my_logo.png' with the path to the logo uploaded in step 2.
4. Make the new CSS asset Live with public read access and copy the current URL from the Web Paths screen.
5. On the Edit Contents screen of your EES Styles and Scripts Standard Page, place a new CSS link tag reference, as shown in the example below:
   

   <link href="path/to/custom-ees-style.css" rel="stylesheet" type="text/css" media="screen" />

   For more information on how to create and configure the EES Styles and Scripts  Standard Page, refer to the Installation Guide chapter in this manual.

Tip: You can use this new CSS File asset to add additional CSS styles to further customise the interface of the Easy Edit Suite.

Example: Hiding/Showing Elements Based on Permissions

Part 1: We want to block access to specific elements from users (the URLs screen tab, in this example).

Hiding the URLs tab

1. Create a new Text File asset called restricted-ees-elements.css (please make note that the web path of the asset ends with restricted-ees-elements.css).
2. Make the new Text File asset Live with public read access.
3. On the Edit File screen, enter the following code:  

   #ees_screenMenuList .screenMenuItem a#ees_screenMenuurlsDefault {
      display:none;
     }

   In this example we are hiding the URLs screen tab (ees_screenMenuurlsDefault). Please note that specificity or natural cascading should be applied - do not use !important.
   

   Tip: You can use a browser extension, such as Firebug, to identify any EES elements you may wish to hide.

4. Copy the current URL from the Web Paths screen and, on the Edit Contents screen of your EES Styles and Scripts Standard Page, place a new CSS link tag reference, as shown in the example below.  

   <link href="path/to/restricted-ees-elements.css" rel="stylesheet" type="text/css" media="screen" />

   For more information on how to create and configure the EES Styles and Scripts Standard Page, refer to the Installation Guide chapter in this manual.

The URLs screen tab will now be hidden from users in the EES.

Part 2: We now want to redisplay this element for advanced users only (System Administrators and the Root User).

1. Create a new Text File asset called unrestricted-ees-elements.css (please make note that the web path of the asset ends with unrestricted-ees-elements.css). Please note that this file must be served with a Matrix URL - if not, set Allow Unrestricted Access to No on the Details screen.
2. Make the new Text File asset Live with denied public read permission.
3. On the Edit Contents screen, enter the following code:  

   #ees_screenMenuList .screenMenuItem a#ees_screenMenuurlsDefault {
      display:block;
     }

   This will reactivate the URLs screen tab. Once again, please note that specificity or natural cascading should be applied - do not use !important.
4. Copy the current URL from the Web Paths screen (should not be a  __data URL) and, on the Edit Contents screen of your EES Styles and Scripts Standard Page, place a new CSS link tag reference, directly under the previously added tag in this example (Part 1, step 4), as shown in the example below.

   <link href="path/to/unrestricted-ees-elements.css" rel="stylesheet" type="text/css" media="screen" />

System Administrators and the Root User will now see the reactivated URLs screen tab.

Tip: You can apply specific permissions on this Text File to reactivate elements for specific Users and/or User Groups.

PreviousNext