Introduction
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 ORND 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/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.
Comments
Please sign in to leave a comment.