While working in UniBonn, I have a lot of contact with Ruby on Rails and JQuery; I actually started loving its interactivity and stability. But lately I encountered a small situation with the tabs object that they offer.

This is their default view, with Redmond theme applied. Nice and clean, you might say. But what’s missing? These tabs don’t support images. So you’ll not be able to show an image to specify, let’s say, that this tab has some updated information or a warning that something important is inside that tab.

I wanted to have some kind of control on specifying how the tab should look when I wanted my users to understand that something important is inside and requires their immediate attention.

As I searched through the website, I found the mentions of how to change the tab looks into an “error” style, so that it will attract attention no matter how tired the users are. In the Theming area of JQuery UI website, I found the help for Layout Helpers. Basically, you can specify additional classes who can override the theming of an element. Under Interaction cues, you’ll find all you need to set your elements style to highlighting, error, disable etc.

Interaction Cues

• .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
• .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
• .ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
• .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.
• .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text.
• .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.

And as an addition, some styles can trigger the change of icons, for example ui-state-error shows red icons instead of the default blue ones. The next step is to modify the style of the div that requires attention:

  <li <%= 'class="ui-state-error"' unless user_alert %> >
    <a href="#tabs-6">
      <%= '<img class="ui-icon ui-icon-alert"/>' unless user_alert %> User activity
    </a>
  </li>

So here I was blocked. The alert image should have been shown in the left of the text, aligned with it, but because of the tab style, it didn’t do that properly.

One last modification to the JQuery UI did the magic:

.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li a img { float: left; margin-right: 5px}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }

The added line, the one with .ui-tabs .ui-tabs-nav li a img enabled my image to stay nice in her position, so the divs looks now:

That’s all, folks! Enjoy!