Tag Archives: twenty seventeen

WordPress Twenty Seventeen – Four-Column Footer

One of the trickiest things I found to do with the WordPress Twenty Seventeen theme was to try and have a four-column footer.  I found a couple of plugins to do the job, but they either didn’t work, or they were far too complex. In the end, I found an easy solution put a basic HTML table into a ‘custom html’ widget inside of ‘Footer 1’. To do this:

Admin > Appearance > Widgets. The drag ‘Custom HTML’ to the ‘Footer 1’ widget.

The base HTML code for a four column table is:

<table id="logo-table" style="width:100%">

<tr>
<th style="text-align: center; width:25%;">Heading One</th>
<th style="text-align: center; width:25%;">Heading Two</th> 
<th style="text-align: center; width:25%;">Heading Three</th> 
<th style="text-align: center; width:25%;">Heading Four</th>
</tr>

<tr>
<td style="text-align: center;">Item One</td>
<td style="text-align: center;">Item Two</td> 
<td style="text-align: center;">Item Three</td> 
<td style="text-align: center;">Item Four</td>
</tr>

</table>

This did 90% of the job. There was just one other thing I wanted to do: Make the footer full-width. By default, Twenty Seventeen has two half-width footers. I also went in and changed the css so that the footer was full-width.

Admin > Appearance > Customize > Additional CSS

Add in the following code:

.site-footer .widget-column.footer-widget-1
{
width: 100%;
}

.site-footer .widget-column.footer-widget-2
{
width: 100%;
}

The end result:

 

WordPress Twenty Seventeen – Change footer colours

To change the footer colours using the Twenty Seventeen theme in WordPress; go to:

Admin > Appearance > Customize > Additional CSS

Add in the following code:

.site-footer { background: #2000a1; }

.site-footer {
    color: #ffffff;
}

.site-footer a {
     color: #ffffff;
}

.site-footer a:hover {
     color: #ffffff;
}

The #ffffff is white, and #2000a1 is a blue colour. The output should look like this: