Toolbar updates testing - revision 233

12 posts / 0 new
Last post
Toolbar updates testing - revision 233

The updated (test) version of the CERN toolbar is available in Subversion here: at revision #233

Please try it out and give me your feedback. I have sent a note to everyone who has registered as UX asset user explaining why we have made these changes. Feel free to get in touch with me in person with bug reports,  suggestions for improvements and so on. If there's something we can do to make implementation in your environmet easier (e.g. CSS specificity) then don't hesitate to pipe up - it's no doubt a problem for others too.

Thank you,

First bug spotted: tabs

Thanks to Konrad for picking up the first bug: clicking on a tab that has an open tray and then clicking into another tab activates both.

This is in the issue queue; we'll fix the javascript.


The new toolbar looks good on the whole. A few early comments:

  • If you click on the "Search" link ("a-search") once the search tray is already opened, the element is assigned an additional "active" class (one for each click) such that after closing the tray the "Search" link still keeps a few "active" class and remain visually selected.
  • The same applies for the "a-account" tray.
  • The transition to the new toolbar was as easy as advertized. There were some conflicts with our page style (line-height, search box padding and tray colors) but I guess nothing unexpected (You can have a look here and there if wanted).
  • I have noticed some rendering issues of the "search" and "account" trays content with the IE8 version installed on the CERN Windows Terminal Services (Windows Server 2003 R2). That is valid for our pages but also the sample static examples provided with the framework.
IE8 rendering issues on trays?

Thanks for the quick feedback Jerome,

I'm seeing this on IE8 via the old terminal services:



I *think* I have kept the default browser mode (in the developer tools), otherwise that could explain why we have a different output. I also have a smaller virtual screen, as another possible explanation.

See the screenshots (temporary, cern-internal network only) below (it seems that "Account" tray is the most affected).


'Compatibility mode' strikes again

I think this is linked to 'compatibility mode'. Again, noted - we'll see what can be done about it.


Fixes in revision #236

The tabs problem is fixed now in revision #236.

Thanks to everyone who gave feedback. Seems like there have been no major issues with testing these changes which is very encouraging. We are going to go ahead and start deploying these changes in the Drupal environment, which you will see live soon. Next week I will send a note to developers who registered as users of the toolbar asking them to please deploy these changes by the end of the first week in December. We'd like to keep this window where different instances of the toolbar are different to one another to a minimum.

We have just one more thing that we would like to change: the icon for the directory at mobile sizes, although perfectly workable, is similar to icons that are appearing in applications that tend to signal that a tray or menu can be opened (see screenshot). We will try and find something else that is workable and test it on end users.



it looks great! I deployed in webcast-test, you can see it here:


Few comments:

  • I think you forgot to delete a paranthesis } at the very end of the file screen.css
  • Small thing, the label "Search:" on the left of "Just this site - CERN web - Buildings - People - Services" is not vertically aligned with the radio buttons.

And finally, but I think this is just for me, I still have problem with Bootstrap CSS. I had to override some rules:

#cern-toolbar h1,h2,h3,h4,h5,h6 {

    line-height: inherit;


#cern-toolbar #toolbar-account li {

    line-height: 16px;


#cern-toolbar label, input, button, select, textarea {

    font-size: 14px;


#toolbar-searchtray input[type="search"]{ 

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

    -webkit-transition: none;

    -moz-transition: none;

    -o-transition: none;

    transition: none;


    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;


    -webkit-box-sizing: inherit;

    -moz-box-sizing: inherit;

    box-sizing: inherit;

    -webkit-appearance: searchfield;


#toolbar-account ul li.close {

    opacity: 1.0;



The last one can be easily resolved changing your css and instead of a general name li.close, maybe put a different name?

Or force opacity there...

The seach box is still not perfect due to bootstrap, see on the website.


Specificity problems

Thanks for pointing out the specificity problems. We'll look at making stronger selectors to help with this.

Noted for the vertical alignment of the form elements - I've had a few comments about other issues surrounding the form elements.

Once we've got fixes I'll send out an email.


Thanks to everyone else who gave feedback too!


Revision #241

Next candidate release is #241. We refactored the CSS and JS to solve quirksmode problems, and other related issues (apart from selector specificity). Try it out.

It looks ok to me, also with

It looks ok to me, also with IE. Deployed on test website:

Just a comment: forget about my first point above "I think you forgot to delete a paranthesis } at the very end of the file screen.css", I saw only now your "@media screen and (max-width:750px) {" open before, not indented :(

Thanks for testing!

Thanks for testing and the feedback. 

A couple of more small iterations and revision #245 is now stable.

You are here