The New Look

If you’ve been visiting this Web site on a regular basis, you’ll have noticed the recent design changes.  In this article I’ll be running through a few technical aspects of the new design.

The site is built on a WordPress platform, version 5.5.3 at the time of writing, and the TwentyTen theme, version 3.1.  WordPress provides a stable and fairly simple-to-use CMS (content management system) and TwentyTen gives a nice clean page layout.  The previous design used the Atahualpa theme; before that (2002-2012) I coded all of the HTML by hand using the excellent plain text editor UltraEdit.

Why did we change?

Well, about a year ago I noticed that I was no longer able to access any of the vast array of customisation options which attracted me to Atahualpa in the first place: I needed to make some very small changes but when I entered the customisation screen, none of the individual option links worked.  Google wasn’t helping me find a resolution – none of the suggested fixes helped – so Bruce and I started discussing changing the theme to something with a slightly cleaner, more readable page layout.  However whilst this discussion was taking place in the background, I woke up one morning and the site was ‘broken’ – the widget areas had collided with the page content rendering both unreadable and with no access to Atahualpa’s customisation options in order to try to remedy the problem, we were forced into changing the theme in a hurry rather than as a carefully planned piece of work.

(Incidentally, as at the time of writing I still haven’t managed to work out why I can’t access all of Atahualpa’s customisation options.  If you’ve experienced the same problem and managed to find a fix, please let me know by emailing me or by filling out this contact form, as I have another Atahualpa site to which I need to make some changes.)

We quickly settled on the TwentyTen theme, which WordPress designed to be “stylish, customizable, simple, and most of all, readable“, and I think they managed to fulfil that brief.  I’m sure you’ll agree that the site has improved with this change.

Additional CSS (Custom Style Sheets)

TwentyTen offers a relatively small set of customisation options via the normal Customise menu, so although you have to work within these constraints, you’re also very unlikely to get much wrong, and your site content will look good even if you have little WordPress experience.  Specifically for this site, I’ve tweaked some of the settings using the Additional CSS option, and I’ve listed these changes at the foot of this article for you to copy if you wish.  Hopefully they’ll be discoverable by search engines and someone somewhere will be spared some of the frustration I experienced trying to get them right!  Please note that most of these are only relevant to the TwentyTen theme and are unlikely to work properly – or even at all –with a different one.  If you’re looking to create CSS to change other aspects of your TwentyTen theme, or if you’re using a different theme, the information is out there to be discovered using Google/Bing/whatever, although I’ve found that it tends to be hidden amongst a load of stuff which doesn’t work, so you might need to be patient and go through a lot of trial and error before you find the exact one you’re looking for.

Widgets

A word about ‘widgets’ – the stuff you find down the right-hand side of the screen.  WordPress comes with a large selection of pre-installed widgets, there are also hundreds (thousands?) of third-party ones which you can download and install yourself, and you can create your own directly using HTML inside a standard text widget.  For this site I’ve used the following:-

  • Standard WordPress Sidebar Login widget.  This allows visitors to login/logout directly from any page on the site without being redirected to the standalone WordPress login screen (which often makes people jump as they think they’ve broken the site).  This widget also allows the Webmaster to add shortcuts based on whether you’re logged in or out and your level of Web site permissions. 

  • Standard WordPress Search widget.  This allows visitors to search for site content quickly and easily, presenting the search results on a separate screen from which they can select and view the one(s) they’re interested in.

  • ClustrMaps: reports the number of page views for the previous thirty days and a world map showing where visitors to the site are located (map reset 14th November 2015).

  • StatCounter: a page counter showing a running total of all page accesses since inception.  The Web site owner receives a monthly report via email showing which pages were accesses on which dates.

  • Lex’s Last Update Widget: displays the date of the last page/post creation/update.  This is a useful indication to visitors to the site that it’s being updated on a regular basis.

  • Sponsored Links.  Google Ads attempts to displays adverts based on your personal preferences, and provides the Web site owner with a tiny amount of revenue whenever a visitor clicks one of the links or, better still, buys something from it.  When I say ‘tiny’… for sites with a relatively small amount of traffic like this one, the monthly revenue rarely exceeds 10p!

Custom PHP

There’s one piece of custom-written PHP which allows me to selectively display content to users based on whether or not they’re logged in.  For example, if you’re a casual visitor and you’re not logged in, the site’s home page will read “Welcome to my Web site” at the top and “If you’d like to be kept informed when there are updates to my Blog, please register as a user…” at the bottom.  If you’re a more regular visitor and you’ve registered and logged in, the home page will read “Welcome to my Web site. Thank you for taking the time to register and log in” at the top and “Please bookmark the site and check back periodically” at the bottom.  It can also be used to hide content which you don’t want to be seen by visitors who aren’t logged in, and since it’s executed on the server as the page is built, it’s not detectable merely by viewing the page’s source HTML.  Very useful!

To patch this code in, you will need access to the WordPress/TwentyTen functions.php file, either via the WordPress dashboard, by connecting with cPanel, or by downloading it using ftp, editing it locally, then re-uploading it.  Be aware that the code patch will almost certainly be overwritten if you update or reinstall WordPress/TwentyTen (or whichever other theme you’re using), so you will need to keep an eye on it whenever you do that and re-apply the code if necessary.

For more information about this code including how to install it, please visit my personal Web site.


If you would like to discuss any of the above, please visit the New Look discussion page.

Thank you.

Rudy Lacchin
Gloucester, UK
7th December 2020


Additional CSS used on this Web site

/* Site title and description */
site-title a {
  font-family: arial;
  color: #000000;
  font-size: 32px;
  font-weight: bold;
}
site-description {
  color: #000000;
  font-size: 14px;
  font-style: bold;
}

/* Header image width & height */
branding img {
  border-bottom: 1px solid #000000;
  border-top: 2px solid #000000;
  height: 198px;
  width: 940px;
}

/* Site title background colour */
site-title {
  background-color: #00FFFF;
}

/* Header & main menu background colour */
wrapper {
  background: #00FFFF;
}

/* Main menu font size */
access a {
  font-size: 13px;
}

/* Color of menu item */
access .menu ul li a {
  color: white !important;
}

/* Color of selected menu item */
access .menu ul li.current_page_item > a {
  color: yellow !important;
}

/* Font size for entire site */
p {
  font-size:16px;
}

/* Background colour of pages and posts */
.entry-content, .entry-summary {
  background-color: #00FFFF;
}

/* Blog post content width */
content {
  width: 640px;
}

/* Hide 'Post Date' & 'Post By' */
.entry-meta {
  display: none;
}

/* Hide post navigation links */
.nav-previous, .nav-next {
  display: none;
}

/* Footer background colour */
footer {
  background-color: #00FFFF;
  margin-bottom: 10px;
}

/* Copyright color */
site-info {
  color: #000000;
}

/* Copyright text before */
site-info:before {
  content: '';
}

/* Copyright text after */
site-info:after {
  content: '© 2002-2020';
}