Skip to main content

Can I Apply CSS to Multiple Pages in the Management Screen Plugin?

You cannot select specific pages to apply the CSS file to, but since the page URI setting uses prefix matching, you can apply the management screen plugin to an entire directory and differentiate CSS by using class names.
Each page has a unique class applied to the main content element (div.main-content), so feel free to use this.

Naming Convention for Class Names

Each class naming convention corresponds to the path in the management screen.
(content_ + the path after /management/ concatenated with _)

  • Content List
    Management screen path: /management/topics/topics_list/
    Class: content_topics_topics_list

  • Member Edit
    Management screen path: /management/member/member_edit/
    Class: content_member_member_edit

Additionally, if the target is content, the class name includes the content definition ID.
Class: topics_list_group1

Configuration Examples

Applying CSS to the Content List Screen and Member Edit Screen

Management Screen Plugin

When / is specified in the page URI, CSS is applied to all pages under the /management/ directory.

Image from Gyazo

CSS

To hide the download button on the content list and the distribution tab on the member edit page, write CSS as follows:

.content_topics_topics_list #downloadButton {
display: none;
}

.content_member_member_edit #sub_tab_mailmaga {
display: none;
}

Applying CSS Only to Content Lists with Content Definition IDs = 7, 8

Management Screen Plugin

When /topics/topics_list/ is specified in the page URI, CSS is applied to all content list pages.

Image from Gyazo

CSS

To hide the gear icon on the content lists with content definition IDs = 7, 8, write CSS as follows:

.content_topics_topics_list.topics_list_group7 button[title="Display field settings"],
.content_topics_topics_list.topics_list_group8 button[title="Display field settings"] {
display: none;
}

Support

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