The Settings/Member Apps/Custom Code tab lets you completely change the styling of your member portal. For example:
Change the default fonts and sizes.
Change some layout options, margins, padding, offsets.
Change more advanced stylesheet options, such as backgrounds and fore-colors.
Customizing the member portal is only available with the Premium Apps Package.
You are able to do all the things above using CSS. CSS is a language that describes the style of an HTML document and how HTML elements should be displayed. You can learn more about CSS here.
How It Works
Custom CSS should be written as you would write a conventional CSS stylesheet.
The custom CSS styles are always loaded last, so that they override the default styles of the application.
For more in-depth use cases, you can check our Code Snippets article.
Example
Now, say you'd like to change the background color of an element. Here is what you'd need to do:
Open your browser.
Navigate to the member portal page where this element is located.
Right-click with your mouse and choose Inspect.
Hover over the element you would like to change.
Find the element in the tree and it has two classes - MuiTabs-root and Tabs_container__3JgKA.
Important: Do not use classes that end in ‘__{random alphanumeric value}’. These classes are dynamically generated and are used by the OfficeRnD development team only.
Create the following code snippet that will change the element's background to red:
.MuiTabs-root {
background-color: red;
}Add this code snippet to the Settings/Member Apps/Custom Code section.
You get the following result:
Note: Remember that when using a class, you will override the style of all elements bearing that class.