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 »
This is a demo of how to create an index/blog page which has the post excerpts tiled in two columns.
This is a demo of how to create an index/blog page using a thumbnail of the featured image floated to the left of the blog excerpt.
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 »
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 »
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 »
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 »
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 »
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.