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.
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:

  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.

    Screenshot_2020-06-29_at_17.29.13.png
  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:
    Screenshot_2020-06-29_at_17.31.53.png
Note: Remember that when using a class, you will override the style of all elements bearing that class.

What To Do Next

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.