Example YUI Utility CSS

From TechWiki

Jump to: navigation, search

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 conStruct (Tools) Modules document.

In this case, we are looking to change the tab views (as used, for example, by both the Search and Browse conStruct 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:

Search.png

and in code view appears as this:[1]

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
.yui-navset .yui-nav li,.yui-navset .yui-navset-top .yui-nav li,.yui-navset .yui-navset-bottom .yui-nav li{margin:0 .5em 0 0;}.yui-navset-left .yui-nav li,.yui-navset-right .yui-nav li{margin:0 0 .5em;}.yui-navset .yui-content .yui-hidden{position:absolute;left:-999999px;visibility:hidden;}.yui-navset .yui-navset-left .yui-nav,.yui-navset .yui-navset-right .yui-nav,.yui-navset-left .yui-nav,.yui-navset-right .yui-nav{width:6em;}.yui-navset-top .yui-nav,.yui-navset-bottom .yui-nav{width:auto;}.yui-navset .yui-navset-left,.yui-navset-left{padding:0 0 0 6em;}.yui-navset-right{padding:0 6em 0 0;}.yui-navset-top,.yui-navset-bottom{padding:auto;}.yui-nav,.yui-nav li{margin:0;padding:0;list-style:none;}.yui-navset li em{font-style:normal;}.yui-navset{position:relative;zoom:1;}.yui-navset .yui-content,.yui-navset .yui-content div{zoom:1;}.yui-navset .yui-content:after{content:'';display:block;clear:both;}.yui-navset .yui-nav li,.yui-navset .yui-navset-top .yui-nav li,.yui-navset .yui-navset-bottom .yui-nav li{display:inline-block;display:-moz-inline-stack;*display:inline;vertical-align:bottom;cursor:pointer;zoom:1;}.yui-navset-left .yui-nav li,.yui-navset-right .yui-nav li{display:block;}.yui-navset .yui-nav a{position:relative;}.yui-navset .yui-nav li a,.yui-navset-top .yui-nav li a,.yui-navset-bottom .yui-nav li a{display:block;display:inline-block;vertical-align:bottom;zoom:1;}.yui-navset-left .yui-nav li a,.yui-navset-right .yui-nav li a{display:block;}.yui-navset-bottom .yui-nav li a{vertical-align:text-top;}.yui-navset .yui-nav li a em,.yui-navset-top .yui-nav li a em,.yui-navset-bottom .yui-nav li a em{display:block;}.yui-navset .yui-navset-left .yui-nav,.yui-navset .yui-navset-right .yui-nav,.yui-navset-left .yui-nav,.yui-navset-right .yui-nav{position:absolute;z-index:1;}.yui-navset-top .yui-nav,.yui-navset-bottom .yui-nav{position:static;}.yui-navset .yui-navset-left .yui-nav,.yui-navset-left .yui-nav{left:0;right:auto;}.yui-navset .yui-navset-right .yui-nav,.yui-navset-right .yui-nav{right:0;left:auto;}.yui-skin-sam .yui-navset .yui-nav,.yui-skin-sam .yui-navset .yui-navset-top .yui-nav{border:solid #2647a0;border-width:0 0 5px;zoom:1;}.yui-skin-sam .yui-navset .yui-nav li,.yui-skin-sam .yui-navset .yui-navset-top .yui-nav li{margin:0 .16em 0 0;padding:1px 0 0;zoom:1;}.yui-skin-sam .yui-navset .yui-nav .selected,.yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected{margin:0 .16em -1px 0;}.yui-skin-sam .yui-navset .yui-nav a,.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a{background:#d8d8d8 url(../../../../assets/skins/sam/sprite.png) repeat-x;border:solid #a3a3a3;border-width:0 1px;color:#000;position:relative;text-decoration:none;}.yui-skin-sam .yui-navset .yui-nav a em,.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a em{border:solid #a3a3a3;border-width:1px 0 0;cursor:hand;padding:.25em .75em;left:0;right:0;bottom:0;top:-1px;position:relative;}.yui-skin-sam .yui-navset .yui-nav .selected a,.yui-skin-sam .yui-navset .yui-nav .selected a:focus,.yui-skin-sam .yui-navset .yui-nav .selected a:hover{background:#2647a0 url(../../../../assets/skins/sam/sprite.png) repeat-x left -1400px;color:#fff;}.yui-skin-sam .yui-navset .yui-nav a:hover,.yui-skin-sam .yui-navset .yui-nav a:focus{background:#bfdaff url(../../../../assets/skins/sam/sprite.png) repeat-x left -1300px;outline:0;}.yui-skin-sam .yui-navset .yui-nav .selected a em{padding:.35em .75em;}.yui-skin-sam .yui-navset .yui-nav .selected a,.yui-skin-sam .yui-navset .yui-nav .selected a em{border-color:#243356;}.yui-skin-sam .yui-navset .yui-content{background:#edf5ff;}.yui-skin-sam .yui-navset .yui-content,.yui-skin-sam .yui-navset .yui-navset-top .yui-content{border:1px solid #808080;border-top-color:#243356;padding:.25em .5em;}.yui-skin-sam .yui-navset-left .yui-nav,.yui-skin-sam .yui-navset .yui-navset-left .yui-nav,.yui-skin-sam .yui-navset .yui-navset-right .yui-nav,.yui-skin-sam .yui-navset-right .yui-nav{border-width:0 5px 0 0;Xposition:absolute;top:0;bottom:0;}.yui-skin-sam .yui-navset .yui-navset-right .yui-nav,.yui-skin-sam .yui-navset-right .yui-nav{border-width:0 0 0 5px;}.yui-skin-sam .yui-navset-left .yui-nav li,.yui-skin-sam .yui-navset .yui-navset-left .yui-nav li,.yui-skin-sam .yui-navset-right .yui-nav li{margin:0 0 .16em;padding:0 0 0 1px;}.yui-skin-sam .yui-navset-right .yui-nav li{padding:0 1px 0 0;}.yui-skin-sam .yui-navset-left .yui-nav .selected,.yui-skin-sam .yui-navset .yui-navset-left .yui-nav .selected{margin:0 -1px .16em 0;}.yui-skin-sam .yui-navset-right .yui-nav .selected{margin:0 0 .16em -1px;}.yui-skin-sam .yui-navset-left .yui-nav a,.yui-skin-sam .yui-navset-right .yui-nav a{border-width:1px 0;}.yui-skin-sam .yui-navset-left .yui-nav a em,.yui-skin-sam .yui-navset .yui-navset-left .yui-nav a em,.yui-skin-sam .yui-navset-right .yui-nav a em{border-width:0 0 0 1px;padding:.2em .75em;top:auto;left:-1px;}.yui-skin-sam .yui-navset-right .yui-nav a em{border-width:0 1px 0 0;left:auto;right:-1px;}.yui-skin-sam .yui-navset-left .yui-nav a,.yui-skin-sam .yui-navset-left .yui-nav .selected a,.yui-skin-sam .yui-navset-left .yui-nav a:hover,.yui-skin-sam .yui-navset-right .yui-nav a,.yui-skin-sam .yui-navset-right .yui-nav .selected a,.yui-skin-sam .yui-navset-right .yui-nav a:hover,.yui-skin-sam .yui-navset-bottom .yui-nav a,.yui-skin-sam .yui-navset-bottom .yui-nav .selected a,.yui-skin-sam .yui-navset-bottom .yui-nav a:hover{background-image:none;}.yui-skin-sam .yui-navset-left .yui-content{border:1px solid #808080;border-left-color:#243356;}.yui-skin-sam .yui-navset-bottom .yui-nav,.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav{border-width:5px 0 0;}.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav .selected,.yui-skin-sam .yui-navset-bottom .yui-nav .selected{margin:-1px .16em 0 0;}.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav li,.yui-skin-sam .yui-navset-bottom .yui-nav li{padding:0 0 1px 0;vertical-align:top;}.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav a em,.yui-skin-sam .yui-navset-bottom .yui-nav a em{border-width:0 0 1px;top:auto;bottom:-1px;}
.yui-skin-sam .yui-navset-bottom .yui-content,.yui-skin-sam .yui-navset .yui-navset-bottom .yui-content{border:1px solid #808080;border-bottom-color:#243356;}

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:

Revised tabview image.png

and, here is the example, changed code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006),see www.w3.org">
<title></title>
</head>
<body>
/* Copyright (c) 2009,Yahoo! Inc. All rights reserved. Code licensed under
the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.7.0
*/ .yui-navset .yui-nav li,.yui-navset .yui-navset-top .yui-nav
li,.yui-navset .yui-navset-bottom .yui-nav li
{
  margin:0 .5em 0 0;
}

.yui-navset-left .yui-nav li,.yui-navset-right .yui-nav li
{
  margin:0 0 .5em;
}

.yui-navset .yui-content
.yui-hidden
{
  position:absolute;
  left:-999999px;
  visibility:hidden;
}

.yui-navset
.yui-navset-left .yui-nav,.yui-navset .yui-navset-right
.yui-nav,.yui-navset-left .yui-nav,.yui-navset-right
.yui-nav
{
  width:6em;
}

.yui-navset-top .yui-nav,.yui-navset-bottom
.yui-nav
{
  width:auto;
}

.yui-navset
.yui-navset-left,.yui-navset-left
{
  padding:0 0 0 6em;
}

.yui-navset-right
{
  padding:0 6em 0 0;
}

.yui-navset-top,.yui-navset-bottom
{
  padding:auto;
}

.yui-nav,.yui-nav
li
{
  list-style:none;
  margin:0;
  padding:0;
}

.yui-navset li
em
{
  font-style:normal;
}

.yui-navset
{
  position:relative;
  zoom:1;
}

.yui-navset
.yui-content,.yui-navset .yui-content div
{
  zoom:1;
}

.yui-navset
.yui-content:after
{
  content:'';
  display:block;
  clear:both;
}

.yui-navset
.yui-nav li,.yui-navset .yui-navset-top .yui-nav li,.yui-navset
.yui-navset-bottom .yui-nav
li
{
  display:inline;
  vertical-align:bottom;
  cursor:pointer;
  zoom:1;
}

.yui-navset
.yui-nav a
{
  position:relative;
}

.yui-navset .yui-nav li a,.yui-navset-top
.yui-nav li a,.yui-navset-bottom .yui-nav li
a
{
  display:inline-block;
  vertical-align:bottom;
  zoom:1;
}

.yui-navset-bottom .yui-nav li
a
{
  vertical-align:text-top;
}

.yui-navset .yui-navset-left .yui-nav,.yui-navset
.yui-navset-right .yui-nav,.yui-navset-left .yui-nav,.yui-navset-right
.yui-nav
{
  position:absolute;
  z-index:1;
}

.yui-navset-top
.yui-nav,.yui-navset-bottom .yui-nav
{
  position:static;
}

.yui-navset
.yui-navset-left .yui-nav,.yui-navset-left
.yui-nav
{
  left:0;
  right:auto;
}

.yui-navset .yui-navset-right
.yui-nav,.yui-navset-right .yui-nav
{
  right:0;
  left:auto;
}

.yui-skin-sam
.yui-navset .yui-nav,.yui-skin-sam .yui-navset .yui-navset-top
.yui-nav
{
  border:solid #02A54F;
  zoom:1;
  border-width:0 0 3px;
}

.yui-skin-sam
.yui-navset .yui-nav li,.yui-skin-sam .yui-navset .yui-navset-top .yui-nav
li
{
  zoom:1;
  margin:0 .16em 0 0;
  padding:1px 0 0;
}

.yui-skin-sam .yui-navset
.yui-nav .selected,.yui-skin-sam .yui-navset .yui-navset-top .yui-nav
.selected
{
  margin:0 .16em -1px 0;
}

.yui-skin-sam .yui-navset .yui-nav
a,.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a
{
  background:#d8d8d8 url(../../../../assets/skins/sam/sprite.png) repeat-x;
  border:solid #a3a3a3;
  color:#666666;
  position:relative;
  text-decoration:none;
  border-width:0 1px;
}

.yui-skin-sam
.yui-navset .yui-nav a em,.yui-skin-sam .yui-navset .yui-navset-top
.yui-nav a em
{
  border:solid #a3a3a3;
  cursor:hand;
  left:0;
  right:0;
  bottom:0;
  top:-1px;
  position:relative;
  border-width:1px 0 0;
  padding:.25em .75em;
}

.yui-skin-sam
.yui-navset .yui-nav .selected a,.yui-skin-sam .yui-navset .yui-nav
.selected a:focus,.yui-skin-sam .yui-navset .yui-nav .selected
a:hover
{
  background:#02A54F url(../../../../assets/skins/sam/sprite.png) repeat-x left -1400px;
  color:#fff;
  font-weight: bold;
}

.yui-skin-sam .yui-navset .yui-nav
a:hover,.yui-skin-sam .yui-navset .yui-nav a:focus
{
  background:#bfdaff url(../../../../assets/skins/sam/sprite.png) repeat-x left -1300px;
  outline:0;
}

.yui-skin-sam .yui-navset .yui-nav .selected a
em
{
  padding:.35em .75em;
}

.yui-skin-sam .yui-navset .yui-nav .selected
a,.yui-skin-sam .yui-navset .yui-nav .selected a
em
{
  border-color:#02A54F;
}

.yui-skin-sam .yui-navset
.yui-content
{
  background:#F3F2F1;
}

.yui-skin-sam .yui-navset
.yui-content,.yui-skin-sam .yui-navset .yui-navset-top
.yui-content
{
  border:1px solid #D5D4D2;
  border-top-color:#02A54F;
  padding:.25em .5em;
}

.yui-skin-sam
.yui-navset-left .yui-nav,.yui-skin-sam .yui-navset .yui-navset-left
.yui-nav,.yui-skin-sam .yui-navset .yui-navset-right .yui-nav,.yui-skin-sam
.yui-navset-right .yui-nav
{
  xposition:absolute;
  top:0;
  bottom:0;
  border-width:0 5px 0 0;
}

.yui-skin-sam .yui-navset
.yui-navset-right .yui-nav,.yui-skin-sam .yui-navset-right
.yui-nav
{
  border-width:0 0 0 3px;
}

.yui-skin-sam .yui-navset-left .yui-nav
li,.yui-skin-sam .yui-navset .yui-navset-left .yui-nav li,.yui-skin-sam
.yui-navset-right .yui-nav li
{
  margin:0 0 .16em;
  padding:0 0 0 1px;
}

.yui-skin-sam .yui-navset-right .yui-nav li
{
  padding:0 1px 0 0;
}

.yui-skin-sam .yui-navset-left .yui-nav .selected,.yui-skin-sam
.yui-navset .yui-navset-left .yui-nav .selected
{
  margin:0 -1px .16em 0;
}

.yui-skin-sam .yui-navset-right .yui-nav .selected
{
  margin:0 0 .16em -1px;
}

.yui-skin-sam .yui-navset-left .yui-nav a,.yui-skin-sam
.yui-navset-right .yui-nav a
{
  border-width:1px 0;
}

.yui-skin-sam
.yui-navset-left .yui-nav a em,.yui-skin-sam .yui-navset .yui-navset-left
.yui-nav a em,.yui-skin-sam .yui-navset-right .yui-nav a em
{
  top:auto;
  left:-1px;
  border-width:0 0 0 1px;
  padding:.2em .75em;
}

.yui-skin-sam
.yui-navset-right .yui-nav a em
{
  left:auto;
  right:-1px;
  border-width:0 1px 0 0;
}

.yui-skin-sam .yui-navset-left .yui-nav
a,.yui-skin-sam .yui-navset-left .yui-nav .selected a,.yui-skin-sam
.yui-navset-left .yui-nav a:hover,.yui-skin-sam .yui-navset-right .yui-nav
a,.yui-skin-sam .yui-navset-right .yui-nav .selected a,.yui-skin-sam
.yui-navset-right .yui-nav a:hover,.yui-skin-sam .yui-navset-bottom
.yui-nav a,.yui-skin-sam .yui-navset-bottom .yui-nav .selected
a,.yui-skin-sam .yui-navset-bottom .yui-nav
a:hover
{
  background-image:none;
}

.yui-skin-sam .yui-navset-left
.yui-content
{
  border:1px solid gray;
  border-left-color:#243356;
}

.yui-skin-sam .yui-navset-bottom
.yui-nav,.yui-skin-sam .yui-navset .yui-navset-bottom
.yui-nav
{
  border-width:5px 0 0;
}

.yui-skin-sam .yui-navset .yui-navset-bottom
.yui-nav .selected,.yui-skin-sam .yui-navset-bottom .yui-nav
.selected
{
  margin:-1px .16em 0 0;
}

.yui-skin-sam .yui-navset
.yui-navset-bottom .yui-nav li,.yui-skin-sam .yui-navset-bottom .yui-nav
li
{
  vertical-align:top;
  padding:0 0 1px;
}

.yui-skin-sam .yui-navset
.yui-navset-bottom .yui-nav a em,.yui-skin-sam .yui-navset-bottom .yui-nav
a em
{
  top:auto;
  bottom:-1px;
  border-width:0 0 1px;
}

.yui-skin-sam
.yui-navset-bottom .yui-content,.yui-skin-sam .yui-navset
.yui-navset-bottom .yui-content
{
  border:1px solid gray;
  border-bottom-color:#243356;
}

.yui-navset-left
.yui-nav li,.yui-navset-right .yui-nav li,.yui-navset-left
.yui-nav li a,.yui-navset-right .yui-nav li
a,.yui-navset .yui-nav li a em,.yui-navset-top
.yui-nav li a em,.yui-navset-bottom .yui-nav li a
em
{
  display:block;
}

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

End Note

  1. ↑ These actual files may change over time with minor changes to the basic OSF code distributions.
Retrieved from "http://techwiki.openstructs.org/index.php/Example_YUI_Utility_CSS"
Personal tools