How to Change the Portal Block Display Style and Colors from the Page Builder

You can customize the portal blocks through the page builder from WordPress as per your needs. Here are the steps on how to manage the display style and colors of the portal block using Counter Block, Recent Activity Block, and Chart Block.       

WordPress Backend

To customize the blocks go to Customer Portal ➤ Manage Pages, you will land on the ‘Pages’ page. Now Press the ‘Edit’ button of the page, of which you want to customize the blocks. 

Counter Block                   

After pressing the Edit button, you can select and edit the view of the record counter of a specific object. You can create a new page or edit the existing page for the Counter block.

You can add the Counter block in the Portal Dashboard page and the Portal Listing page as well. You need to select the Page Type as per the Portal page. 

By selecting the Counter Block content, in the Block tab option, you will find the following options:    

  • Counter Title: Insert the relevant Counter Title, i.e., Total Records, Updated Records.
  • Select Module: Select the module from the list, i.e., Account, Case, Attachment, Contract, Call, Order.
  • Select Field: As per the Module selection, the field will be fetched. Select the fields whose type is Picklist or Multi Picklist.
  • Select Field value: As per the field selection, the field values will be fetched. Select the field values.      

Ex.: If you select a case module, it will display the fields whose type is Picklist or Multi Picklist, and then it will get the value for the selected fields and module.

  • Select View Style: Select the ‘Style’ to display the Counter with the look and feel. There are 6 different styles of Counter Block.
  • Select Icon: By scrolling down in the Block, you can also select the ‘icon’ to display a unique identity.
  • Background Color: Select the background color of the counter.
  • Background Hover color: Select the background color when the mouse cursor moves on the content.
  • Font color: Select the text color of the content.
  • Font hover color: Select the font hover color when the mouse cursor moves on the content.

The user will get the Counter Block as per the editing in the Counter Block and the selection of style & color settings.

Chart Block

You can select and edit the view of the charts to display in the Customer Portal. You can create a new page or edit the existing page for the Chart block.

You can add the Chart on the Portal Dashboard or Portal Listing page as well. You need to select the Page Type.

By selecting the Chart block content, in the Block tab option, you will find the following options:

  • Chart Title: Insert the relevant Chart Title like Total Records, Updated Records.
  • Select Module: Select the module from the list like Account, Case, Attachment, Contract, Call, Order.
  • Select Fields: As per the Module selection the field will be fetched. Select the fields whose type is Picklist or Multi Picklist.

Ex.: If you select a case module and the status, then it will display the graph with all the status.

  • Select the ‘Style’ to display the Chart. There are 4 different styles of Chart Block.

Recent Activity Block

You can select and edit the view of the Recent Activity which is performed in the backend to display in the Customer Portal. You can create a new page or edit the existing page to add the Recent Activity block.

By selecting the Recent Activity block content, in the Block tab option, you will find the following options:

  • Module Heading: Insert the relevant Module Heading, i.e., Recent Activity, Recent Update.
  • Select Module: Select the module from the list, i.e., Account, Case, Attachment, Contract, Call, Order.
  • Select Field: Based on the module selection, you can select three different fields to display in the Recent Activity. Select Field 1– Informative Filed, Select Field 2– Field 1 related selection, and Select Field 3– Date Field, i.e., Closed, Created, etc.      

You can select the view style from the five predefined styles for Recent Activity:

Note: The Background color option is provided for Style 3 and Style 4 only. This block is used to show the recent 5 records with different styles. 

After configuring the blocks press the ‘Update’ button to update the configurations.    

Related Articles