In putting together this blog I am also having to learn how to use WordPress (version 5.4 for those who are interested). It’s been quite a steep learning curve. I’ve got little web experience as this is only the second website I have ever built. The last one being in the spring of 2007 made with Adobe Dreamweaver. WordPress 2.2 had only just been released back then but I’d never heard of it. A lot has changed in 13 years. If you fancy a trip down memory lane there’s a nice look back at websites from that era here.
This is only a personal blog so I’m not looking to spend a lot of money on it so I found a cheap hosting solution and kitted out my site out with a free WordPress theme. I also wanted to use this as an opportunity to learn how to develop and code a website again.
I choose a theme that had the basic structure I was looking for so I could start producing a blog without too much work. It was also simple enough that in parallel I could start looking at how the everything worked and personalise it to my tastes. Some of the more customisable themes have tens of thousands of lines of code while this one only had a couple of thousand which would be more manageable for me to get to grips with.
One of the first things I wanted to do was round the corner of the images in my posts to give it a slightly better look. It took me a while to figure out how to do this but I eventually got there.
One of the first things to understand was the separation between how a document was structured (HTML) and how it is styled (CSS).
All images are linked into an HTML page with the <img> tag. To round the corners of an image you can either do this in an photo editor, which is quite time consuming and permanent, or modify the CSS template to get the browser to do this for you when it renders the page.
Since WordPress 4.7 was released in December 2016 you don’t need to modify the CSS template of your theme to make these changes. You can do it though a live editor which is quite handy as you can immediately see the effect of any changes and if it nothing happens then you know you’ve done something wrong.
In the WordPress dashboard go to Appearance menu and then click Customise. Right at the bottom you’ll see an option called Additional CSS. It’s here you can add your changes. Making changes here also has the added benefit that if a new version of your theme comes out your changes aren’t lost when you upgrade.
To get the corners of my image to round I added the following code:
img { border-radius: 5px;}
This modifies the <img> selector in the CSS template for your page and instructs your browser to round the corners when it renders this object.
Et voila. It’s as simple as that!
