Certain elements within the interface of the Edit+ for Squiz Matrix 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 Edit+ for Squi 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 Edit+ 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. Place the following CSS link tag reference in your Edit+ design code, as shown in the example below:
   

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

Tip: You can use this new CSS File asset to add additional CSS styles to further customise the interface of Edit+ for Squiz Matrix.

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 Edit+ elements you may wish to hide.

4. Copy the current URL from the Web Paths screen and place a new CSS link tag reference in your Edit+ design code, as shown in the example below.  

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

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 place a new CSS link tag reference in your Edit+ design code, 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.