Tweaking WordPress – Adding new CSS classes highlighting updates

Quite a few of the pages on the CoherentLight website are updated over time, and I’d like to add a way of indicating that this has happened. Previously this has just been a block of text at the bottom of the page indicating what has changed. Or that a newer post on the same subject is available when they visit an older page.

But that is all too easy to get lost in the text surrounding it. What I want is to draw people’s attention to an update, so adding some highlights would make it stand out a little more.

Updated: 26th September 2017 Added some more information.

Note: You might want to try the page on WordPress Plugins as well.

As you can see, they do tend to disappear, so I’d like to add some CSS to make them stand out a little more. The first step to doing this is to identify them with a tag. So I’ll wrap the lines in my page with <div class="nm_update"></div> or <div class="nm_note"></div> as appropriate.

Now to add some CSS to tweak the colours and make them standout a little more. This needs to go in the style.css file of my WordPress child theme.

.note_info, .note_update {
 color: darkblue;
 background-color: lightskyblue;
 }

But I’d also like to add a border and some padding around the text. So the next step is to extend the CSS a little more.

.note_info, .note_update {
 color: darkblue;
 background-color: lightskyblue;
 margin: 10px;
 padding: 12px;
 border-style: solid;
 border-width: 2px;
 border-radius: 10px;
}

I’d also like a little icon to appear at the side of the text too, so that it really stands out. So for that we’d need to select an icon, and float it left of the text. I have two small .png files for the moment, to test everything works.

.note_info::before {content: url('pencil.png'); float: left; padding: 5px; }
.note_update::before {content: url('refresh.png'); float: left; padding: 5px; }

That gives the result shown below.

The URL for the image changes (depending on what page is being viewed), we need to embed this in the CSS as a base64 encoded image. (SVG is normally smaller, but that’s a skill set to grow for another time). So we use a readily available base64 encoder, (I used https://www.base64-image.de/, but others are available. We then take the encoded data (there’s a handy show code button and a select all for the CSS embedding) and replace the url in the CSS with this instead.

.note_info::before {content: url('data:image/png;base64,iVBORw0KGgoAAAA...'); float: left; padding: 5px; }

Then we need to make sure that we update this in our above-the-fold CSS, so that we don’t get position jumps as the icon renders once the final CSS loads later.