Talk:Citron Designs

From Wikimedia Usability Initiative
Revision as of 18:29, 19 July 2010 by Holek (Talk | contribs) (Bolding the active link: new section)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

I thought I'd kick off this page by saying - 'keep up the good work!' and that I hope you like the Citron pic I placed here a couple of days ago. :-) Not much to say by way of feedback other than I am very pleased to see all of the various things that you have mocked up so far. Witty lama 05:22, 27 January 2010 (UTC)

Closed tabs

Stupid idea, probably, but would the Usability team consider leaving the "open tab" images in the skin so that "open" tabs can be a user option? If the images remain, the changes are probably mainly CSS hacks—and I, among other users, really like the "open" feel though I understand that it might not ultimately be the most usable design. Nihiltres 17:21, 18 February 2010 (UTC)

Bolding the active link

After my short talk with Roan Kattouw on the Wikimedia Usability IRC channel I decided I share the idea my employer came up with earlier today. He said to me: "the navigation is not only to show, where you can go, but also to show where you are," and then told me to code that.

I think he has a point, so I coded it for our project. It works great with vanilla sidebars, like the ones used in Wikimedia projects, so, here's what I've done.

In skins/Vector.php: I found function renderPortals( $portals ) and added global $wgTitle; in a new line, and found

<?php if ( $val['active'] ): ?> class="active"<?php endif; ?>

and changed that with

<?php if ( $val['active'] || $wgTitle->getLocalURL() == $val['href'] ): ?> class="active"<?php endif; ?>

$val['active'] is set in Skin.php, but it is always set to false, afterwards being cached, so I decided more "renderer-oriented" approach of comparing the local URL during sidebar rendering.

Then I added these CSS rules to Vector's main-ltr.css and main-rtl.css:

div#mw-panel div.portal div.body ul li.active a {color: #000; font-weight: bold;}
div#mw-panel div.portal div.body ul li.active a:hover {color: #0B0080;}

Works like charm. Maybe you'll include that or do something about this $val['active'] always set to false in Skin.php? Holek 18:29, 19 July 2010 (UTC)