Posted on Leave a comment

WordPress – Creating Tab Menus with Yahoo! YUI Tab View

The Yahoo! User Interface Library (YUI) is a set of JavaScript utilities and controls, for building interactive web applications. The YUI Tab View is part of that vast library – – it help you to quickly create and design Tab Menus.
The advantage of Tab Views is that they allow you add more content to your web page whilst occupying less space. If well done they won’t slow down website-browsing.

If you’re using the Ndomche Summary Theme – II Columns for WordPress or Blogger, then the best place to insert this tabbed menu is the header — like on this blog. Don’t bother to contact me for more info.

The Steps, please go Here

Posted on Leave a comment

A YUI Grids-based WordPress Theme — YUI Autogrid Minimal

Original Article at YUI Official Blog By Christian Heilmann, July 2nd, 2008.

Here what Christian Heilmann says:

As I had to upgrade my personal blog to the newest WordPress version (and my old theme had been hacked to death), I chose to start from scratch with a WordPress theme.

[You can download the new theme here.]

As I am a lazy person and I think blogging is first and foremost about content and availability, I wanted to re-use as much as possible the good stuff other people have done and then tweak it a bit to fit my needs.

Voilå! YUI autogrid minimal, a WordPress theme based heavily on YUI’s Grids CSS and Base CSS with a few changes to fit the HTML that WordPress creates for you.

To work around the issue of YUI Grids being optimized for a certain resolution, I used the autogrids trick blogged here previously.

This is what this WordPress theme gives you:

  • clean, simple markup
  • a grids layout that changes with the available browser space
  • a fixed right side menu for easy access of the search and pages
  • an hCard in the footer to download to Outlook or Mail
  • Nice, easy-to-read typography without any fancy distractions

What it does not give you (as I hadn’t had time to look into these):

  • Ajax that nobody really needs
  • the new WordPress enhancements like the dynamic sidebar
  • pop-up comments (come on, this is 2008!)

You can see a few messier, older versions of this theme at work on my personal blog and on Scripting Enabled, the event I am organising about accessibility hacking later this year.

Posted on Leave a comment

Sancta Simplicitas: minimalistic WordPress theme using YUI CSS

Sancta Simplicitas
Sancta Simplicitas: minimalistic WordPress theme using YUI CSS

Sancta Simplicitas is a WordPress theme that uses YUI CSS utilities: reset, base, fonts, grids. It’s very minimalistic in a sense that it’s pretty much all white and simple. Hence the name. The theme is probably not usable by itself, but it’s a base on top of which you can create your own themes.

When creating a new WordPress theme, people usually take the default Kubrick theme but I personally find Kubrick too much. So Sancta Simplicitas has a very minimal stylesheet and is based on the WordPress classic theme.

The fact that it uses YUI grids makes it trivial to tweak: fixed size vs full width, width of the sidebar, position of the sidebar. Basically right after the there’s this:
<div id=”doc3″ class=”yui-t5″>

Changing the id doc3 to doc, doc2, doc4 or doc5 will give you different widths of the content. The default doc3 is full width. Then changing the class name yui-t5 will give you different position and width of the sidebar. yui-t1, yui-t2 and yui-t3 put the sidebar on the left hand side, yui-t4, yui-t5 and yui-t6 place it to the right. You can go even crazier from here, nesting grids to get a two-column sidebar and so on, it’s really easy with YUI grids and the docs are here.
Download Sancta Simplicitas