0

I've customised the user profile tabs to look like a dashboard by using the generated classes and styling them using just CSS. Just to be clear, I haven't used any hooks or preprocesses to render the tabs, these are the default tabs that appear on the user profile.

I'm really pleased with the result! It all works fine and there's no bugs whatsoever as i've done it all through CSS:.

.logged-in.page-user {
  .dashboard-navigation {
    @include at-breakpoint($medium) {
      width: 20%;
      float: left;
    }
    section {
      padding: 0;
      margin: 0;
      max-width: 100%;
    }
    ul {
      padding: 0;
      margin: 0;
      border: 0;
      li {
        a {
          background: $lightgray;
          color: $darkgray;
          margin: 0;
          border: 0;
          text-transform: capitalize;
          display: inline;
          width: 50%;
          float: left;
          padding: .5em;
          color: $drupal;
          &.active {
            border-left: 3px solid $drupal;
            background: $white;
            &:after {
              content: "›";
              font-size: 2em;
              line-height: 0;
              float: right;
              margin-top: .25em;
            }
          }
          &:hover {
            background: $drupal;
            color: $white;
            &:after {
              content: "›";
              font-size: 2em;
              line-height: 0;
              float: right;
              margin-top: .25em;
            }
          }
        }
        @include at-breakpoint($medium) {
          display: block;
          overflow: hidden;
          a {
            padding: 1em 1em;
            text-align: left;
            display: inline-block;
            width: 100%;
            float: none;
            background: $lightgray;
            color: $darkgray;
            &:hover {
              background: lighten($gray, 10%);
            }
            &.active {
              background: $orange;
              color: $white;
              border: 0;
            }
          }
        }
      }
    }
    .secondary {
      clear: both;
      overflow: hidden;
      li {
        padding: 0;
        border: 0;
        a {
          background: $drupal;
          color: $white;
          &:hover {
            background: lighten($drupal, 10%);
          }
          &.active {
            color: $drupal;
            @include at-breakpoint($medium) {
              color: $white;
            }
          }
          &:after {
            margin-top: .3em;
          }
        }
      }
    }
  }

  .main-content {
    @include at-breakpoint($medium) {
      width: 80%;
      float: left;
    }
  }
}

Here's what i've come up with:

enter image description here

I'd like to take it a step further and add icons to each tab if possible like this:

enter image description here

I wasn't able to target the tabs using CSS as they all have general classes or non at all + obviously the tabs that appear depend on the role so I can't target them using pseudo nth-of-type selectors.

Maybe the solution is to add more specific classes but i'm open to ideas and some help on how I should go about it.

  • You said "I've customised the user profile tabs", Can you tell us how you have done and how above tabs are getting displayed probably you should share code or how exactly above is getting rendered.. Otherwise this question will be closed as Unclear what you are asking ! – Anil Sagar May 1 '14 at 17:38
  • Hey sorry, i've added the CSS and explained it a little better. Hope this is clearer. – SlightlyClever May 1 '14 at 20:04
  • This question appears to be off-topic because it is about CSS syntax, not truly Drupal-specific. – Mołot May 4 '14 at 11:08
  • @Mołot I think what he needs is a way to add some explicit classes to the tab items. That is using some preprocess functions, which makes the question on-topic. – Елин Й. Jul 13 '14 at 15:40
  • @ЕлинЙ. Looking at this that way? OK, retracting close vote. – Mołot Jul 14 '14 at 6:23
0

Too long for a comment...

Ok - add this to your themes template.php (or create one if it doesn't exist) - it is a modification of the core function.

function theme_menu_local_task($variables)   /* change 'theme' as appropriate to your theme name */
{
  $link = $variables['element']['#link'];
  $link_text = $link['title'];

  if (!empty($variables['element']['#active'])) {
    // Add text to indicate active tab for non-visual users.
    $active = '<span class="element-invisible">' . t('(active tab)') . '</span>';

    // If the link does not contain HTML already, check_plain() it now.
    // After we set 'html'=TRUE the link will not be sanitized by l().
   if (empty($link['localized_options']['html'])) {
      $link['title'] = check_plain($link['title']);
    }
    $link['localized_options']['html'] = TRUE;
   $link_text = t('!local-task-title!active', array('!local-task-title' => $link['title'], '!active' => $active));
  }


  /* this is where the conditional addition of new classes starts. in this case, it is looking for both user and relationships
  *  in the href (i.e.  user/42/relationships ) - make sure this is unique enough not to be triggered elsewhere. You can use
  *  as many checks as you want or alter this appropriately, depending on the directory structure you have set up.
  *  the double == are not a typo
  *  it adds a class 'relationships' to the end of the classes of the <a> tag if both strings are found
  *  You can cycle through other permutations for different links.  
  *  don't forget to setup the classes in the css file afterwards.
  */
  if( strpos($link['href'], 'user') !== false && strpos($link['href'], 'relationships') !== false)
  {
    $link['localized_options']['attributes']['class'][] = 'relationships';
  }
 //  else if(strpos($link...)
 //  {
//  }

return '<li' . (!empty($variables['element']['#active']) ? ' class="active"' : '') . '>' . l($link_text, $link['href'], $link['localized_options']) . "</li>\n";
}
| improve this answer | |
0

If the final addresses are known to be static, you could use destination specific information to identify each link

http://css-tricks.com/snippets/css/style-links-depending-on-destination/

If they include nodes of random values though, this might not work unless you can force the paths for the nodes to be predictable.

| improve this answer | |
  • Well the destination of the paths are static however these tabs contain the user ID which of course is unique: findabode.d7/user/92/property – SlightlyClever May 2 '14 at 12:05
  • Well, it's not the most efficient, but you could use javascipt to add the images, working off of the link names. – Geoff May 2 '14 at 13:21
  • Took some research but you can override the function that creates the <li> and add some conditional changes to include certain classes for specific links. I did some quick tests, and it seems to work - just make sure that whatever you test against is unique to that link, to ensure you don't mess up tabs on other pages. api.drupal.org/api/drupal/includes!menu.inc/function/… – Geoff May 2 '14 at 15:44
  • Hey Geoff could you please show me an example, i'm just starting out with PHP so writing functions is a little out of my current scope of abilities :( – SlightlyClever May 2 '14 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.