for now until a better color is picked - if needed.
*/
#dash_fines { color: [% css_colors.text_attention %]; }
-#dash_messages { color: [% css_colors.text_attention %]; }
+
+#dash_wrapper #dash_user_message_button_container {
+ display: inline;
+ padding: 0;
+}
+#dash_wrapper #unread_message_count_floater {
+ position: absolute;
+ background-color: [% css_colors.text_alert %];
+ padding-left: 0.2em;
+ padding-right: 0.2em;
+ display: inline-block;
+ font-size: 95%;
+ border-radius: 0;
+ z-index: 2;
+ margin-top: 0.2em;
+ margin-left: -1.5em;
+}
#header-wrap {
background: linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
</span>
<span class="dash_divider">|</span>
<span class="dash_account_buttons">
+ <div id="dash_user_message_button_container">
+ <a href="[% mkurl(ctx.opac_root _ '/myopac/messages') %]" class="opac-button">
+ [% l('Messages') %]
+ </a>
+ [% IF ctx.user_stats.messages.unread %]
+ <div id="unread_message_count_floater">
+ [%- ctx.user_stats.messages.unread -%]
+ <span class="sr-only">[% l('unread') %]</a>
+ </div>
+ [% END %]
+ </div>
<a href="[% mkurl(ctx.opac_root _ '/myopac/main') %]"
class="opac-button">[% l('My Account') %]</a>
<a href="[% mkurl(ctx.opac_root _ '/myopac/lists') %]"
%]"><span id="dash_fines">[% money(ctx.user_stats.fines.balance_owed)
%]</span> [% l("Fines") %]</a>
</span>
- <span class="dash_divider">|</span>
- <span class="dash-align">
- <a class="dash-link" href="[% mkurl(ctx.opac_root _ '/myopac/messages')
- %]"><span id="dash_messages">[% ctx.user_stats.messages.unread
- %]</span> [% l("Unread Messages") %]</a>
- </span>
</div>
</div>
[% END %]