Create simple tooltips with CSS and jQuery – Part 2

CSS Tutorials, Javascript, Tutorials Nov 03, 2008 59 Comments

In a recent tutorial I taught you how to create simple transparent tooltips with a few lines of CSS and jQuery. Today we will build some more advanced tooltips, based on the aforementioned tutorial.

Read more »

Create simple tooltips with CSS and jQuery – Part 1

CSS Tutorials, Javascript, Tutorials Oct 15, 2008 75 Comments

CSS tooltips are very popular in modern web design and contrary to popular belief it is really easy to create them, especially with one of the all so popular javascript frameworks.

Before I started to delve deeper into this topic, I thought you have to use at least a plugin, but to get some basic tooltips all you need are about 10 lines of CSS and jQuery Code.

This Tutorial will teach you how to create such tooltips with some basic CSS and jQuery. Read more »

WordPress Tutorial: Simple Breadcrumb Navigation

Tutorials, Wordpress Tutorial Sep 10, 2008 25 Comments

I am currently working on some larger projects, and some of them are in desperate need of a breadcrumb navigation, since there are so many sub categories and pages, that users often have a hard time not to lose track of their current position on the site.

After searching the web for an adequate plugin, the only Breadcrumb navigation I could find was Breadcrumb NavXT. The plugin is basically the only one which supports nested pages as well as nested categories. It has a ton of options… to my mind there are way to many. After testing the plugin on a blank installation my Database query count went from 17 to 59 even if I was on the starting page where no breadcrumb navigation was displayed. So I decided to code a lightweight version for myself.

What you will learn here, are the basics of creating a simple breadcrumb navigation. This tutorial doesn’t offer a complete script, just some snippets to experiment with =)

Read more »

Create an apple style menu and improve it via jQuery

CSS Tutorials, Photoshop Tutorial, Tutorials Jul 26, 2008 428 Comments

Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.

Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.

This is what we are going to build (don’t forget to hover over the menu)

Read more »

WordPress: Display Content in multiple Columns

Tutorials, Wordpress Tutorial Jul 21, 2008 73 Comments

Recently I had to create a website which displays the content in 2 columns.

While CSS 3 is capable of doing this on its own with the new Grid Position Module, a lot of browsers do not support this functions yet, so I needed to add a little extra markup to the output which is generated via the_content() to get the following result:

Read more »

How to use WordPress Custom Fields

Tutorials, Wordpress Tutorial Jul 09, 2008 75 Comments

WordPress gives an author the ability to add extra data to each written post and page. This data is called meta-data and is stored in custom fields.

These fields are really flexible in use and make it possible for developers and theme-authors to create stunning sites, far beyond from normal blog design. Read more »