Before we dive into details about the member portal layout, we'd advise you to read more about Member Portal Custom Code. Note that customizing the member portal is only available with the Premium Apps Package.
The image below shows the basic layout of the member portal app and the ids assigned to its primary containers:
| ID | Description |
| #root | the root container |
| #top-bar | the top navigation container |
| #side-navigation | the side navigation container |
| #side-filter | the filter container |
| #page-{page-name} | the main container of the currently displayed page |
| #shopping-cart | the shopping cart container present only on the shop page |
Important: Notice that the side filter and the shopping cart are descendants of the page container. Nevertheless, we advise that they are treated as separate sibling containers in terms of styling, as the current hierarchy may change at any time without notice.
RnD Classes
| Classname | Description |
| Top Navigation | |
| .rnd-side-navigation-toggle-button | Side Navigation toggle button |
| .rnd-icon-button-active | Toggle button active state class |
| .rnd-button-tickets | Submit Ticket button |
| .rnd-button-how-to-guides | How To Guides button |
| Dashboard | |
| .rnd-welcome-widget | Welcome Widget |
| .rnd-posts-feed | Posts Feed container |
| .rnd-bookings-widget | Bookings Widget |
| .rnd-guides-widget | How to Guides Widget |
| .rnd-inoices-widget | Invoices Widget |
| .rnd-rss-widget | RSS Feed Widget |
| .rnd-tickets-widget | Tickets Widget |
| .rnd-twitter-widget | Twitter Feed Widget |
| Side Navigation | |
| .rnd-side-nav-opened | When navigation is opened, this class is added to the side navigation container (#side-navigation) |
| .rnd-side-nav-closed | When navigation is closed, this class is added to the side navigation container (#side-navigation) |
| .rnd-side-nav-item-{page-name} | Specific item from navigation |
| .rnd-side-nav-item-active | The class is added to the current active (selected) navigation item |
| Status Labels | |
| .rnd-status | Main status label class |
| .rnd-${type}-${status} | Modifier status label class Example: .rnd-membership-active - Active membership |
Comments
Please sign in to leave a comment.