Member Portal Custom Code

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.

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:

1. Open your browser.
2. Navigate to the member portal page where this element is located.
3. Right-click with your mouse and choose Inspect.
4. Hover over the element you would like to change.
5. 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.
   
   
6. Create the following code snippet that will change the element's background to red:
   

   .MuiTabs-root {
    background-color: red;
   }

7. Add this code snippet to the Settings/Apps/Custom Code section.
8. You get the following result:
   

What To Do Next

• Learn more about How To Apply Custom Font To The Member Portal
• Learn more about How To Use CSS Selectors
• Learn more about Member Portal Layout, IDs and Classes
• Check out our Code Snippets