Sam Burdge – Smarter Than The Average Blog

This simple, elegant blog was designed and built by 76 Creative (coded by me:¬)  for London based artist Zakeeya. It is powered by the Gallery Mangement feature of Admin 76, 76 Creative's custom Content Management System.

The Gallery Management system was originally intended for creating a series of galleries, rather than one huge one, so although being simple in appearance on the front end, the back end of this site still posed one or two challenges for me and allowed for improvements to be made to the CMS in the process.

Another thing I enjoyed about this site is doing a layout with a fluid width in CSS, most sites I have done are fixed width so it was interesting to change things up a bit.

I'm a big fan of simplistic / minimal websites where the content is the main focus.  Check it out:

www.zakeeya.com

The WP Background Tile Plugin for WordPress applies a tiled background image to your blog.  It is as simple as this:

• Create a background image
• Upload it
• Apply it as the background via the WP Background Tile options page

Applying a repeat pattern to the background of a webpage is easily done using css:

body {background-image: url(example.jpg);}

However, if you're not into writing code, or don't know where to insert the css into your wordpress theme, then you will find this plugin much easier. It can also be an easy way of testing out lots of background images before deciding on one you are happy with.

INSTALLATION:

1. Download the plugin from the link at the bottom of this page
2. Upload the wp-background-tile folder to your wp-content/plugins folder.
3. Activate the plugin from the Plugins page in WordPress.

USAGE:

1. Upload your background image via 'Media => Add New' in Wordpress (or via FTP)
2. Go to 'Settings => WP Background Tile' in WordPress
3. Paste or type in the URL of your background image (explained in more detail below)
4. Press 'Submit'

CREATING A BACKGROUND TILE:

A background tile is an image which is repeated in both directions over the background of a webpage. Look closely at the background of my site and you will notice the green background is not a matte colour, but a subtle texture. Right click on the background of my site and choose 'View Background Image' (Firefox) or 'Save Background As' (IE) and have a look at the image. You will notice that it is small (16 x 16 pixels), as you don't need much of the pattern to make it tile. Stripes and other geometric patterns can work well for a subtle effect.

Tip: Check out the free online Stripe Generator tool, it's a really easy way to create striped background tiles.

Background tiles can also be used for larger images such as a logo repeat. An example of this is www.mrdupes.com. To achieve this type of result using photoshop the 'offset' filter can be very useful.

GETTING THE URL OF A FILE YOU HAVE UPLOADED WITH WORDPRESS:

1. Go to 'Posts => Add New'
2. Click on the 'Add Media' button (a little star type icon next to 'Upload/Insert')
3. Click on the 'Media Library' tab
4. Click on the word 'Show' next to the file you want the url for
5. Under 'Link URL' click on the button 'File URL'
6. The file url should now be in the 'Link URL' text box so you can copy it.

DOWNLOAD PLUGIN:

The WP Post Columns Plugin for WordPress allows you to easily create columns within your wordpress posts and pages. It is ideal for sites with a magazine / newspaper style layout, or if you want text to appear on one side of the post with an image displayed opposite. It is much easier than creating html tables within posts and perfect for users with no coding experience. This plugin is a perfect solution for those using WordPress as a CMS.

As you can see from this example it is also possible to have text, before or after the columns, which spans the full width of the post.

Additional Info:

The current version of the plugin is 2.0, it used to only support two columns, but now you can have as many as you like! The idea of adding the code for extra columns was inspired by RickHap who sent me his modified version of the plugin.

The only restriction is that the total width of all columns together does not exceed the width of your WordPress post.

If you have upgraded from an earlier version of the plugin be sure to read the 'Usage' notes again, as the way the columns are implemented has changed in order to incorporate the new features. The latest version no longer supports the original method. If you have been using the plugin since it's first release, or it is working fine for you there is probably no need for you to upgrade. Instructions for the earlier version of the plugin can be found here: WP Post Columns 1.2

The width and padding of each column can be set in any unit of measurement supported by CSS. Absolute units of measurement include: px, mm and relative units include: %, em. 'Padding' refers to the right padding of the column (i.e. the space between its right margin and the left margin of the next column). For this reason it is recommended that you don't apply padding to your final column (set its padding to 0).

The example shortcodes above had to be embedded into this post as an image, else they would be interpreted as column formatting by the plugin. For example shortcodes that you can copy and paste into your wordpress post please refer to the first comment on this post.

Don't forget to close each column before opening a new one. And don't forget use the 'end_columns' shortcode after your last column, or you might get some funky results!

Updates:

24/4/2008 - Minor update to version 1.1 - Added extra preg_replace code to remove implicit <p> tags inserted by wordpress

27/4/2008 - Minor update to version 1.2 - Added priority of 13 to add_filter to make compatible with 2.5.1 - preg_replace is called after shortcodes have been processed (priority 11)

19/1/2009 - Major update to version 2.0 - Added shortcodes support so that the column widths can be configured within each post. Added the potential to allow as many columns as required, so long as the overall width does not exceed the width of the available space.

9/2/2009 - Minor update to version 2.1 -added do_shortcode() function to allow nesting of other shortcodes within the columns

20/4/2009 - Minor update to version 2.2 - removed original 'curly bracket' shortcode functions from the plugin as a bug fix.

Download Plugin:

When starting a fresh HTML site it is very useful to have a basic HTML template to use. This template should include:

• Doctype declaration
• Head and body tags
• Title tags
• Most commonly used meta tags
• Include for a CSS style-sheet

Having an empty template document will save you time, and will ensure that you don't forget to include any of the most important features of the html page structure. This template should serve as a 'blank canvas' as it were, rather than starting with a completely blank document every time. Here is an example of my template for XHTML 1.0, which can also be downloaded from the link at the bottom of this article:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
@import url(style.css );
</style>
 
</head>
 
<body>
 
</body>
</html>

DOCTYPE:

The doctype declaration (DTD) is important as it tells the browser what type of HTML you are using, and therefore which conventions you will need to follow when coding the site's content. For more information on this check out this Recommended  list of DTDs to use in your Web document.

TITLE:

This is the title that appears at the top of the browser window, it is also the title that appears in the google listing for your page. It is good practice to have a different title for each page of your site. The title can be split into two parts:

1. The name of your site
2. A description of the page

resulting in something like:  UK Diving - The worlds largest internet resource for divers (Site name - Site description) or:  UK Diving - Contact Us (Site name - Page description).

STYLE-SHEET:

The stylesheet provides all the colour, layout and text-formatting styles for your html page, it is written in CSS (Cascading Style Sheet).  Please refer to this document on Cascading Style Sheets for more info about CSS. The style-sheet can actually be written entirely between the two style tags, but I prefer to include it as a separate document, as this can be easily included in every page of the site, and once it is stored in the users cache it will also save on page loading time. The style-sheet in my example template is called 'style.css'.

META TAGS:

I use three basic meta tags in my HTML template:

1. Content type — This tells the browser which character set you are using. In my template I use UTF-8.
2. Description — This is the description of your page that appears in search engine listings.
3. Keywords — A list of key words and phrases that relate to your page,  seperated by commas. This is for search engine purposes too.

ABOUT WRITING XHTML 1.0:

Here are some of the rules of XHTML 1.0.

All nested tags must be closed in the reverse order in which they are opened:

<div><span>Hello</span></div> = Correct
<div><span>Hello</div></span> = Incorrect

All tags that don't have a closing tag must be treated as self-closing with a backslash:

<img src="test.jpg" /> = Correct
<img src="test.jpg"> = Incorrect
<br /> = Correct
<br> = Incorrect

All special characters must be encoded correctly:

& = incorrect
&amp; = correct

Please feel free to use my template as a basis for your HTML pages. You can also test your HTML markup for errors using the online W3 markup validator, or the Web Developer Toolbar for Firefox.

DOWNLOAD TEMPLATE:

Ever wondered how to change the default style of highlighted or selected text in your html page? I have found that this is possible using CSS3, although IE has no support for this so it doesn't work at all in IE.

In this example the background is set to green and the text set to white. Drag over this text to highlight it.

Here's the CSS:

/* Safari */
::selection {
background: #000000;
color: #ffffff;
}
/* Firefox */
::-moz-selection {
background: #000000;
color: #ffffff;
}

::selection is supported by the latest versions of Opera and Firefox 2 and upwards. ::-moz-selection is supported by the latest versions of Safari.