WordPress Podcasting theme Spearhead by Automattic : Modifications of header, footer, fonts, widgets, titles and more

Spearhead is a new wordpress theme designed with podcasting in mind. A minimal, elegant wordpress theme which lets your content speak for itself. It is a Child theme of Seedlet theme. Here I am sharing you some css modifications which you can use to style the theme. See the Demo of Spearhead theme. You can download Spearhead Theme from WordPress Repository. Download Parent Theme Seedlet by Automattic.

1. If you want to change Site Title font size, color and font family

h1.site-title, h1.site-title a {
     font-size: 19px;
     color: darkred !IMPORTANT;
     font-family: cursive !important;
 }

To change the Hover color of Site Title

.site-title a:hover {
     color: red !IMPORTANT;
 }

2) If you want to change font size, color and font family of Site Description/ Tag Line

.site-description {
     font-size: 12px !important;
     color: darkred !IMPORTANT;
     font-family: cursive !IMPORTANT;
 }

3) If you want to change of Background color of Header Background portion

header#masthead {
     background: darkred !important;
 }

4) If you want to change menu items font size, color and font family

ul#menu-primary a {
     font-size: 13px !important;
     color: darkred !important;
     font-family: cursive !IMPORTANT;
 }

5) If you want to change menu items hover color

ul#menu-primary a:hover {
     color: blue !IMPORTANT;
 }

Homepage / Blog / Podcast page modifications

6) Homepage or Podcast page post/podcast title font size color and font family change

h2.entry-title a {
     font-size: 23px !important;
     color: red !important;
     font-family: cursive;
 }

7) Homepage or category page post/podcast content font size color and font family modification

article p {
     font-size: 15px;
     color: white !important;
     font-family: cursive;
     line-height: 22px;
 }

8) If you want to change “More Button” font size, color and font family

a.more-link {
     color: white !important;
     font-size: 14px !IMPORTANT;
     font-family: cursive !IMPORTANT;
 }

9) To give More Button a button shape

a.more-link {
     background: darkred !important;
     color: white !IMPORTANT;
     padding: 12px;
     display: block !IMPORTANT;
     width: 100px !important;
     text-align: center;
     margin-left: 0px !IMPORTANT;
     margin-top: 12px !IMPORTANT;
 }

10) To change font size color and font family of pagination

.nav-links * {
     color: darkred !IMPORTANT;
     font-size: 13px !important;
     font-family: cursive !important;
 }

Footer Modification

11) To change footer area background color

footer#colophon {
     background: red !important;
     width: 100% !IMPORTANT;
     max-width: 100% !important;
     text-align: center;
 }

12) To change Site Info ( Company Name, year etc) font size, color and font family

.site-info * {
     color: white !IMPORTANT;
     font-size: 12px !important;
     font-family: cursive !important;
 }

13) To add Company Info and Year in the footer section