Archive 1.x:Example YUI Utility CSS

YUI is an open-source JavaScript library for building richly interactive Web applications using techniques such as Ajax, DHTML and DOM scripting. YUI includes several core CSS resources. YUI is used for auto-completion and certain standard interface controls (such as multi-tab views) in various widgets throughout the OSF installation.

In order to complete styling changes in certain OSF widgets, it may be necessary to also change some YUI style code, as described in the Styling OSF-Drupal (Tools) Modules document.

In this case, we are looking to change the tab views (as used, for example, by both the Search and Browse OSF-Drupal tools. By using Firebug, we find that this code is located at:

/usr/share/drupal/sites/all/modules/conStruct/js/yui/build/tabview/assets/skins/sam

It looks like this:



and in code view appears as this:

As we can see, this file is much compressed, what is called "minified" for JS files. We can employ an online utility to prettify this code and make it easier to edit. We do so, in the process changing our tabs (and other material) from blue to green.

Here is the "after" tab view:



and, here is the example, changed code:

You can download the before YUI code and after YUI CSS code to inspect these example changes in more detail.