Applying Matt Galvin’s “XP-style” Skin to YUI TabView

April 11, 2008 at 2:17 pm by Eric Miraglia | In Development | 3 Comments

YUI community member Matt Galvin of Simplified Complexity has been working on some new skins for YUI. He’s early in the process, but it’s not too early to start taking advantage of his work — he’s starting with an XP-style theme and he’s applied it to the YUI Button Control and YUI TabView Control.

Here’s how to apply his XP skin to YUI TabView:

  • View the source of Matt Sweeney’s "Build from Markup" TabView example; copy and paste that into a new file.
  • In the same directory, place this new tabs.css file. It’s comprised of TabView’s "Core CSS" and Matt Galvin’s XP presentation rules.
  • In the example source, delete the reference to <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/tabview/assets/skins/sam/tabview.css">; replace it with <link rel="stylesheet" type="text/css" href="tabs.css">, pointing at your new css file.
  • In the example source, change the CSS class name on the <body> element from yui-skin-sam to yui-skin-xp.
  • Grab the three custom images for the XP skin (1, 2, 3) and put them in the same directory.

Reload, and you’re there. Here’s the same treatment applied to the standard dyanamic-tab-content example (click through for the working example):

YUI TabView styled with Matt Galvin's XP skin.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

3 Comments »

RSS feed for comments on this post. TrackBack URI

  1. sweet theme! Works well, thanks

    Comment by ruddy — September 9, 2008 #

  2. yui.simplifiedcomplexity.org appears to be a spam search site these days; any idea where an up to date copy of the skin might be found?

    Comment by Andy Stevens — February 11, 2009 #

  3. Andy –

    You can find a copy of the skin here:

    http://ericmiraglia.com/yui/demos/tabs.css

    -Eric

    Comment by Eric Miraglia — February 11, 2009 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Hosted by Yahoo!

Copyright © 2006-2010 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.