Archive for the ‘Design’ Category

Move the WordPress pages to the header – revisited

Monday, January 25th, 2010

This updated article describes how to use the page widget to build a page menu in the WordPress header. For the background to this see the previous post Move the WordPress page links to the header that described a simple way of listing the page links on the header.
(more…)

Move the WordPress page links to the header

Monday, April 27th, 2009

The default theme for WordPress places the links to pages in the sidebar. Moving them to the header is relatively easy to do if you’re comfortable making minor changes to the code.
The first thing is to find the path to the theme that you are using, for the default theme the path is:

⁄wordpress⁄wp-content⁄themes⁄default

For other themes the path will vary so make sure you have identified the correct one for the theme you have in use.

Then using your favourite text editor open up the following files:

  • sidebar.php
  • header.php

Note: Before you make any changes to these files make sure you have a backup

Next look for the following code fragment in sidebar.php which is used by WordPress to generate the list of page links.

(more…)

Move the WordPress search box to the header

Thursday, April 2nd, 2009

The default theme in WordPress places the search box in the sidebar. Moving it to the header is relatively easy to do if you’re comfortable making minor changes to the code. The first thing is to find the path to the theme that you are using, for the default theme the path is:

⁄wordpress⁄wp-content⁄themes⁄default

Then using your favourite text editor open up the following files:

  • sidebar.php
  • header.php

Note: Before you make any changes to these files make sure you have a backup

Next look for the following code fragment in sidebar.php which is used by WordPress to generate the search box (What this code does is to insert the contents of the searchform.php file at this point in the page. The searchform.php file contains the code to produce the search box and the search button).

(more…)

Cross-browser and platform compatibility

Saturday, November 29th, 2008

How do you test your pages to ensure they don’t look awful on another platform?

How do you make sure your carefully crafted pages don’t fall to pieces when viewed with Safari on Mac OS or collapse in a heap under MSIE 5.0 for Windows?

You can maintain multiple operating systems and perhaps run emulations or virtual machines but it all can be very time consuming and troublesome.
(more…)

Style columns in tables with CSS

Tuesday, October 28th, 2008

How do you style columns in HTML tables without resorting to styling the individual cells?

There doesn’t seem to be an easy answer to this question that will work with most browsers. The method shown here works fine for my requirements but that’s not to say there aren’t better ways of doing this out there.

The requirement I had was for a restaurant that required a table with three columns; the text of the menu item, special colour characters for vegetarian or wheat free dishes,  and the price of the item. The image below shows an example of the menu.

The text column is left aligned text with a width of 85%. The second column is centre aligned with a width of 5%.  The third column with the price has to be horizontally right-aligned, vertically top aligned, with bold text and a width of 10%.

(more…)