Member Portal Layout, IDs and Classes

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:

Screenshot_2020-06-30_at_8.47.28.png

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
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.