Tag Archives: css

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:

WordPress Twenty Seventeen – Change uppercase title

I’ve recently been modifying the website for the church I used to attend when I lived in Blackwater – coalcitycc.com.au

The main thing I did was change the theme from the old ‘Pinboard’ theme to the newer ‘Twenty Seventeen’ them. It’s a fantastic theme that I was able to do a lot of things with. There were a few things that I had to figure out how to do. The next couple of posts will be a few short ones so I can document the changes I made.

The most annoying thing with the new theme was the uppercase title on the homepage. To change this – go to ‘Admin > Appearance > Editor’ then select ‘Stylesheet’ ‘style.css’. Then scroll down to line 1580. The ‘site-title’ section should look like this:

.site-title {
clear: none;
font-size: 24px;
font-size: 1.5rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0.08em;
margin: 0;
padding: 0;
/* text-transform: uppercase; */ <--- add in these comments
}

As I’ve marked above, comment out the ‘text-transform: uppercase;’ part to remove the uppercase font on the title.

As you can see from the picture below, it works well!