[HOWTO] CSS snippet: Highlight menu state

[mbria]

This is a very simple CSS snippet our Editors found specially useful and improves OJS' usability.

The snippet highlights the current state in edition menus, for instance at:
http://yourmagazine.../editor/submissio ... Unassigned

example.png (18.38 KiB) Viewed 724 times

Code: Select all

/* Highlighting edition's state */
div#main div#content ul.menu {
  border-bottom: 2px solid #AAA;
  font-size: 1.2em;
}

div#main div#content ul.menu li {
  border: 1px solid #AAA;
  padding: 2px 10px;
}

div#main div#content ul.menu li.current {
  background-color: red;
}

div#main div#content ul.menu li.current a {
  color: white;
}

div#main div#content ul.menu li.current a:hover {
  background-color: red;
  color: black;
}


It's not what I suggested at viewtopic.php?f=2&t=1543&p=4713&hilit=+usability#p4713
but does the job.

Alec... what about including a similar solution in further releases?

Cheers,

m.

[jmacgreg]

Hi Marc,

I think that's a great css addition. I'm happy to let you know that some small UI-related changes will be released with OJS 2.3, while we're now actively working towards an extensively refactored UI for both OCS and OJS (spurred in part by your previous thread you link to), and this is just the kind of small, and yet visually very useful, type of change we've been talking about. As one of our more enthusiastic contributors to the UI discussion, you may get a private message when we have testing-quality UI revisions in place .

Cheers,
James