CSS for Separating out the Message Inbox from rest of User Page

I’d like to separate out the Messages Inbox from the rest of the user page contents… so it is essentially just a message inbox and there is no extraneous information there.

In other words, if the user is browsing at URL … /u/{username}/messages, the other tabs (user.summary, userActivity, userNotifications, userInvited, user.badges and preferences) are hidden. Conversely, if the user is in any of the other tab’s URLs, the userPrivateMessages tab is hidden.

I am guessing this can be done in various ways but should best be possible using CSS. Would anyone be able to assist with the proper CSS?

Many thanks in advance!

Have you considered hiring someone proficient in CSS to help you with this task on your site? This seems very specific to your site and what you want to do.


Thanks for the advice. I did think that this is quite straightforward and that someone would have an answer since the template for this is very well written and quite short and simple.

Excerpt from user template
{#mobile-nav class='main-nav' desktopClass="nav nav-pills user-nav" currentPath=currentPath}}
      <li>{{#link-to 'user.summary'}}{{i18n 'user.summary.title'}}{{/link-to}}</li>
      <li>{{#link-to 'userActivity'}}{{i18n 'user.activity_stream'}}{{/link-to}}</li>
      {{#if showNotificationsTab}}
          {{#link-to 'userNotifications'}}
            {{d-icon "bell" class="glyph"}}{{i18n 'user.notifications'}}
      {{#if showPrivateMessages}}
        <li>{{#link-to 'userPrivateMessages'}}{{d-icon "comment"}}{{i18n 'user.private_messages'}}{{/link-to}}</li>
      {{#if canInviteToForum}}
        <li>{{#link-to 'userInvited'}}{{d-icon "user-plus"}}{{i18n 'user.invited.title'}}{{/link-to}}</li>
      {{#if showBadges}}
        <li>{{#link-to 'user.badges'}}{{d-icon "certificate"}}{{i18n 'badges.title'}}{{/link-to}}</li>
      {{plugin-outlet name="user-main-nav" tagName='' connectorTagName='li' args=(hash model=model)}}
      {{#if model.can_edit}}
        <li>{{#link-to 'preferences'}}{{d-icon "cog"}}{{i18n 'user.preferences'}}{{/link-to}}</li>

I expect that others will find it interesting to make message inbox more prominent and separated out from badges and user stats, so I’ll post any solution I find up here.

Hi all, here is the CSS we used to do this:

    .main-nav li:nth-child(4){
    .main-nav li{

This provides a separate PM inbox, away from badges, preferences etc.

PS, moving this to Tips & Tricks category