Category Archives: Tutorial

Fixed Borders

        Had a question about how to recreate the fixed borders as seen on this page. It’s not too difficult, all you need to do is first fix the header at the top (and add some Javascript if you want to scale down the menu after the user scrolls down the page),… Read More »

Scalable Header Image

Most themes which offer a header image as one of its options have a common problem: the entire image often does not get displayed, i.e., the header is too short or the sides of the image get cut off, especially as the screen width gets narrowed. The reason behind this is that in most cases,… Read More »

Category Menu Items

This is another general WordPress question that I see quite often: how can I create a menu item that displays a page of posts belonging to a particular category? For example, let’s say I have a site about animals, and I’ve created a category called Dogs and a category called Cats, and by clicking on… Read More »

Dummy Menu Items

I often come across questions from beginning WP developers asking how to create menu items which do not link to a physical page. That is, hovering over the menu item should expand the sub-menu, but clicking on the main menu item should not cause anything to happen, only the sub-menu items should link to another… Read More »

Skrollr Demo

This post is still under development. But you can still scroll down to see the work in progress. This post is a demo of how to incorporate the Skrollr Animation library, and uses the concepts from Petr Tichy’s Parallax Scrolling tutorial. Elements can fade in and out Background images are from the World Wildlife Fund… Read More »

Clickable Image for Video

This post demonstrates how to set up a clickable image that turns into a video when clicked. Click on either of the images below, and a YouTube video will play. Here’s how: The first thing you need to do is add some jQuery. This only needs to be done once for your whole site. If… Read More »

Menu Below Site Title

By default, the top part of the header in Montezuma is divided into two areas: on the left is the site title and tag line (the description of the site), and on the right is the navigation menu. Lots of designers like having the navigation menu below the site title. This gives more room for… Read More »

Scaleable Header Image

This is a demo page that shows how to create a scaleable background image for the header. Although the background property of either banner-bg or banner can be set, the results often do not allow the entire image to be displayed proportionally.

In header.php, add an image element after the opening DIV for banner-bg and before the opening DIV for banner like this:
<div id="banner-bg" class="cf">
  <img id="header-image" src="/images/header.jpg" />
  <div id="banner" class="row">
      <div id="logo-area" class="col5">

Point the src attribute to the image you want to use as the header. Notice that the img element has an ID of header-image for CSS styling.