Apply CSS to a Kuroco management screen with the plugin

The Management plugin allows you to apply a CSS of your choice to any Kuroco management screen. You can write your own CSS for various purposes, such as hiding items or making color changes.

This tutorial shows you how to hide the reply form and button on the inquiry answer screen and use it only for viewing.

Image from Gyazo

1. Create CSS file

First, create the CSS file you want to apply to the page. This tutorial uses the code below as an example. You can check the IDs and classes of the management screen tags in your browser's developer tools.

nodisplay_reply_items_in_the_form.css
#table_reply{display:none;}
.buttonbox{display:none;}
h3{display:none;}

2. Upload CSS to KurocoFiles

Next, upload the new CSS file to KurocoFiles.

Click [File manager] in the sidebar menu to open it as a pop-up window.

Image from Gyazo

Under KurocoFiles, create a CSS folder. Drag and drop your CSS file into the folder to upload it.

fetched from Gyazo

After uploading the file, click the file icon and select [File Path] to verify the file path.

fetched from Gyazo

3. Configure plugin

In the left sidebar menu, click [Environment] -> [Admin panel plugin].

Image from Gyazo

On the admin panel plugin screen, click [Add].

Image from Gyazo

In the "Configure plugin" dialog, enter the following information and click [Add] to save the settings.

ItemsSettings
StatusEnabled
Plugin namePlugin to make answers only for viewing
TypeCSS
SourceURL:/files/user/CSS/nodisplay_reply_items_in_the_form.css
TargetPage URI:/inquiry/inquiry_reply_edit/
Slot Name:head
  • In the "Source URL" field, enter the path of the CSS file you uploaded.
  • In the "Target page URI" field, enter the URL of the Kuroco management page you want to apply the CSS.
    Note: Use the relative URI format without /management.

Image from Gyazo

4. Verify page

Navigate to the inquiry answer screen. The section enclosed by the red box in the earlier screenshot is now hidden.

Image from Gyazo

If you have any other questions, please use our contact form or Slack workspace.