WordPress – Nested and Styled HTML Lists

Overview

In WordPress it is easy to make a numbered list using the List block. If we want to go beyond that, and create nested lists with numbers and letters, we need to learn some basic HTML and CSS code.

First let’s take a look at a simple numbered list.

WordPress List Blocks and HTML

In WordPress we use the List block to create a simple ordered list like this:

  1. Item one.
  2. Item two.
  3. Item three.

To modify the contents of this block we need to change it to a Custom HTML block.

This is the HTML code for our basic numbered list:

<ol>
<li>Item one.</li>
<li>Item two. </li>
<li>Item three.</li>
</ol>

There are only two pairs of HTML tags here. The opening and closing tags for the ordered list: <ol> and </ol>, and the opening and closing list item tags: <li> and </li>.

We are interested in the <ol> tags because we can use them to do two things.

First, we can add more <ol> tags to create nested lists. Second, we can style the lists to be numerical or alphabetical.

Let’s take a look at our main styling options.

Common Styling Options for Lists

To set a style for an ordered list we use the following template code:

<ol style="list-style:style-name">

The variable in this code is style-name. Table1 shows the most commonly used style-name variables:

Table 1 Ordered List Styles.
Style-name Description
lower-alpha Lower case alphabetical.
upper-alpha Upper case alphabetical.
decimal Numeric.
decimal-leading-zero Numeric, with a leading zero.
lower-roman Lower case Roman numerals.
upper-roman Upper case Roman numerlas.

Pairing our style-name variables to our template code gives us control over how we style our lists.

Let’s take a look at an example of a nested list using two different style-name variables.

Example

In this example we have a standard numerical list with a nested lower case alphabetical list:

  1. Introduction
  2. Heading One
  3. Heading Two
    1. Sub Heading One
    2. Sub Heading Two
    3. Sub Heading Three
  4. Heading Three
  5. Conclusion
  6. References

The HTML for our example list is below:

<ol>
<li>Introduction</li>
<li>Heading One</li>
<li>Heading Two <ol style="list-style:lower-alpha">
<li>Sub Heading One</li>
<li>Sub Heading Two</li>
<li>Sub Heading Three</li>
</ol>
<li>Heading Three</li>
<li>Conclusion</li>
<li>References</li>
</ol>

Notice that when we nest one list inside another we lose the closing list item </li> tag on that line. In our example, above, this is on line 4.

If for any reason your list gets interrupted by other content you can resume numbering by adding the following code within an <ol> tag:

start="number"

Here the variable number represents a numerical value. To resume numbering at the number seven, for example, we would use the following code:

start="7"

WordPress – Basic Table Template

Overview

I’ve started using some basic tables on another WordPress blog and so I thought I would post a basic template here for future reference.

Table 1 Title.
Heading 1 Heading 2
One Two
Three Four
Five Six

Sample Code

Copy, paste and edit this code inside a Custom HTML block in WordPress:

<div  align="center">
<figcaption><strong>Table 1</strong> Title.</figcaption>
<table align="center">
  <tbody><tr>
    <th>Heading 1</th>
    <th>Heading 2</th> 
  </tr>
  <tr>
    <td align="left">One</td>
    <td align="left">Two</td>
  </tr>
  <tr>
    <td align="left">Three</td>
    <td align="left">Four</td>
  </tr>
  <tr>
    <td align="left">Five</td>
    <td align="left">Six</td>
  </tr>
</tbody>
</table>
</div>

Tags

Table 2 gives a brief description of the tags used in my HTML tables.

Table 2 HTML Tags.
HTML Tag Description
<figcaption> Table title (optional).
<div> Added to center the table title (optional).
<table> Creates a table.
<tr> Start a new table row.
<th> Adds table heading.
<td> Adds table data.

Special Characters

In Table 2 I used the following special characters to format the HTML tags so that they would not be read as HTML code by WordPress.

Table 3 HTML Special Characters.
Code Description
&lt; Less than
&gt; Greater than

WordPress – Embedding Audio from Soundcloud

Background

I have been trying to add audio from SoundCloud to WordPress using the Custom HTML and Embed blocks with varying degrees of success.

The Custom HTML block changes my HTML when it discovers a SoundCloud url and the embed block takes up too much space on my page.

Solution

The solution I found was to use the Shortcode block instead. With this basic template all that is needed is the share code from SoundCloud:

<p>
<div>
[soundcloud url="InsertShareCodeHere" params="auto_play=false&amp;hide_related=true&amp;visual=false" width="100%" height="166" iframe="true" /]
<figcaption><strong>Title</strong></figcaption>
</div>
</p>

All of the HTML tags are optional but I found that without the <p> and <div> tags the embedded SoundCloud audio was not aligned correctly to the left of the page.

I also changed the SoundCloud params to my personal preferences. They are simple true / false toggles so you can customize them to your needs.

Finally I added the <figcaption> tag so that my caption would be consistent with the other WordPress captions on my page.

Example

Audio 1 Example 4/4 Drum Beat.

WordPress – How to Link to Sections of the Page Using HTML

Overview

In this post we will use hyperlinks to create a table of contents to navigate within a single page using basic HTML.

To do this we need to modify standard hyperlink markup <a href="#name"></a> with unique #names to differentiate each link. For example: <a href="#introduction"></a>.

Once our links are correctly formatted we create a target headings for each unique link.

Let’s look at how to do this in WordPress.

#name Hyperlinks

In the WordPress block editor create a Custom HTML block.

The following code will produce a table of contents with three section links, Introduction, Contents, and Conclusion. Note that each section has its own unique #name.

Target Headings

All we need now are the three headings that our links will jump to. Here we simply add id="name" to our existing HTML tags as follows:

<h4 id="introduction">Introduction</a></h4>

<h4 id="content1">Content</a></h4>

<h4 id="conclusion">Conclusion</a></h4>

Example

Table of Contents
Introduction
Content
Conclusion

Introduction

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet tristique magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tincidunt lacus ac erat auctor luctus. Donec ac leo non urna faucibus tempor. Etiam laoreet diam massa, sit amet mattis dui placerat eget. Morbi nec odio elit. Cras vulputate augue in iaculis tristique. Phasellus sed sollicitudin ipsum. Aenean ultrices, magna et consectetur lacinia, urna augue rhoncus enim, et lobortis est nibh sed eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet tristique magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tincidunt lacus ac erat auctor luctus. Donec ac leo non urna faucibus tempor. Etiam laoreet diam massa, sit amet mattis dui placerat eget. Morbi nec odio elit. Cras vulputate augue in iaculis tristique. Phasellus sed sollicitudin ipsum. Aenean ultrices, magna et consectetur lacinia, urna augue rhoncus enim, et lobortis est nibh sed eros.

Content

Nulla vitae ex justo. Maecenas sed maximus orci. Aliquam vel metus eleifend, semper odio quis, dictum ipsum. Praesent et dictum augue, ut luctus quam. Sed luctus, lectus eu ornare volutpat, quam orci volutpat felis, nec varius magna diam in velit. Mauris venenatis facilisis quam, a posuere ipsum congue at. Quisque lacinia dui scelerisque scelerisque consectetur. Ut porta auctor cursus. Curabitur sodales urna et ex rutrum ultrices. Aliquam et posuere nisl. Donec eu hendrerit lectus. Maecenas sit amet augue facilisis, tincidunt neque non, consequat mauris.

Nulla vitae ex justo. Maecenas sed maximus orci. Aliquam vel metus eleifend, semper odio quis, dictum ipsum. Praesent et dictum augue, ut luctus quam. Sed luctus, lectus eu ornare volutpat, quam orci volutpat felis, nec varius magna diam in velit. Mauris venenatis facilisis quam, a posuere ipsum congue at. Quisque lacinia dui scelerisque scelerisque consectetur. Ut porta auctor cursus. Curabitur sodales urna et ex rutrum ultrices. Aliquam et posuere nisl. Donec eu hendrerit lectus. Maecenas sit amet augue facilisis, tincidunt neque non, consequat mauris.

Conclusion

Aliquam ac quam consequat, posuere mi sed, finibus magna. Vivamus imperdiet sollicitudin egestas. Pellentesque sit amet ante ullamcorper, blandit orci porta, ultricies sapien. Suspendisse sit amet malesuada ex. In tempus vestibulum elit, ac suscipit risus. Aliquam tristique ante sed auctor consequat. Cras lacus mauris, tristique vel orci sit amet, vestibulum maximus metus. Nam blandit magna tellus, id vehicula sem vehicula a. Pellentesque auctor porttitor ante egestas tristique. Aliquam mattis orci eu suscipit molestie. Aenean ac lorem suscipit, sodales ipsum sit amet, congue nibh. Phasellus et sapien sodales, fermentum nulla ac, lobortis mauris. Suspendisse dapibus at lacus id posuere. Mauris laoreet justo sed nunc aliquet, at mattis magna gravida.

Aliquam ac quam consequat, posuere mi sed, finibus magna. Vivamus imperdiet sollicitudin egestas. Pellentesque sit amet ante ullamcorper, blandit orci porta, ultricies sapien. Suspendisse sit amet malesuada ex. In tempus vestibulum elit, ac suscipit risus. Aliquam tristique ante sed auctor consequat. Cras lacus mauris, tristique vel orci sit amet, vestibulum maximus metus. Nam blandit magna tellus, id vehicula sem vehicula a. Pellentesque auctor porttitor ante egestas tristique. Aliquam mattis orci eu suscipit molestie. Aenean ac lorem suscipit, sodales ipsum sit amet, congue nibh. Phasellus et sapien sodales, fermentum nulla ac, lobortis mauris. Suspendisse dapibus at lacus id posuere. Mauris laoreet justo sed nunc aliquet, at mattis magna gravida.

Sources: https://www.computerhope.com/issues/ch000049.htm

Ubuntu 18.04 LAMP Server – Quick Setup and FTP to Webserver

I recently setup an Ubuntu 18.04 webserver to test webpages locally. I used tasksel to quickly install the LAMP server role as follows:

sudo apt update
sudo apt install tasksel
sudo tasksel install lamp-server

With the webserver up and running I needed to be able to FTP into the var/www/html directories to upload my HTML and CSS.

As Ubuntu server comes with SSH installed be default I decided to use that for FTP instead of installing something like vsftd (Very Secure FTP Daemon). FTP over SSH turned out to be a much simpler and quicker setup.

Warning: These steps do not restrict access to folders outside of the /var/www/html directories. As such this setup is not recommended for any kind of production server.

First create a new directory under /var/www/html:

cd /var/www/html
sudo mk dir newdirectory

Create a new user and give the user a password:

sudo adduser ftpuser
sudo passwd ftpuser

Finally give the new user the permissions that they need. Change the directory ownership and group:

sudo chown www-data:www-data /var/www/html/newdirectory

Give the group write permissions to the directory:

sudo chmod -R 775 /var/www/html/newdirectory

Add the new user to the www-data group:

sudo usermod -a -G www-data ftpuser

With this done I configured FileZilla to establish a secure FTP connection to my webserver.

Filezilla: Secure FTP using SSH File Transfer Protocol.

Sources:

https://www.digitalocean.com/community/questions/permissions-on-var-www-html-for-uploading-web-site-files-via-sftp

XBox 360 Rock Band 3 Delete Song Cache

This is a quick note to remind me where the song cache for Rock Band 3 is located on my Xbox, should I ever need to delete it again.

Goto Settings, System and then Storage. Select Memory Unit, Games and Apps and then Rock Band 3. Select the Rock Band 3 Song Cache and then choose Delete.

Note: Some other settings may also be lost (scores).

I used this to troubleshoot a custom song issue where a group of songs packaged with C3 Con Tools Video Preparer would not overwrite with newly packaged songs.

Note to self: Video Preparer is only for songs with stems!

Update: It turns out that I did not need to delete my song cache. Rather, I should have updated the file name and song ID of new versions of the songs before loading them onto the Xbox.

LG G6 – Andriod 7.0 – Battery Draining Quickly

Android-logo

I’ve recently noticed that my battery has been draining quite significantly over-night on my LG G6.

I typically have the phone connected to 4G and wireless with Bluetooth turned off. I haven’t installed many apps lately, in fact I have un-installed apps that I have not been using. A quick check of my battery usage did not provide any helpful indication as to why the battery would be draining quickly either.

The only solution that I could find that simply did not involve turning other features off (LTE, location, Bluetooth, Wifi, Background sync etc) was as follows:

  • Go to Settings, Storage, and then Internal Storage
  • Wait for everything to populate and then tap Cached data.
  • When prompted to Clear cache for all apps? tap Clear.
  • Power off and restart your phone.

 

This seems to have dome the trick for me so far …

Windows 10 – Windows Spotlight Not Changing Picture

lock-screen-windows-spotlight

Today I tried a handful of workarounds to try and get Windows Spotlight to change the lock screen images on one of our PCs. There are several solutions posted around the internet and this is the one that worked for me.

First open the Settings app, and then go to Personalization and then Lock Screen.

Change the Background from Windows Spotlight to either Picture or Slideshow:

Lock-Screen-Settings

Close the Settings app and open File Explorer. Browse to the following location (where yourusername is the username of the account you are logged in with):

C:\Users\yourusername\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\Settings

You should see the files roaming.lock and settings.dat. Change their file extensions to .bak to change them to backup files.

Reboot your computer.

Open the Settings app again and under Lock Screen change the background option back to Windows Spotlight.

At this point I could see in the preview that the Windows Spotlight picture had changed and I didn’t have to do anything else.

 

 

Installing LibreELEC Kodi in a VMware vSphere Virtual Machine

LibreELEC banner

I tried a couple of methods of installing LibreELEC in a VMware virtual machine before finding the solution. The first was to simply pass through a Jump drive with a bootable image to the virtual machine. This didn’t work as I discovered that vSphere virtual machines cannot boot from USB.

I also tried converting an image file to an .iso and booting from that – that also didn’t work.

I finally discovered the LibreELEC virtual appliance and simply deployed that to vSphere.

I would typically just post a link, but it appears that the LibreELEC mirrors seem to change so it is best to know how to get a link to the .ova file.

First head to the LibreELEC download page. What we are looking for is a link named info behind which is a mirror list.

libreelec mirror list
(info) link to LibreELEC mirror list.

On the mirror list page you can see that I have two mirrors available in the US:

LibreELEC Mirrors 2
LibreELEC mirrors with path to URL highlighted.

Notice that I have the first portion of the path to a LibreELEC image selected. This URL takes me to the full listing of available LibreELEC images on that mirror.

libreELEC ova
Mirror link to LibreELEC .ova highlighted.

Copy the link to the LibreELEC .ova file and then run the vSphere Client to start deploying the virtual appliance.

Click the File menu and then Deploy OVF Template.

Paste the LibreELEC .ova hyperlink and then click Next to continue through the rest of the deployment wizard.

virtual LibreELEC
LibreELEC installed in VMware vSphere 5.5.

Recursive Find and Replace using Git Bash on Windows 10

In my previous post I setup virtual TV Shows in Kodi for a couple of YouTube channels that I downloaded videos from.

I copy and pasted a template file to create multiple .nfo files,  but I made a mistake – all of the files have 2019 in one of the text fields instead of 2018!

Fortunately I found a nice quick solution that used Git Bash on Windows 10.

I simply mapped my file share as network drive Y, opened Git Bash,  and issued a couple of commands:

$ cd Y:
$ find . -type f -name "*.nfo" -exec sed -i'' -e 's/2019/2018/g' {} +

Done!

A quick run-down of the commands:

  • change directory to Y: (cd Y:)
  • find
  • file (-type f)
  • named *.nfo
  • run sed (-exec sed)
  • edit in-place (-i)
  • add script (-e ‘)
  • substitute 2019 (s/2019)
  • for 2018 globally (2018/g)

Very nice to be able to use bash inside Windows 10!