HeadsetOptions Web Design, SEO, WordPress, Etcetra

You can use all the WordPress Sandbox CSS designs with Movable Type now. The new system allows CSS only templates using the semantic XHTML structure of Sandbox. Check it out.

Video embeds like the ones from YouTube can be valuable to tell a story. Though the built-in options for such videos allow the user to resize the video, it is not dynamic and is more than often a manual (irreversible) process. Say you would like to keep the video at it’s full size in the single post page but display a thumbnail in your sidebar, you can. A simple CSS and Javascript fix for IE would do the trick, here’s how:

eMagazine is a back to the basic theme with emphasis on visual presentation and with plenty of room for future development. This version 0.8 is fixed width and with 2 fixed right sidebars. Future version will have options to move sidebars to the left (or on both sides of content) and other advance functions such as touchless CSS edits, content placement and Javascript tabber.

Just like our other free premium advanced WordPress themes, including the most recent PointSpace and WExp, this (beta) theme does the job as is and works will all versions of WordPress up to 2.5.x.

Here are a few features of this early version:

Adding a category called Featured (with a capital F) activates the featured post option.
Both sidebars are widget ready.
Posts and sidebar are adsense styled - easily add your adsense code located in separate files.
Search engine optimized - use without worry of duplicate posts or rearranging title tags.
XHTML validated.
CSS 3 validated (will show opacity error in CSS 2.1).

Earlier, we studied how we can easily display a continuous list in two columns using just CSS. Today, we will use a similar technique to present a continuous list in two rows within a finite width. A common usage of this technique can be found in galleries such as CSS Mania or wpSnap, where the post is replaced by a thumbnail image in the home page. We can tackle this need using simple CSS magic.

Let us assume you are using WordPress to power your site where your typical blog post is generated using WP Loop as shown below. This will usually render a simple list of posts as shown in this image, click the image to view a live demo.

<?php while(have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<h1><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
<h5>//<?php the_time(‘m.d.Y’); ?> at <?php the_time(‘g:i a’) ?></h5>
<?php the_content(‘Read more…’); ?>
<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>
<p class=”entry-meta”>
<span class=”cat-links”>Filed under: <?php the_category(‘, ‘) ?><?php if (function_exists(‘the_tags’)) { ?><?php the_tags(‘, ‘, ‘, ‘, ”); ?><?php } ?></span> // <span class=”comments-link”><?php comments_popup_link(‘Post a comment’, ’1 Comment’, ‘% Comments’); ?></span>
</p>
</div>
<?php endwhile; ?>

We then replace the tag that generates the post, in this case, it’s the “the_content” tag with a source to a image file that is labeled identical to the post ID, for example, post ID 11 will have a corresponding image called 11.jpg in a select.

Using images in place of text can be tempting especially since an image can offer you more visually than just text does. However, most of us end up using text for the simple reason that Google and Yahoo’s search engines are not able to read your images effectively (even with alt text?). Here’s a quick, simple, tried and tested SEO friendly CSS only Javascript free fix for one such scenario; replacing your navigation menu text with SEO friendly images:

Let’s start with making our images that will be used in place of menu text, in this example I am using images 30px tall and of varying width. I make two images for each menu item, one for mouse-over or hover and second for all other conditions.

Here’s a quick and easy way to present a continuous list in two or more columns without having to hard code it. A recent project required a list of authors across two columns; the author names and links were auto generated using a WP tag so listing them in 2 columns required some simple CSS magic.

The site is in transition to a simpler and visually engaging design, in the mean time, experience what a free theme and a sleepless weekend can do to your site! This mid-spring pre-reboot reboot is just an idea mash-up. The true reboot will be available on May 1st 2008 and will be built using hand tossed XHTML/CSS, a dash of PHP, some Javascript and home made grid.

As the tutorials run longer than we prefer, we have broken section 3 into 3 sub-sections, you can find sub-section 1 regarding second level menu here.
The navigational aspect of a site, especially one that is database driven, should have menus that are dynamically generated just like the rest of its content, but is seldom the case. The reason is not the lack of information or techniques, but rather the developer underestimating the role of effective navigation to the success of a site. A site with poor navigation is just as or bad or worse than a site with poor content.

Magazine style themes have overcome …

Here’s another absolutely Free Magazine Style Theme! This theme is not only full functional, it’s also completely customizable, all without touching any code.

So what features come standard with this magazine WordPress theme
The theme includes all the cool functions we have come to expect from any paid premium theme, only now you can have it for free, here’s the short list:

Advance edit options allows users to edit the style without learning or knowing CSS. You can even change the header image without touching a line of code, all from the options page….

As this tutorial runs longer than we initially anticipated, we will break section 3 further into three sub-sections.
In our ongoing exercise to learn the nuts and bolts of a magazine style WordPress theme, we examine what has become by far the most ignored part of a theme design, the navigation menu.

As important as they are, they are often found floating in the header or worse the sidebar and almost never used to its fullest as rightfully should. Today we will change that. We are dedicating three sections just to discuss navigation menus, its varied uses, and the various methods of using it. So why wait, let’s get started.
Why …