Mark Inns — Archives

Archived Articles 2009 — 2012

These articles were written by Mark Inns between 2009 and 2012 to share experiences in web design and coding. Some solve a specific problem, some are just for fun. This content has been moved to the archive to exist as a reference resource that will no longer be updated.

For the latest stuff on a broad range of subjects and more about Mark visit the homepage.

Adding ‘first’ and ‘last’ classes to Joomla 2.5 Menu Items

Written on 03/02/12

Adding classes to the first and last element in navigation menu can be helpful in defining menu styles. We can easily add extra class “first” and “last” to the respective elements of the menus by adding a few lines to the menu module code. This as far as I know has never been a feature in Joomla, going forward adding the classes should be made redundant as support for CCS3 matures and we can reliably use the CSS3 Pseudo-classes :first-child and :last-child but until then.

How To Setup A Local DNS Host File On Mac OS X

Written on 20/01/12

A local DNS host file can be useful when developing a website. You can have a build environment and a production environment and simply point the host to the build environment on your machine, and your machine only, while all of the other users are directed to the live site. This allows you to work on the build environment and fully test prior to pushing the changes to the live production site.

Increasing the Number of File Links in Typo3

Written on 21/10/11

This is a problem I discovered when uploading files for a client into a Typo3 site. By default Typo3 sets a limit of 10 files it allows to be uploaded. If you try and upload any more you receive a generic error message in the form of a yellow triangle warning.

Adding two Google Analytics accounts to one page

Written on 06/05/11

There are times when you would like to track your page visits using Google Analytics and also someone else wants to do the same. We have had this situation where the client wants to have the data in their analytics account and we also would like to track the site using our account. We have also had external SEO companies that want to track the site using their account.

Useful Wordpress Snippets

Written on 15/04/11

There are loads of things that can be achieved very easily in Wordpress if you know how. Many of these things can be done in just one line of code, so here are a few that I have found useful in the past and want to keep a record of for use in the future.

Displaying a From Field Depending on Previous Question using jQuery

Written on 07/01/11

Sometimes forms on websites can look daunting to users when there are lots of fields to fill out. A neat solution is to hide fields that are only required depending on a previous answer. In the example I have created suppose you have a form with a drop-down list of peoples titles we have all the usual titles included but what if a Professor filled out the form? We add another fields to the form for 'other' that only needs filling out if the correct title was not available in our drop-down. 99% of people filling out the form will not need to use this field so with a little bit if Javascript magic we can hide the field unless a user selects 'other' from the drop-down. This approach gives us much neater form for users who have Javascript enabled and will degrade nicely for those few who don't.

Recreating the Fade Scrolling Text Marquee on Twitter

Written on 19/11/10

Scrolling marquees were widely used on many early webpages that used the now defunct non-standard marquee tags and have fallen out of vogue in recent years. The twitter.com homepage show that the effect can still be used to good effect today in a more subtle manner. We can use client side scripting to create the effect without the use of proprietary tags.

Wordpress Custom Permalinks Problem

Written on 15/10/10

I have been doing a lot more work in Wordpress recently and have come across a problem turing on clean URL permalinks. The permalinks system has worked for me straight of of the box on MediaTemple and 1&1 servers but I have been getting an error message on Webfusion and 123-reg servers.

Hanging Quotation Marks

Written on 08/10/10

Having recently released a Joomla Module that allows you to add blockquotes to your Joomla sites I have had a few requests for some further information on styling blockquotes. Blockquotes are intended to be used separately from other text in its own block, if you want to include an inline quote you should be using the Q tag. The Q tag adds quote marks, Internet Explorer being the exception to the rule, the blockquote tag does not.

Making Smiles using only CSS & Vertical Text

Written on 24/09/10

This week I needed to create a 404 error page for a project, I wanted to create something simple that was purely CSS with no images. I wanted the page to have something graphical as well and decided on a large sad smilie. The challenge here is to get the text :-( to display vertically.

Random Banner Script using PHP

Written on 27/08/10

I wanted to start alternating the banner advertisements on this site so started looking around for the simplest way to randomly display a different banner in my case a few lines of code that included the link, image and some text. I found a number of scripts that all seemed a bit clunky. I started thinking there must be a better simpler way.

Free Joomla Blockquote Module

Written on 30/07/10

Download the latest version of the blockquote module. Blockquote is a simple extension that allows you to add your own custom quote to any module position in your Joomla install and have it displayed in the front end.

Move Related Products to Centre Column in Magento

Written on 09/07/10

The default theme for Magento has the related products block on the left hand side which is not necessarily the best place for it. A more logical place to put related products is under the product description in the centre column. It is simple to move the related products block but you need to know where to look.

Password Protecting Your Site with htaccess

Written on 02/07/10

It is sometimes handy to be able to password protect your pages or an entire site. Maybe you're building a new site, but you only want yourself and client to be able to view the work-in-progress. Apache allows you to fairly easily add password protect an entire site, folder or individual file.

Simple Share on Twitter Social Link

Written on 25/06/10

At the moment it seems to be fashionable to add social networking links to your website. Recently a client wanted a quick and simple link to share a post on Twitter. The Twitter API is comprehensive but can be daunting for those with less advanced coding skills.

Fixing a Broken Contact Form on a Joomla Site

Written on 18/06/10

If you are having the same problem as I have had with the Joomla contact form not delivering the mail to your email address maybe this solution can help. This problem only occurs under certain circumstances. You Joomla site is hosted on one webserver, your mail is on another and your DNS records on another. This circumstance is more common than you would expect, say you register your domain with 123-reg and enter your MX records here, your site is hosted elsewhere and you are using Google Apps (gmail for domains) for your email.

Homepage Conditional Statements for Joomla 1.5 Templates

Written on 11/06/10

Jommla 1.5 the popular content management system (CMS) is built using PHP allowing you to use conditional statements within your templates to further control site. A common requirement is to determine if we are on the homepage. There are a few ways of doing this as outlined in this article using different conditions.

Redirecting Visitors to a Holding Page while you Develop a New Site (Apache)

Written on 21/05/10

When you are uploading and testing a new site on the same domain as an existing site you need to keep the public from seeing a part finished site while you are uploading the files and sorting out any problems.

Export Excel CSVs with Double Quotes

Written on 09/04/10

Excel allows you to save spreadsheets using CSV file format. This particularly helpful as you or your client may have data, say a product catalogue, that can be imported into another application. Continuing the example you may want to import this data into a shopping cart system like Magento. This all sounds good so far but Microsoft in their wisdom don't allow you to alter preferences for the CSV file format. Excel does it's own thing and if that does not match your way or the software you want to import the data into then things get a little more complicated.

Granting Database Privileges in MySQL via SSH

Written on 26/03/10

This week I experienced some problems installing Magento the Open Source shopping cart system onto a dedicated server hosted by Wedfusion. The installation seemed to go well until just after the database was populated by the installer script. All the tables were created as expected but Magento produced a rather unhelpful general error. After some investigation it turned out that the issue was occurring because by default a database created in the server control panel do not assign the CREATE TEMPORARY TABLES privilege to the database user. To fix the issue all I needed to do was add the privilege to the user and the installer then works flawlessly. Below are some simple instruction on granting privileges in MySQL via SSH.

Create a Simple CSS Pin Map with Ease

Written on 19/03/10

It is easy to create a map with pins that you can position to correspond to a point of interest then hyperlink the pin to another page or get creative and use javascript to trigger an event. In this example we have a map of the UK with pins positioned roughly over the top ten cities by population. The pins link to the cities Wikipedia page and use the title attribute to show the name when hovering over the pin. This is a bare bones example for you to build on, you could use image sprites to change the image of the pin to a marker of your choice or use javascript to create information bubbles when you mouse over the marker the choice is up to you.

Animating with Javascript Fish Tank

Written on 26/02/10

Using Javascript to create some movement on a page can be accomplished with a bit of maths. The advantage of using Javascript for very simple animations is that a higher proportion of users have Javascript available then have Flash installed.

Make a Dotted or Dashed Line in Photoshop follow a Path

Written on 12/02/10

Drawing a dotted line is easy in Illustrator. You just change it in the stroke palette. You would think it was just as easy in Photoshop but it is a little bit trickier. This short tutorial aims to show you how to quickly make a dotted or dashed line in Photoshop and then apply it to a curve.

Simple two line Image Randomiser Script with jQuery

Written on 05/02/10

It's a common task adding a random header or banner for each page view. If you are already utilising the jQuery library you can add just two lines or if not you have a few more lines to get the job done.

Checklist of Things to Remember when Launching a Website

Written on 22/01/10

There are a few of these lists around on the internet giving people advice on what they should check before they launch a website but most contain things that should be thought about from the very start. If you have forgotten about browser testing, screen resolutions & progressive enhancement until you are ready to launch you should take a look at how you are going about the whole build process.

How to toggle invisible files in OSX

Written on 15/01/10

OS X has numerous invisible files and folders. They are hidden to protect users from mistakenly moving or deleting critical files that might break the system or the applications that depend on them. Sometimes however you may need to find and use these files but OS X unlike its Windows counterpart has no options to show/hide hidden files anywhere. There are options, third party software is one and here a few others.

Free LCD Vector Font Digital Numbers

Written on 01/01/10

I worked on creating this front as a bit of fun and thought someone may find it useful so am releasing it into the public domain as a free LCD number font set. The fonts are supplied as a fully editable EPS document and can be used in any print, digital or other application.

Not So Clear CSS Opacity and RGBa

Written on 18/12/09

Support for transparent PNG paved the way for the use of semitransparent elements within website designs. CSS3 introduced the ability for developers to alter the transparency of an object with the opacity property. This method has some inherent problems, luckily there is a solution; the much less well know RGBa model.

Using Googles Chart API to Create Charts for your Web Apps

Written on 04/12/09

The Google Charts API allows you to send data to Google and have it returned as a graph or chart. All the hard work is done for you by Google and its servers and you simply reference an image in your HTML. You pass Google the raw data — the numbers for the charts, axis labels, and so on — as part of the image’s URL. If you want to add charts to your site or web based applications to show dynamic data the Google API is a quick, easy and attractive choice.

Using Numbers as CSS Class or ID Values

Written on 20/11/09

This week I found myself in a situation where I needed to apply CSS to an element only on a specified page. The best way to do this is to add an id to the body tag of the said page thus allowing you to apply a style only to that page. The example below shows an ID applied to the body tag. This is good practice when building your sites but sometimes easier said then done when using a Content Management System to dynamically generate your pages.

How to Prevent or Allow Directory Listing

Written on 13/11/09

Having a list of files in a directory on your site sometimes is useful. You may for example want a directory you can upload large files to for others to download without wanting to spend time creating a fancy PHP (or your preferred language) interface. It is important to understand the security implications of allowing directory listings. Listing files in directories that contain your code will make it easier for someone to compromise your site. We recommended you restrict listings to specific folders. You can easily control this behaviour on your Apache server using one simple line in a .htaccess file.

Using SSH in Terminal.app on Mac OS X

Written on 30/10/09

This article will teach you how to open a SSH connection using the Terminal application in OS X. OS X's UNIX background means there is an easy way to exchange data with your Linux/UNIX web server using the built in Terminal application. SSH, if enabled, allows you to remotely execute commands on your webserver that can be helpful for all sorts of purposes.

How to Create a WebClip Bookmark Icon for your Site

Written on 16/10/09

Apple allows iPhone and iPod Touch users to add bookmarks to the home screen of their device. These bookmarks can be added for any web page and appear as an icon on the home screen. Apple calls these WebClip Bookmarks. By default, the icon used for this home screen is a thumbnail screenshot of the page in question, but Apple have provided a mechanism for site owners to specify an icon to be used instead.

Rewriting URL’s with Apaches .htaccess

Written on 09/10/09

This article looks at some common scenarios where a htaccess file can be used to manipulate a websites URL. Here we are going to look at how we can use htaccess to redirect our visitors to another location or accomplish some other common tasks.

Centering Widthless Floats

Written on 25/09/09

This week I had a problem with centering a widthless floated element with CSS. It seemed an obvious thing to want to do but I could think of no simple solution, align centre was not going to cut it here.

How to convert your site into a Joomla 1.5 Template

Written on 18/09/09

This tutorial will show you how to create a simple Joomla 1.5 template. The tutorial assumes you have already created a XHTML layout for your site along with the CSS and images and that you now want to use your design with Joomla. Joomla is one of the best known Content Management Systems (CMS) around but creating a template for Joomla can be a confusing process, hopefully this insight will make it a bit easier.

Fancy Horizontal CSS List Menu

Written on 11/09/09

This week I am going to show you how to make a simple horizontal CSS list menu then make it a bit fancier. The objective here is to show you how to create a simple, cross browser compatible CSS list menu that will work in all browsers then build on the basics to make the menu more attractive using images gradients. All the source files are included and a demo is available

Make iPhoto open for your Camera not your iPhone

Written on 21/08/09

If you are an iPhone user who charges your phone using your Mac when you are at home or at work it can get tiresome having iPhoto launch every time you connect your phone. It would seem like there would be an obvious way to stop iPhoto opening each time you connect and there is but its not in the place where you change other iPhone settings — iTunes nor is it in iPhoto itself but you will find it in the sometimes forgotten Image Capture application.

Creating and Using CSS Sprites

Written on 14/08/09

CSS sprites are a way to combine images to improve our page loading time and reducing the number of requests our server performs. CSS sprites have been routinely used in CSS for a number of years in rollover effects where loading one image that contains both states. The problem with using two images here is when the page loads, the first image is loaded by the browser, the user then moves the cursor over the image and only then does the browser send the request for the second image. By waiting until the user is already hovering over the image to download the second file the user may experience a delay before that image is fully downloaded by which time the user may have already moved the cursor away. Using CSS sprites one images is used but only partially displayed then moved to show the hidden area containing the hover state. An example of this can be seen on this site in the sidebar, hover over the RSS feed and you will see the hover state of the RSS image.

Illustrator Tutorial: Neon Tube Light Mudflap Girl

Written on 07/08/09

Neon is a great way to draw attention to something, and that is why you see it everywhere in places like Las Vegas were everyone is trying to grab your attention and get you into their casino or club. The same principle can work for you in your prints and digital designs.

Installing Memory in a Early 2008 Mac Pro

Written on 24/07/09

My Mac Pro has just had it's first birthday and it was time to buy it a present - some new memory. The Mac Pro (Early 2008) comes with a minimum of 2GB but has a maximum capacity of 32GB. Although a have been trundling along with 2GB for the past year I am aware a memory boost would improve my machines performance with Photoshop, Aperture, Illustrator and in general. I decided another 8GB was what I needed and purchased a matched pair of 4GB DIMMs, I could have brought more 1GB DIMMs that has the advantage of filling all the slots and making best use of the memory buses, but decided the larger DIMMs would allow me to install the maximum 32GB at a later date.

Creating an Isometric Pixel Art Car

Written on 17/07/09

This tutorial should will show you how to draw a simple isometric pixel art car using Photoshop or any other graphics program you have on your computer. Pixel art uses pixels to create an image by building the picture pixel by pixel much like LEGO is used to make a model brick by brick. Pixel art creates a retro look that harks back to early computer game graphics where screen resolutions dictated the detail the games graphics could render.

Advanced CSS Selectors with Practical Examples

Written on 10/07/09

Selectors allow you to define the parts of your HTML documents you want to have styles applied to. CSS2 and later CSS3 brought with them a host of new selector specifications, designed to allow greater access to the elements and parts of those elements that make up a webpage. These new rules allow greater flexibility and accuracy in defining exactly which parts of your page get styled. Here we will look some of the new selectors and provide some real word examples of how they may be useful.

20 Handy Apple OSX Keyboard Shortcuts

Written on 03/07/09

Keyboard shortcuts can be a real timesaver, if you get to know a few for common tasks you can cut hours off your working week. The keyboard shortcuts are not application specific and should work in virtually any program running on OSX.

Facebook style Faces CSS Image Map

Written on 26/06/09

The popular social networking site Facebook allows tagging of people in photographs, this example does not provide the mechanism to add and drag tags to images but is a simple example of how a similar effect can be achieved using only style sheets and XHTML. This method may be useful for creating clickable faces on images on static webpages or as a basis from something more complex.

Remove index.php from ExpressionEngine URL’s

Written on 12/06/09

By default, ExpressionEngine adds 'index.php' into URLs before the name of any template groups. This results in a nice clean URL like mysite.com/about becoming mysite.com/index.php/about. A minor annoyance it may be but I have been used to Textpattern handling URI's in a much more elegant manner. Luckily there are a few solutions.

What is iTunes “grouping” tag for?

Written on 05/06/09

When tagging music in iTunes, I have often wondered what the “Grouping” column was for. I rarely, if ever, saw any data in this column after importing CD’s, but it seemed like it would be useful to “group” music by some other criteria. After some digging in the AppleScript dictionary for iTunes I found the official use:

Simple Traffic Light CSS Highlight Boxes

Written on 29/05/09

It is sometimes necessary to draw a readers eye to certain text on a web page, this may be a warning, important information or something else that just needs highlighting. It's easy to do with a little CSS, just apply a style to your important paragraph and voilà highlighted text.

Stop Image Hotlinking & Bandwidth Theft

Written on 22/05/09

Hotlinking what happens when someone copies and pastes images from your site to their blog or website. This practice may be purely accidental or downright theft. If someone hotlinks your images, every time that image is shown on their website, your server bandwidth is used. This can be an issue if your host company caps your monthly bandwidth. The smart way to prevent this is via a .htaccess file.

Internet Explorer 6, Enough is Enough

Written on 15/05/09

One of the biggest headaches for wed designers is the lack of uniform support for web browser standards. Standards exist and common sense dictates if everyone is using the same standards everything should be the same, however that is not the case. How browsers interpret standards differs and to make things worse others (Microsoft Internet Explorer) either totally ignore or make up their own rules.

The Lazy Mans Guide to Expression Engine SEO

Written on 08/05/09

Search Engine Optimisation is an important part of setting up a website for many webmasters. Out of the box ExpressionEngine does not make use of meta tags however it is it is extremely easy to have page-relevant meta tags by making use of the ability to set them using categories and tags.

Adding Extra Information to Hyperlinks using CSS3

Written on 24/04/09

A few days ago I was reading a blog article that had a link for an iPhone application in the text, nothing unusual there, so I clicked the link and iTunes started to load. When iTunes had loaded I was taken directly to the app store and the page specific to the app I was reading about. This got me thinking that it would have been nice to know I was going to be taken to iTunes before I had clicked the link. The author could have put a note in the text but this could well get tedious so I got to thinking of another solution and this is what I came up with this...

Replicating Facebooks Fixed Footer in CSS

Written on 17/04/09

Facebook's new layout unveiled last month (March '09) has proved to be controversial among many Facebook users. One element that has received an overhaul is the footer bar that is fixed to the bottom of the page. I was interested in creating a fixed position footer for another project so while I did some research on the best way of going about creating a fixed footer I had a go at replicating the Facebook version.

Free CSS Only Navigation Menu

Written on 03/04/09

When it comes to creating the navigation part of your website, the first thing you might think of is an unordered list that you style. In this article we’ll go through the creation of a custom navigation bar purely in CSS without using images.

Animating Background Images with Javascript

Written on 27/03/09

Coding and design don't always go hand in hand, designers aren't coders and coders in many cases lack design flare. Javascript started it's life in the realm of the coder and was used to perform calculations (this was the first javascript I wrote when learning about developing for the internet at university) but with all the script libraries emerging people have been able to find more ingenious things to do with javascript.

Simple PHP alternative to a full CMS

Written on 20/03/09

Sometimes a when you build a website using a full content management system is not always an option. You may not want or be able to use a database or the clients budget might not stretch that far. This was the case in a recent project I undertook but I still wanted to use a single template.

Elegant Universal/Global CSS Reset Solution

Written on 06/03/09

In a perfect world all browsers would interpret and apply CSS rules constantly across the board. Unfortunately the word is not perfect. All browsers have their own built in default styles they apply to a page when it is rendered, these styles vary and this causes elements to be displayed differently in almost every browser. So what is to be done? Applying our own set of reset rules before we begin levels the playing field across A-grade browsers and provides a sound foundation upon which we can explicitly declare our intentions.

Often Forgotten XHTML Tags you Should Know & Use

Written on 20/02/09

Over the years web authors have moved away from HTML tags in favour of CSS and while separating content from presentation is the way forward adding spans and classes can add more to markup than using XHML tags in the right places. Only a handful of these tags are used in the markup of web pages today. Here are a few XHTML tags that perhaps should be used a little more often than they actually are.

Textpattern Clean URL’s with .htaccess on Zeus Servers

Written on 13/02/09

The company I am working for at the moment has their hosting with Names Co. who use Zeus web server not Apache. This is not much of a problem, or so I thought. I would have stuck with Apache but Zeus has it’s own advantages and disadvantages and the hosting company who have chosen Zeus web server forced the decision.

Integrating “Digg This” Button with Textpattern

Written on 06/02/09

Textpattern allows the Digg submission form to be automatically filled out using the integrated “Digg This” button and some Textpatterm magic. This tutorial details the code used and a way to still display the button even with JavaScript disabled.

How to Prevent or Allow Directory Listing

Written on 13/11/09

Emailing PDF Forms with Adobe LiveCycle Designer

Written on 23/01/09

Having encountered problems producing fillable forms using Adobe LiveCycle Designer and needing to find a solution to send them back as PDF documents this article offers the solutions that worked for me.

Including/Linking Cascading Style Sheets

Written on 16/01/09

A Cascading Style Sheet provides formatting information to HTML/XHTML elements. Styles can be called from an external file, internally or inline. This article describes the various methods of including style definitions in your documents.

Differences between British and US Apple Keyboards

Written on 30/01/09

This article is a re-post of an old article I wrote about the Apple Ultrathin British edition keyboard from January 2008. There are subtle differences between the British and American editions you may not have ever considered like where is the hash key? I have updated the article to included some images so you can see the difference in the key layouts.