Category Archives: Web Design

Temporary Tests for MCC Black Creek Pioneer Village

I’ve added a new page, with sub-pages, and changed the WordPress theme from “Spectrum” to “Elegant Grunge” while I prepare to copy the MCC (Mennonite Central Committee) Toronto Mennonite Festival (Black Creek Pioneer Village Relief Sale) (BCPV) site from another platform to WordPress.

MCC (Canada) is a Mennonite relief organization. The BCPV Relief Sale is one of their many fund-raising events, held every September in Toronto.

My apologies to anyone who dislikes the change. It is necessary because the “Spectrum” theme does not support sub-pages, at least not without tweaking.

Plus a New Permanent Page

I am also adding the “Directory of DeHaan Web Sites” page to this site. This is a no-brainer; it perfectly fulfills the purpose of this site.

So, why has it taken me over a month to think of doing it?

Web Design Tip: Remember to do the obvious, especially after getting past the tricky technical tasks.

WordPress Web Design Tip

Two really important web design decisions are:

  • How many columns?
  • How many sub-pages?

Some bloggers may hardly notice whether they are dealing with one, two or three columns; at least, not at a conscious level. It is a pretty obvious feature, so it will get some attention. This site has two columns.

The number of sub-pages can be critical to business sites. A blogger might get away with the main blog, plus an “About” page. A business might want “About”, “Sales”, “Service” and “Contact” as separate main pages, and then a series of sub-pages for each. For example, “About: History”, “About: Founders”, “About: Community Involvement” may follow under “About”. Each product line might have a separate sub-page under “Sales”.

For an information site, such as the MCC BCPV site, it is important to organize the pages to lead visitors to easily find the information they need, while also supporting casual browsing from page to page.

You could refer to my DeHaan Services site for an example of three columns and sub-pages under “About”.


Monetizing Blogs with Kontera

I recently signed up with, and began using, Kontera for in-text advertising in my Weebly Writing blog and on the DeHaan Services site.

Kontera serves context-smart advertising by creating a link on key words inside the text of an article. Each ad is shown with double-underline and a colour that may be adjusted to contrast with the site’s usual link colours. Kontera also supports fine-tuning: one may refuse ads from specific sites; one may turn off advertising in specific sections of the article or page; one may tune the density of the ads.

Comparing Kontera with AdSense

Kontera differs from Google’s AdSense advertising, since AdSense places advertising boxes outside the text, usually in the margins of the page. Kontera and AdSense may co-exist on one page, since they use different areas of the web page.

Like AdSense, Kontera does not support pornographic or spam sites. Unlike AdSense, however, Kontera is willing to work with any site regardless of how poorly it has been visited.

Notes on Kontera

As mentioned, one Kontera account can serve advertising on multiple sites. For the publisher to track performance by site, they give a different account/site number for each.

One surprise is that Kontera wants to know your site’s topic; by default, that topic will apply to all your sites. I have not asked them to support different topics for the different sites. For example, I chose the “health” topic for DeHaan Services because it anchors my fitness and weight control business. That means, however, that when I add a blog post about an article on the Sacred Ibis, Kontera will not feed ads into it.

Since this DeHaan Directory is a non-premium WordPress blog, I am not permitted to monetize it with Kontera…or with AdSense, or by any other means.

Mike DeHaan Credit (Action Sports International)

Mike DeHaan (Credit: Action Sports International, during a race)

Hint: Pursue the Opportunity

If you write and publish online, with control over your own headers and footers so you are can monetize this site, consider adding Kontera in-text advertising.


How to Make a Slightly More Clever WordPress Change

My previous WordPress post talked about making a minor change by “brute force”: work your way through the \style.css file, tweaking one colour at a time, until you find the right place to make the change.

This time, let’s do a little more thinking.

Suppose you want to change the colour of hyperlinks, but only in the header. The \style.css might give you some hints, but to really get into it:

  • Open the \header.php file
  • Look for a style id, perhaps header.text.link
  • Copy that name (header.text.link)
  • Make no changes! But now re-open \style.css
  • Use the browser to search for that id (header.text.link)
  • If you find it, add your “colour: #AA2288;” change at the end of that description
  • Save the change, and check the result

This is no guarantee of success, but it may give results sooner than simply trying each spot.

Bonus TIP: I used this approach yesterday, and realized that the original developer had not set a colour code where I wanted to make my change. There was the reason why I had not found a code to change: without a previous code, there was nothing I could find and change.

Warning: The term “style id” and the example “header.text.link” are probably not the right technical terms.


How to Make a Minor WordPress Change through Brute Force

TIP on how to make a minor WordPress design change, such as changing the colour of visited link, in one place or many:

  • Open the style.css from Appearance / Editor
  • Ensure you know the HTML tag, such as “color: #0000AA;”
  • Make sure this is a bright colour that will jump out at you when you try it out
  • Add this line of code once, “update”, and switch to a different window to see the change
  • If it changed the correct elements, document it with “/* change #01 to colour of visited link */
  • If it was the wrong change, comment it out with the “/* oops, this did ABC instead of XYZ */; then go to the next likely spot and try again
  • Remember to change the colour to the one you really want…that bright colour may not be perfect
  • Also document the change up in the comments at the top
  • Copy and paste all the text into a notepad .txt file so you can read it without logging in as a designer
  • “Update” the style.css to save your documentation, then log out

This is a “brute force” approach because you just take one step after another, keeping track of the mistakes and eventually you will make the right change.

The alternative is to carefully study the theme’s style.css until you know exactly what to do, and do it right the first time. If you succeed, you have my praise. I took this “brute force” approach to my current client’s project because it was quicker than analyzing the code and guessing wrong…over and over. (Well, about three overs).

In my spare time, I really need to study “how to WordPress”.


Beginning a Client’s Web Re-Design Project

Although I had won the contract to improve the colours of a client’s WordPress web site about a week ago, the client sent me the password only yesterday.

When discussing the project the week before, I had carefully asked whether my client had full access to the site and its tools. “Yes, we’ve paid, we have ownership. We will dig up the user ID and password for you tomorrow. No worries”.

Unfortunately, they only had a user ID at the “editor” level. This is not sufficient to change the colour scheme. It is fine for adding content, but not for the work for which they had engaged me.

This leads to three tips for projects that need powerful access:

TIP for Estimating the Schedule: Build in the lead time for getting authorization. I am sure glad I did!
TIP for the Discussions with Clients: Explicitly ask for the necessities, such as authorization; and explain why.
TIP for the Statement of Work: Build in a penalty if the client delays the work; this includes:

  • A slow start with authorization or in making decisions on requirements
  • Delays in answering queries or in reviewing or approving work

Personally, I did fine with the first and last tips. I thought I had carefully asked about authorizations, but I had not probed to the level where the client understood that I needed the “admin” rather than an “editor” ID.

As the saying goes, “Well begun is half done”. The Murphy’s Law corollary is “Start poorly and everything else will fail”.