Member Portal Custom Code

Introduction

Using the Settings/Member Apps/Custom Code section you can change completely the styling of your member portal. For example:

  • Change the default fonts, sizes, etc
  • Change some layout options, margins, padding, offsets, etc
  • Change more advanced stylesheet options, backgrounds, fore-colors, etc
Customizing the member portal is only available with the Premium Apps Package.

Using CSS, you are able to do all of the above things. 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.

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.

How It Works

Let's take as an example that you would like to change the background color of an element. Here is what you would 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 open 'Inspect'
  4. Hover over the element you would like to change
  5. We find the element in the tree and we see 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.