Blog

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

admin

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

admin

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

admin

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

admin

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

Troubleshooting, Websites, WordPress

When WordPress Migrations Go Wrong

admin

WordPress is a fantastic CMS with so many plugins and ways to extend the functionality, there’s not much bad to say about it – which goes some way to explain why so many of us are using it to build our own and other’s websites. That said, it’s a technology like any other and sometimes things go wrong. Of course, they only ever go wrong when you least want them to, so here’s a quick summary of the three most common errors that I come up against when moving WordPress sites.

Why would anyone be moving a WordPress site you ask? Well, you might be moving hosts (yes, that can be done!) or you might have been working on a local or development copy so you can test and verify a major update without disrupting the main site. For those of us working away on the backend, moving WordPress sites is just one of those day-to-day things.

But that doesn’t mean it’s foolproof! Three most common issues I see are:

  • Plugin issues causing conflicts, resulting in the illusive error: “The site is experiencing technical difficulties.”
  • Images not being displayed on pages, even when you can see they’re there in the media library and nothing has changed (except for the site having moved, of course.)
  • Redirect errors and stray URLs preventing the site from loading or displaying correctly.
  • Problems with the links in the database or connection info in the wp-config.php file resulting in the “Error Establishing a Database Connection” error.

Let’s address these one-by-one.

Fix the WordPress Error: “The site is experiencing technical difficulties.”

This one, while utterly terrifying (it literally says nothing useful about the issue you are facing) is actually one of the easiest to fix. If you get this error you will often find that you can login to the admin dashboard but not see any of the pages on the site. To test this, type /wp-admin after your domain and see if you can login. Usually you can – which is good because it means the fix I’m about to describe will work.

If you get this error, you need to be able to access the WordPress files on the server OR to be able to access the admin dashboard.

If you can access the dashboard, you need to deactivate all the plugins. Then reactivate them one at a time. Each time you reactivate one, test the site (I usually have this open in a separate tab and refresh the page to see) then continue, adding them one at a time until the site breaks. When you find the offending plugin(s), you can usually resolve the issue by uninstalling then reinstalling the plugin. It’s super easy to do.

Another way – and by far the fastest and easiest (given the number of plugins you could be facing) to deactivate all the plugins is to change the name of the plugins folder, which you can get to via cPanel file manager or via FTP. Just rename it – it doesn’t matter what, but logically “pluginsOFF” or “zplugins” works – then test the site, see if it works (see if you can login to the admin dashboard, if you couldn’t before) then rename it back to plain old “plugins”. Once this is done you do exactly as described above: activate them one at a time ’til you find the culprits, then remove and reinstall them.

Not so bad, eh?

Now for the next one.

Images Don’t Display After WordPress Site Migration

This is one of my favourites; Okay, it’s not, but whenever this happens it always takes me a few minutes to remember how easy and fast the fix is.

First, navigate to Settings and then Permalinks, then change the selection from whatever setting you have (usually Post name) to Plain.

Screenshot of the Permalinks settings page in the WordPress dashboard used to fix a broken wordpress migration
Fixing the Permalinks

Save this setting (scroll down and click the button to save) then change it back to Post name. Check your site (refresh the page or check in an Incognito browser, if you’re not sure it’s refreshing) and many times out of 10 this will have fixed the issue.

But sometimes it won’t! In this case you may well find the issue is some stray links in the database – so onto the next fix.

Fix Redirect Errors and Stray URLs that Stop Your Site Loading or Displaying Correctly

Now you’re into database editing territory, so you might want to call on tech support (via your host) or a friendly techie (like me) to get this part done. But it can be done and it needn’t be terrifying – just as long as you make a backup first.

With your backup in place, login to PhpMyAdmin and find the database you are using for your live website. Then just search EVERY table for the URL you used for your development site (or the old site name if you’ve changed the location of it) and the live site. There are some simple SQL queries to use for changing the URLs, but do remember to try every permutation of the URL you can think off. I once had a problem with a site and found a bunch of old URLs addressing my local installation (localhost), which had long since been deprecated! Work your way through these and you should find you’re on your way to a fully functioning site, unless…

Fix a WordPress “Error Establishing Database Connection” Issue

First up, don’t panic. Despite being monumentally unhelpful this message is also another relatively simple fix. You need to check that your database details in wp-config.php match the details of your actual database and with those two things syncronised, usually you’re good to go.

You’ll find the database name in PhpMyAdmin and the wp-config.php file in your site’s WordPress folder. If in doubt try changing the user password, which you can usually do through MySqlDatabases in cPanel. Make sure your user has full permissions too.

If you get this far and your site still isn’t loading, it’s definitely time to reach out for help, even if the “IT Guy (or Gal)” that comes online to fix it does just one of the four things above and they work (yes, this often happens!)

If you need more detailed explanations for any of the fixes above I can do more step-by-step description, but if you know your way around WordPress this should tell enough to get your site up and running again. I know it’ll be a useful reference for me the next time a site migration goes “pop”!

Websites

Why is Google Search Console saying there is no traffic to my site?

admin

You’ve just set up Google Search Console and submitted a sitemap but you check back a few days later and there’s no traffic being logged?

In this case, check which URL you are using. With the introduction of HTTPS and the change to no longer requiring WWW in the website address, there are four possible addresses you can setup as properties in GSC. To find the one with the most traffic, try this search in Google:

https://www.google.com/search?q=site%3A[YOUR DOMAIN]

For example, I would type https://www.google.com/search?q=site%3Alanguedoc121tech.fr.

This then shows me that the WWW version of my site is the one getting the most traffic, so this is the one I need to log and monitor in GSC.

Armed with this info, delete any other URL variations you have setup in GSC and then add the one that comes up in the search you just ran.

Bingo! Soon (there’s a delay of course) you’ll have traffic.

You can also resubmit the sitemap to speed things up.

Tutorials

Install the French StopCovid App Step-by-Step?

admin

There are lots of questions doing the rounds about whether or not you should install the French version of the StopCovid app that launched on Google Play and in the App Store today.

I’m not going to go into that: we’re all adults, we make up own minds, and because it’s not mandatory, we get to make that choice.

This post is concerned with helping you through the installation process, which also gives you some insight into what information you’re required to provide and what you’re required to consent to (in privacy terms) in the steps before activating the app.

There are three main steps:

  • Downloading the app
  • Configuring the app
  • Activating the app

Each of these is described in the sections below.

Step 1: Download the App to your Device

When you install the app you go the relevant app store (Google Play for Android and the App Store for Apple) and install it in the usual way.

The Apple version of the app looks like this in the store. Note that StopCovid is all one word and you also need to type “France” to find the relevant one for France.

Step 2: Configure the App

Once installed, there are a few setup screens to work through.

You start by clicking a blue button, Je veux participer (I want to participate).

Then next screen describes the next three steps.

  1. Activate the application.
  2. Stay informed.
  3. Protect others.

Click the Continuer button to begin.

2A. Accept the Confidentiality Agreement

First, there is one extra step, which is to accept the confidentiality agreement. To do this, scroll down the Confidentialité page, then click Accepter.

When you reach the bottom of this page you can click one of the links, which takes you to the source code or the full online version of the confidentiality agreement.

2B. Enable Bluetooth Detection

After approving the confidentiality agreement you come to the Detection step. For this to work, enable Bluetooth on your device then click Autoriser. On the iPhone you get a popup asking you to OK the sharing of data with other connected Bluetooth devices. The StopCovid app depends on data sharing with other devices to work, so click OK.

2C. Enable Notifications

Next, you come to the Notification screen; This is where you give the app permission to send you notifications. This means if someone you have been in proximity (which is defined as within 1 metre for more than 15 minutes during the last two-week period) you will receive an alert.

To set up notifications, simply click the Autoriser les notifications button.

As with the previous step, on the iPhone you will be asked to confirm that you would like to receive notifications from the all. Click Allow.

Almost done.

2D. Confirm that you understand the barrier gestures.

Next there’s a screen to remind you of the health precautions you should still be taking. Click C’est Note to move on to the next step.

Step 3. Activate the App

Now you’re ready to activate the app. You can see that until the button is pressed the app is deactivated, marked with a X and a red shield.

If you want to read the confidentiality agreement again or check/change your settings or delete any data collected by the app, scroll down the page and you will see two links that take you to these.

Otherwise, click J’active StopCovid to enable the app.

There may be a short wait while the app launches, then you see the view changes and the shield becomes green with a tick.

That’s it, you’re live!

Deactivating the StopCovid App

Now the app has been setup, enabling it and disabling can be done one of two ways:

  • By enabling/disabling Bluetooth.
  • By opening the app and clicking the J’active StopCovid or J’désactive StopCovid button.

General Points

I think it’s interesting to note that at no point are you asked to provide any personal information (name, address, phone number) which means if you felt compelled to use the app but had strong objections on privacy grounds (and were also a little paranoid) you could get a PAYG SIM and use it on a “burner phone” that has Bluetooth. In the video I made that’s kind of what I did, because it’s a SIM-less iPhone that no longer connects to the mobile network thanks to a broken antenna, so I use it entirely for listening to podcasts and browsing the internet when I’m at home on WiFi. It also has Bluetooth, so with the app installed I can take it out of the house, if I like.

You could argue of course that the app knows who I am because I had to install it through my account (in this case my Apple.com account), so there’s that. I’m not even sure Apple have my address info and since no payment was required, they have no need for it, but I suppose in theory, if the French Government wanted to know who in France had downloaded their app they could demand this info from Apple and Google – but it’s definitely not information that is required (no account is needed) so, if you regularly download apps and games etc. and have never worried about this before, why start now?

Have you installed it?

So, having read how easy it is, have you decided to go ahead and install it? If not, what are your reasons for not doing it? Please send me your comments and feedback and I will try to address them in an upcoming FAQ on the app and how it works.

WordPress

Resizing an Image to use on Your Website

admin

If you’re building your own site or have started adding content to a WordPress (or other site) that you had built for you, one of the pitfalls is uploading large or (worse) original images to your site. It’s so easy to upload images and most tools allow you to do this from your phone, but this comes into the category of “just because you can it doesn’t mean you should!”

To help you out I’ve put together a short video showing you how to use a free tool from BeFunky which enables you to scale your image and reduce the file size before you upload it to your site. This is a critical step because slow-loading photos can really slow down the time it takes for the page to load, which not only harms your SEO but also puts off the people who do arrive at your page.

Alternatives to this DIY method are to use a plugin that does this whenever you upload an image to your site. If you’d rather go down that route you could take a look (for WordPress) at Imagify or ShortPixel*. They’re the two I use but there are others. Ask if you need more info!

*Disclaimer: This article contains an affiliate link to a product that I use and am happy to recommend. There is a free version of the product, which works as well as the paid version, but if you do end up using the paid version I’ll get a small commission, so thank you.

WordPress

Change the WordPress Admin Panel Language

admin

If you’ve had a site built by someone who doesn’t speak your native language, how do you manage your site? Or maybe you want to add a new author to the site to contribute to the translations or create a profile for another contributor who will find it easier to navigate the site in their native language?

One of my newest clients came to for help after having a website built that they were unable to manage. Yes, what is the point of a CMS you can’t use because it’s installed in a language you don’t understand?

The first opportunity you have to set the language is when WordPress is installed. It’s actually one of the first windows you see when working through the setup process.

So what do you do if your web developer sends you a login to your site and you can’t understand any of it because it’s in double-dutch (or just Dutch, in this particular case)?

Firstly, assuming you logged in with your own login credentials, you need to navigate to the Users panel. Thankfully you don’t have to speak the language to find this, as WordPress helpfully use a standard set of icons for the dashboard menu items. You’re looking for the menu option that uses the person icon. Here’s how it looks in English, French, and Dutch.

Users Panel – in English
Users Panel – in French
Users Panel – in Dutch

Once you’ve located this, you can go directly to your profile by selecting the Your Profile option. If you’re not sure what that translates to in the language used for your particular WordPress installation, you can either hop over to Deepl.com to translate it or hazard a guess by clicking the third option on the list, so Votre profil in the French site and Je profiel on the Dutch site.

With your profile window open, scroll down through the Personal Options sections until you get to Language. Here you can choose from either the default or the list of installed languages. On this website I have four languages installed by default: English (United Kingdom), English (United States), Français, and Nederlands.

Languages Installed on my WordPress Site

On another site I manage the three default languages are English (United Kingdom), Nederlands, and Français.

If you found the language you need, select it and click Save.

If you need can’t find the language you need, you have an extra step – sorry.

Now you need to navigate to Settings, helpfully marked by the up/down slider symbol.

Settings Menu Icon – in English
Settings Menu Icon – in Dutch
Settings Menu Icon – in French

The keen-eyed amongst you will have noticed that the layouts are a little different, that’s because any plugins you are using may affect the order of the items listed in the menu. It doesn’t matter, as long as you are able to find the symbol for the Settings (or Réglages or Instellingen), you’re nearly there.

You want to change the General Settings, which I’m 99.9% confident to say will always be first on the list. Select it and scroll down to Language.

This setting changes the default language for the whole site. Here, if you tried to change the user language, as above, and only saw a short list, is where you’ll see all the possible WordPress installation languages as well as the ones installed in this particular WordPress by default.

To install an additional language:

  1. Scroll down to the Language field, helpfully marked with another icon, as shown in the image below.
  2. Click on the drop-down and select the new language from the list.
  3. Scroll to the bottom of the page and click Save to save the settings.

The new language has now installed.

Because this has changed the setting for the entire site, you may want to change it back to the default. To do that, just click the Language drop-down again, choose the original language default and click Save. Now it’s all back to the way it was.

With the new language installed you can go back to your user profile and select it from the Language drop-down, as before. The instructions for that are at the top of this page!

Eh voila, c’est fini!

If you liked this post or found it useful, please do comment and/share.

And if you need help with any aspect of your business tech, your website or you need SEO and content advice, get in touch!

WordPress

How to Create Widgets for your Multilanguage WordPress Site

admin

In this post I describe how to create widgets that will work on a multilingual site. The main plugin I use for this is Polylang. The template used for this demo is OceanWP but the functionality should be the same in most templates.

When we’re finished you’ll end up with a French (left) and English (right) versions of the content as shown below, which automatically switches when the you switch between languages.

1. Open the Widgets Editor

First, open the Widgets editor and select the widget you want to customise. In this example I’m editing the General Sidebar, which is a custom sidebar I created using the OceanWP Theme Panel.

2. Add and Update a Custom HTML block for the English Version

For the English version, set up a Custom HTML block, set the language to English, leave the Title blank, and put in the code.

/* Heading and Action Buttons - ENGLISH */

<h3 class="sidebarcustomhead">
	Explore the Chateau
</h3>
<p class="button">
	<a href="interior-gallery">Interior Gallery</a>
</p>
<p class="button">
	<a href="grounds-garden-gallery">Grounds & Garden Gallery</a></p>
	<p class="button">
	<a href="amenities">Amenities</a></p>
		<p class="button">
	<a href="our-rooms">Bedrooms</a>
</p>
<br>
<br>

/* List of Amenities using Font Awesome Icons - ENGLISH */

<h3 class="sidebarcustomhead">
	Our Facilities
</h3>
<ul class="address-info list-unstyled"><li>
	<i class="fas fa-wifi"></i>Internet access<br>
	<i class="fas fa-bed"></i>Superking beds<br>
	<i class="fas fa-users"></i>Fresh towels<br>
	<i class="fas fa-bath"></i>Luxury ensuite bathrooms<br>
	<i class="fas fa-swimming-pool"></i>12 x 6 M inground swimming pool<br>
		<i class="fas fa-trophy"></i>International pétanque court<br>
		Pattered garden<br>
		</li>
</ul>
<br>

/* Heading and Action Buttons - ENGLISH */

<h3 class="sidebarcustomhead">
	Contact Us
</h3>
<p class="button">
	<a href="contact">Ask a question</a>
</p>
<p class="button">
	<a href="booking-availability">Make a reservation</a>
</p>
Custom HTML Block for the English Version

With the content pasted into your Custom HTML block, click Save.

3. Add and Update a Custom HTML block for the French Version

Next, add a new Custom HTML block to the same widget, to use for the French version.

For the French version, set the new Custom HTML block to Français, leave the Title blank, and then paste your code into the Content area. My code looks like this:

/* Heading and Action Buttons - FRENCH */

<h3 class="sidebarcustomhead">
	Découvrir le château
</h3>
<p class="button">
	<a href="interieur-galerie">Galerie d'intérieur</a>
</p>
<p class="button">
	<a href="terrains-jardins">Terrains & Jardins Gallery</a></p>
	<p class="button">
	<a href="installations">Installations</a></p>
		<p class="button">
	<a href="nos-chambres/">Chambres</a>
</p>
<br>
<br>
<h3 class="sidebarcustomhead">
	Nos Installations
</h3>

/* List of Amenities using Font Awesome Icons - FRENCH */

<ul class="address-info list-unstyled"><li>
	<i class="fas fa-wifi"></i>Wi-Fi<br>
	<i class="fas fa-bed"></i>Lits superposés<br>
	<i class="fas fa-users"></i>Serviettes de toilette<br>
	<i class="fas fa-door-open"></i>Salle d'habillage attenante<br>
	<i class="fas fa-bath"></i>Salle de bain de luxe
	</li>
</ul>
<br>

/* Heading and Action Buttons */

<h3 class="sidebarcustomhead">
	Nous contacter
</h3>
<p class="button">
	<a href="contact">Poser une question</a>
</p>
<p class="button">
	<a href="booking-availability">Faire une réservation</a>
</p>
Custom HTML Block for the French Version

With the code added, click Save.

Now your widget should look something like this:

Now it’s almost ready to use – but first we have some styling to do.

4. Set Up the Custom CSS

If you’re familiar with CSS you will have noticed a couple of custom CSS classes are referenced. These are:

<h3 class="sidebarcustomhead">

and 

<p class="button">

For these two classes to work, you must add these to the Custom CSS block in the Customiser. These two classes – sidebarcustomhead and button – define the layout of the header (e.g., in the English version, “Explore the Chateau”) and the button (e.g., in the English version, “Interior Gallery”).

Don’t worry about the Font Awesome icons list. That isn’t covered in this post but will be documented soon.

To create the same look and feel as the buttons used in this example, copy the code below.

/* Button Styling */

.button {
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
	font-family: Montserrat;
	margin:0px 10px 10px 0px;
	  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2), 0 5px 5px 0;
	width: 100%;
}

/* Header Text Styling */

.sidebarcustomhead {
  font-weight: 200;
  text-align: center;
  padding-top:10px;
}

The sidebar inherits the majority of it’s styling from the h3 CSS definition (colour, font-family, etc.) and since, in this example, I don’t want this to change, I have only redefined three of the styling parameters:

  • font-weight
  • text-align
  • padding

While the sidebarcustomhead class is used only in the sidebar, the button class is used more widely across the site. This is because I prefer the level of control you have when using CSS than relying on the (often limited) button styling options that are available via the Customiser.

All done!

With those components in place you’ll have custom multilingual sidebars with custom heads and button styling.

If you need help with this or any other aspect of your home or business IT, contact me to arrange a free consultation.