Skip to main content

Changing the display of the content editor screen

You can change the display of the content editor screen using a CSS for the content structure. Write a custom CSS to hide content or change colors.

This tutorial explains how to hide the "Advanced settings" element on the content editor screen.

Image from Gyazo

Hiding the unwanted element

1. Navigate to the content editor

First, go to the content editor screen with the element you want to hide. In the left sidebar menu, click [Content structure].

Image from Gyazo

Click the [Add] link next to the group for which you want to hide the element.

Image from Gyazo

2. Obtain the element ID

Next, get the ID of the element you want to hide in the developer console for the page. To do this in the Chrome browser, right-click anywhere on the page and select [inspect] in the displayed menu. The element ID for "Advanced settings" is section-topics-edit-details.

Image from Gyazo

For reference, the other ID elements are as follows:

Item  Description  
Advanced settingssection-topics-edit-details
Tagsection-topics-edit-tags
Linkage settings on publicationsection-topics-edit-open-tab
Publish settingsopen_date_box
GitHubgithub_workflow
Approval workflow settingsworkflow_box

3. Navigate to the content structure editor

In the left sidebar menu, click [Content structure].
Image from Gyazo

On the content structure list screen, click the name of the content group you want to edit.
Image from Gyazo

You should see the CSS field in the "Advanced settings".
Image from Gyazo

2. Write your custom CSS

The CSS field uses Smarty. Therefore, enclose your CSS code between {literal} {/literal} tags.

For this tutorial, copy the code below into the CSS field and click [Update].

{literal}
#section-topics-edit-details{display:none;}
{/literal}

Image from Gyazo

Also, conditional branching is possible. For example, if you want to apply CSS only to groups with a group ID of 10, you can enter the following

{if '10'|rcms_in_array:$smarty.session.arrGroup_id}
{literal}
#section-topics-edit-details{display:none;}
{/literal}
{/if}

Verifying the display of the content editor screen

Navigate to the content editor screen. Now the "Advanced settings" section should be hidden.

Image from Gyazo


Support

If you have any other questions, please contact us or check out Our Slack Community.