A banner with the words Tool Tip! and the words "Use icons on your docs and website" written on a small blackboard.
Tools & Tips, Websites

Using Icons in Websites and Documents

If you’re building a website or working on a document and you want to use some icons, where do you find them? A well-placed and well-designed icon can really give your site and files a professional look and feel.

There are many places to find them but you can quickly search Bootstrap, Font Awesome and Google via the Icon Reference page on the W3S site. Other icon sets, along with Font Awesome, are available from this Bootsnipp page.

From here, as the URL suggests, you can search the main open-source font sets using keywords. Or you can select a particular font set, if you have a preference.

The instructions below are for using the icons on your website. I’ll describe how to use them in a document in another post.

Search for an icon to use.

Type a relevant word into the Search box and click Enter. Keep in mind that most labels have a US focus, so you should look for trash instead of bin. In the example below, I searched for “home”. Scroll down the page to see the available options.

Get the link text for your icon.

When you’ve found the icon you want to use, click on it. This opens up a window showing the code to use for the icon. Press Ctrl+C to copy the code then OK to close the window.

Paste the code into your file.

Because the code is HTML, you need to make sure you are working in a format that can read it. If you are working in a WordPress template file (.php) or an HTML file, then you can just paste it in. If you’re in a blog post or page you will need to make sure it is read as HTML. In Gutenberg, do this by choosing the Custom HTML block type, which is listed under Formatting. If you’re using the Classic Editor, you should change to the Text tab and paste it in position.

Add a link to the icon source to your website’s header file.

When a browser reads an icon file link, t needs to know where to get that information from, so you need to put the link information in your website. The best place to do this is somewhere that’s related on the every page. In most WordPress template, these links will be there by default. If you find that your icons aren’t showing, check the header file, and if it’s not there, paste it in.You can find all the links on the Links for Font Icons page of this site.

That’s it! Just upload the edited header file to your server and your icons will be displayed. Here’s how my home icon looks on this page, with the icon code inserted here –>

For reference, here’s a link to my page with the icon source links:
Links for Font Icons

Tools & Tips

How to Install New Fonts in Inkscape

I wrote a post a few months ago about using SkyFonts to install new fonts in Inkscape, a freeware graphic design package that is a great substitute for Adobe Illustrator and Corel Draw. When a client was asked me about this, I directed them to my original post, only to discover that those instructions no longer work. Typical! The question then, is how to solve this persistent issue with Inkscape when the SkyFonts (which I find has become unreliable and unstable) workaround doesn’t work?

The new solution involves nothing more complicated (on Windows) than installing them in the standard fonts directory (C:WindowsFonts) but it also seems that in some cases this also fails to work. In my client’s case, it was because the fonts were not installed for all users. This means when you have downloaded a font, instead of double-clicking then clicking Install you have to right-click and choose Install for all users instead. Fine, but my client didn’t have this option! If this is the situation you find yourself in, here are instructions for adding new fonts that will be read by Inkscape (and Gimp). If they work for you (or if they don’t!), drop a comment below.

Download and unzip your new font files.

When you download a new font, it usually comes as a zip file. a. Download the zip files then extract all the files.

Install the fonts.

a. Navigate to the folder containing the new font files. These will usually be in TTF format.b. Select all the files, then right-click and click Install.If you see a shield icon next to the Install instruction you will be installing it as an administrator and the font will install for all users by default. If you do not see this option, you do not see this option, try holding Shift when you right-click, the choose Install for all users. As above, you should then see the shield icon next to this instruction.Finally, if this doesn’t work, move the fonts folder you created to somewhere on your C drive (I suggest C:Temp) and they repeat this step. This will remove the fonts from what may be a user-assigned directory.

Open Inkscape and use your new font!

If you had Inkscape open, close it, then launch it again. Your new fonts should be listed.

How did it go? Are your fonts all installed?

If you’ve not heard of this software before, it’s worth a look. You can download Inkscape from here and Gimp (like Photoshop but without the price tag) here.

Tools & Tips

Tutorials to Help You Use Your Computer

I’ve been gradually putting together a list of tutorials aimed at solving issues addressed by my customers. Now there are a few to choose from, this post will help you to find them more quickly and easily.

A diagram of the QWERTY keyboard lowercase characters
Productivity Tools, Tools & Tips

Typing French Accented Characters on a QWERTY Keyboard

QWERTY or AZERTY?

If you’re using a computer designed for the English-speaking market, be that US, International or English-English, it  can be a challenge to type French accented characters. In systems set up for French speakers, its far simpler because they have a AZERTY keyboard, which gives quick access to the characters and symbols that are needed. For English-speakers, our systems are shipped by default with a QWERTY keyboard – so called because the first six characters on the keyboard are Q-W-E-R-T and Y. Since that keyboard is designed around the frequency of letters and characters used in English (and there are some US and UK differences, in the main they are the same) obviously there’s unlikely to be any reason to access the many accented letters used in the French alphabet. But what if you do find you need them? Maybe you’re studying French or resident there, or a native French speaker stuck with a QWERTY system. In this post I’ll describe three different workarounds that will make it much easier to find the accents you need.

Three Ways to Type French Accented Characters

One way is to become familiar with the ASCII or ANSI codes for each accented letter or symbol. These are basically a combinations of machine-readable codes that anyone who’s worked with HTML will probably have come across already, and usually involve a combination of keys, such as Alt or Alt+Shift and a three- or four-digit number. For example, press Alt and type 0181 and the micro character, “µ”, is displayed. These codes can seem laborious to learn at first but, as a tech writer (by trade), I’m a big fan of these; they’re the only way to program special characters into FrameMaker template headings and in non-WYSIWYG coding tools with the benefit that if you programme the ANSI code you know it’s going to come out right at the other end. I guess I just got used to them. If you want to give them a try you can use the list shown in the table below.

LetterAccented Character & ASCII (Lowercase) CodeAccented Character & ANSI (Uppercase) Code
Aà = Alt + 133
á = Alt + 160
â = Alt + 131
À = Alt + 0192
Á = Alt + 0193
 = Alt + 0194
Eé = Alt + 130
è = Alt + 138
ê = Alt + 136
ë = Alt + 137
É = Alt + 144
È = Alt + 0200
Ê = Alt + 0201
Ë = Alt + 0203
Iî = Alt + 140
ï = Alt + 139
Î = Alt + 0206
Ï = Alt + 0207
Oó = Alt + 162
ô = Alt + 147
Ó = Alt + 0211
Ô = Alt + 0212
Uù = Alt + 151
û = Alt + 150
Ù = Alt + 0217
Û = Alt + 0219
Æ æ = Alt + 145Æ = Alt + 146
Cç = Alt + 135
Quotation Marks« = Alt + 174
» = Alt + 175

Another useful code is for the Euro currency symbol (Alt+0128).
And advantage of knowing the ANSI codes is they will work on ANY system: Windows, Mac, etc.

The second way involves installing the US or UK International Keyboard and using this in place of your US or UK default. This method is relatively simple once you’ve got the keyboard set up. There’s a small learning curve but no long term memory demands. I have a printed list of the ANSI codes – and sometimes they are useful – but since I installed the International keyboard I am using them less and less.

Finally, you can install the French (of French Canadian) keyboard, which uses the AZERTY layout. This isn’t so easy to use on a QWERTY keyboard unless you have excellent visual memory because the layout is very different. I don’t recommend this option on a PC. It’s less cumbersome on a MAC because that also gives you a visual keyboard option (this may exist for Windows, but if so I haven’t found it – yet). Since I’m talking about Windows here, we’ll skip right over this and go back to the International keyboard layout as I think that’s the most accessible of the three options for Windows users.

Here’s an overview of the differences and a quick reference for accessing the accented letters on the International keyboard and also a few other suggestions that make writing in French on a QWERTY keyboard more manageable.

Differences between the UK Default and International Keyboards

The two images below show the main differences between the regular UK and International keyboards. They’re really very similar – and anyone who also uses a Mac or iPad will be familiar with the placement of the @ and ” symbols; it’s just the behaviour, with regards to combining keystrokes to add accents, that makes the difference.

QWERTY_CAPS
UK International vs Default Keyboard Layout (Uppercase/Shift)
QWERTY_LowerCase
UK International vs Default Keyboard Layout (Lowercase/No Shift)

UK International Keyboard Quick Reference

You can always find visual representations of the International keyboard to help you navigate it but they are pretty confusing in themselves. This list of key strokes is, I find, easier to use.

Accented Letter(s)AccentDescriptionExample
á éAccute  (single quote), the letter (a, e, i, o, u)‘ a = á
‘ e = é
à èGrave`(key to the left of the 1 on the keyboard), the letter (a, e, etc.)`a = à
`e = è
êCirconflexShift+6, e^ e = ê
çCedille (single quote), c`c = ç
öTrémaShift+’ (single quote), o‘ o = ö
« »Quote marksCtrl+Alt+[
Ctrl+Alt+]
[ = «
] = »

The only snag with the above is that the key you use to apply the acute, grave and tréma accents is also the one you need to work alone, should you need a plain ol’ apostrophe. To do this, just hit the apostrophe (single quote) key, then hit the spacebar twice: the first time to make the apostrophe mark, the second time to add a space after it. The same goes for UK and US English-style quotation marks (curly quotes):

To get an apostrophe, type: ' (single quote), space, space

To get UK/US quotation marks, type: Shift + ' (single quote), space, space

Once you have the International keyboard setup you’ll wonder how you every managed without it. Setting it up can be tricky though – so in my next post I’ll give you instructions on how to do it.

If you are trying to setup your QWERTY or AZERTY computer and need help or have issues with any other aspect of your home or business IT, read about the range of services we offer and get in touch for a quote.

Like this site? You can follow me on Facebook, Instagram and Twitter

Tools & Tips

Move MySQL Database Files between XAMPP Installations

I recently had the (dis)pleasure of having to reinstall my laptop. Of course this happened when I had a deadline. Then, when I found I was unable to access the web development project files I needed due to an error with the XAMPP installation of Apache, I was facing a lost afternoon. The question was, how to migrate my PHP database from one installation of XAMPP to another while unable to open PHPMyAdmin and export them? Luckily, the answer was simple.

To do this:

Move MySQL Databases from one version of XAMPP to another

Download and install XAMPP.

https://www.apachefriends.org/download.html

Verify the Installation

Run Apache and MySQL and check that both are working, then Stop both processes.

Copy the database files from the old to the new installation

In the new version of XAMPP, delete the folder ..mysql/data (I usually just rename it by adding the prefix “z” so that I don’t have to go hunting for the files if I need to replace them.)Copy the entire data folder from the old XAMPP installation folder to the new one.

Start Apache and MySQL and check your files

Start both applications then check for your database names int he list of databases in PHPMyAdmin.Then check your websites at //localhost/yourwebsiteaddress

That’s it! It was one of those jobs that I thought would be a massive headache but turned out relatively simple and – more importantly – fast!

Now, back to work…

Productivity Tools, Tools & Tips, Websites

From Yoast to SEO Press

Since I first started working with WordPress I’ve been using the Yoast plugin for my SEO. It’s a great tool. I’ve been happy with it and have been happily recommending it to clients. But lately there’s been chatter in some groups where WordPress pros and others discuss their SEO tools of choice, and I’ve been hearing very good things about SEO Press. After reading many reviews to find out more, I’ve decided to give it a go.

As I type, I’m backing up my personal blog and will shortly be installing SEO Press. Once it’s installed I will then go through the configuration and setup procedure (if there is one) and then work on and publish my first post using it. According to the instructions I’ve read it’s simple to use and has some great features, such as tools to help with titles and metatags, the creation of XML and HTML sitemaps (the latter being somewhat overlooked these days but still very helpful), content analysis with unlimited keywords, and also making it easy to implement Schema – a form of metadata that is increasingly favoured by search engines, giving your content much greater visibility in searches.

There’s a comparison of the tool’s features on the SEO Press website. It sounds impressive, at least for a free plugin. As with anything the proof will be in the pudding. After using it for a while I’ll come back with a review – on usability and also whether it makes any discernible difference to my site’s SEO! Of course, there’s no plugin in the world that can actually boost your site’s SEO. Only good writing and constant review and improvement can do that! But what a good SEO plugin can do is guide you a little and make some of the technical side of SEO, such as adding Schema tags and maintaining your XML sitemaps, easier to manage. Wish me luck!

Do you need help with your website SEO or WordPress tools and plugins? If so, contact me to arrange a free consultation – no obligation.

Tools & Tips

Using Git (via GitBash) for Version Control

Whether you’re working on content or code, version control is the best way to stay sane. Being able to edit your work knowing that any mistakes or problems can be rolled back is reassuring – and also an essential part of a professional content writer or coder’s workflow.

It can all sound super-nerdy, but using Git is surprisingly simple. I’ve been using GitBash, which really helped to demystify the process. There are only a handful of commands required. After a small amount of setup (setting your Environment Variables, for example) you’ll be ready to go.

Here’s a quick reference to all the git commands you need.

To create a new git repository:

  1. Navigate to the directory containing your files (for WP dev can navigate straight to the directory for your theme: don’t waste time and space adding the whole wp-content folder as most of the time you won’t touch it.)
  2. Type git init.
  3. Type git add -A to add all the files in that directory – or use the specific file or folder name, if you just want to add a subset of the directory contents.
  4. Type git commit – and you’re done.

If you make a mistake and need to remove any files (as I’ve just accidentally done):

  • Type git rm -r [file-name.txt], where file-name.txt is the file or folder to remove.

After making updates:

  • Type git commit -m “[commit message]” to commit your changes.

That’s it!

For a full list of commands, there’s this handy list on github.

Are you using git to track your project’s changes? If not, why not!?

Productivity Tools, Tools & Tips

Three Free Software Tools for Small Businesses

If you’re running a small business, when it comes to admin it’s easy to stick with what you know. I see many clients trying to manage invoicing and time tracking with Excel or an equivalent spreadsheet, or posting to each social media channel separately. And managing projects can always be tricky, especially when you have multiple clients. But software has moved on. Now there are many Cloud-based applications that can really transform your efficiency. In this post I’ll introduce what I think are the best three free software tools. I hope by using one or all of them you’ll find will help you be more organised and efficient with your business admin.

1. Harvest – for time tracking and invoicing

If you’re charging for time or services, this is a great app that, with some canny configuration, you can use for free but still track time for multiple clients.

The interface is clean and intuitive. You track your time, you invoice for that time, you track the progress of your invoices (sent, unpaid, paid) etc. and you can also generate some great reports based on date ranges.

The Harvest Time Tracking Software Invoice Page

If you want to go further, you can also start using it to track expenses.

A nice feature of this app is that it’s very easy to customise the standard field labels in your invoices, making it perfect for those of us running businesses outside of the US or UK. Just go into Invoices then Settings and select Translations, make your changes, and then click Save Translations when you’re done.

Translate your Invoice Field Names with Harvest

Since the French fiscal year starts on January 1st, it’s not too late to set up something new like this. You can easily migrate your invoices, in order to keep the report up-to-date.

As I mentioned earlier, it is perfectly possible to use the free version of this app to manage multiple client projects and will be showing you how via my Facebook page with a Live in coming weeks. Contact me if you need any help!

2. Trello – for tracking projects and making lists

Trello is one of those super-simple apps that has so many great features, you’ll wonder how you managed your projects without it.

It works around a system of “boards” – think, if you had a physical white board in your office on which to collect and prioritise related tasks. For example, you could create a board for each of your clients, or a board for admin tasks.

A Blank Trello Board
A Simple To Do List Board in Trello

Within each board you then create cards within the board. A card is a category into which you add tasks. You give each task a title then you can add as much or as little detail as you like. There are fields for a description, comments, a due date, and more.

When you create a new board you get a new pallet for creating colour-coded labels unique to that board. Here’s how my Admin board looks with a few label categories defined.

Once you have a simple board like this, this is where it gets interesting.

  • Add a Power-Up (one per board, with the free version of Trello) to add functionality, like linking to your Harvest account, meaning you can track time for specific tasks and assign them to clients. This is a really slick way of integrating your project tasks with time tracking and invoicing.
  • Copy and link tasks across boards. So, for example, you could have a client-specific board with a task, “Update Website”, that you duplicate and link under your Tasks board.
  • Enable collaboration, by sharing boards with others or creating teams.

You can also use Trello to keep track of lists. For inspiration there are hundreds of sample boards in the Trello Gallery. Here you’ll find layouts to help you to manage a job search, build a software application, manage your social media content, even plan a wedding or move house — you name it!

It’s a powerful tool with too many features to cover in this summary post. If you have questions about using it or the best setup for your business or project, get in touch and I can help.

To help you get started I’ve made my Admin Tasks Template board public. You can access it here. and you’ll find instructions for copying it to your own account on Trello’s help page.

3. Buffer – for social media scheduling

We’re all on social media theses days and, whether you love it or hate it, it’s an essential part of the marketing strategy for any business. But it can be a real time suck. Make your life easier by scheduling your social media posts. Then you can set aside time to create your social media in advance, then let the posts roll out over the week or month (or however long you plan ahead). I like this over and above other schedulers like HootSuite because it’s simple and is all about scheduling, so it stops me from getting distracted, reading and replying to other people’s posts, responses, and messages.

A Free Version for Publishing to Three Channels

With the free version of Buffer you can link to up to three channels, including Facebook Pages and Groups, LinkedIn, Twitter, and Instagram. If you have multiple businesses to promote the workaround is to setup a Buffer account for each business. Or you can upgrade to a paid account.

Handy Browser Plugins

There are also a handy browser plugins, enabling you to quickly create posts with a single click right from the web page you’re reading.

Working your social media this way will really save you a tonne of time!

4. Google Keep – for storing info from the web

Last but not least, Google Keep is worth a mention. You can use it to collect information about anything and everything you find online, from potential suppliers, customers, competitors, tools, holidays – whatever! It’s easy to use, then, now and again, go into you account to transfer the mot useful stuff to a Trello list.

Google Keep comes with browser extensions and mobile phone apps, so it’s easy to add links to it from any device.

A set of colourful badges with the "W" from the WordPress logo - and banner text saying: Working with WordPress: Site Migration Tips"
Tools & Tips, Tutorials

Access WordPress Installation without a Domain

Let’s say you’re moving a WordPress site from one host to another. Before changing the DNS settings on the domain you want to migrated the site’s contents and test it rather than make all the changes to a live site. The way to do this is to make a few simple edits to a text file. Here’s how.

Instructions for editing your Host file, to direct your browser to WordPress on the server.

Find your server’s IP address.

Login to your CPanel account. The IP address you need is shown under the heading Shared IP Address in the General Information. Make a note of this.

Navigate to the hosts file and open it with a text editor.

The file, called hosts, is stored in C:\Windows\System32\drivers\etc. You may need to click through a popup asking for Administrator access. Just click Continuewhen prompted.NOTE: If you are trying to open the file from within an application, such as Notepad++, and are not in Adminstrator mode, you won’t see the file. To rectify this, navigate to the file via Explorer then double-click to open it in your text editor.

Update the file.

You will see some intro text describing the purpose of the file and then, at the bottom, some text that includes an IP address and a label, like this: 127.0.0.1 localhostThis is an instruction that says, “when I type localhost into my browser, redirect the request to 127.0.0.1.”We will use this to redirect requests to the domain to your copy of WordPress on the server. Add a new row of text under any other redirects, in the format shown below: X.X.X.X yourdomain.comwhere, X.X.X.X is the IP address you just retrieved from your CPanel account. yourdomain.com the domain you will be transferring to (where WordPress is installed.)

Save the file.

When you’ve finished editing, save the modified hosts file.

And that’s it. Now, when you type the domain into your browser you will access the server-installed WordPress installation. Now you can get this all set up, transferring all the data from your old site to the new server, making sure everything works, before changing the DNS settings on your domain to point to the new host.

But what about when you want to see online version of the site? Well, simply open the hosts file and comment out the edits by adding the # symbol in front of the code, so:

X.X.X.X yourdomain.com
becomes
# X.X.X.X yourdomain.com

Now you can test your site on the new server before changing the DNS settings on the domain. No downtime!

Troubleshooting, Tools & Tips

A Workaround for the Google Drive Download Error

Store your docs in the Cloud, they say. And we do. And some of us like it so we have multiple accounts. So when we’re using Google Drive to store docs online and then cannot download them, it’s a real pain! The particular error I’m referring to is this one:

Error screen that says: "Access to doc-14-4c.docs.googleusercontent.com was denied. You don't have authorization to view this page. HTTP ERROR 403."
An unhelpful 403 Error when attempting to download files from Google Drive

It’s caused by a conflict between the account containing the files and your default account. For example, your main account is called mainaccount@gmail.com and your files are stored in one of the Drive folders for workaccount@gmail.com. Google doesn’t like you downloading to another account, which is what it thinks is happening.

It’s a problem that’s been around for a while (I found bug reports going back to 2018) but not one Google seem to have fixed. So what to do? Unfortunately, banging your head against the wall will just give you a headache, so lucky for you I’ve already tried that and found a workaround.

Download your Google Drive Files

The workaround to this annoying 403 error is:

Total Time: 5 minutes

Share the folder or file with your default Google account.

Right-click on the file or folder, select Share, then enter the email address for your main account.

Login to Google Drive on your default account.

Click on the list of accounts on the upper-right side of screen. This shows your list. Click on the default account to change to.

From the default account, find the shared file or folder.

Select Shared with Me from the list on the left of the screen.

Download the files.

Right click on the file or folder and select Download.