Setting up Twenty Seventeen Theme

I chose Bluehost hosting. (Link contains affiliate code). Mojo Marketplace plugin can slow things down with the “coming soon” page and make importing impossible. Use a WP online speed tester to see what’s slowing down your site. Launch your page or go into your Bluehost cpanel and delete Mojo Marketplace.

If you want to make changes to the theme, download child theme from
https://robinjescott.com/a-twenty-seventeen-child-theme/

Mailerlite mailing list signup.

First, set up a multi-list form in Mailerlite. It will generate a JavaScript snippet that needs to be installed in the theme header right before the closing </head> tab:

<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');

var ml_account = ml('accounts', '562969', 't4f1j7e1d3', 'load');
</script>
<!-- End MailerLite Universal -->

Then this code goes into a widget to display the signup form:

<div class="ml-form-embed"
  data-account="562969:t4f1j7e1d3"
  data-form="1314686:q8l6c4">
</div>

If you’re using RSS email in MailerLite

Use the Featured Image in RSS Feed by MailerLite plugin if you want your post’s Featured Image to display in your email. Without this plugin, the first image in the post will display.

Plugins:

  • Jetpack. Use the Jetpack social widget instead of the theme’s social menu if you want a built-in Goodreads icon.
  • Under Jetpack settings>writing, enable “Enhance CSS customization panel.”
  • Go to the Jetpack Settings, Appearance and turn off “Mobile Theme.”
  • NiftyGridZ Pro Free for Zazzle (may not be available through the WordPress panel; upload the zipped file.) Generate shortcodes here once you’ve installed the plugin.
  • Can also display a Zazzle grid without the plugin through this tool:
    https://niftytoolz.com/npcp/nifty-promo-control-panel.html
  • Custom Headers for unique headers per page
  • Display posts plugin to imitate the display-posts functionality on wordpress.com. Shortcodes at
    https://displayposts.com/docs/parameters/
  • Mybooktable to display books with buy buttons
  • Askimet (for spam)
  • Yoast (for SEO)
  • Custom Fonts by Brainstorm Force
  • Options for Twenty Seventeen (premium)

Custom CSS:

Appearance > Edit CSS > Additional CSS

For Twenty Seventeen theme (referenced fonts have been uploaded in Custom Fonts plugin)

/* Remove site title from non homepage */
.site-branding { visibility: hidden; }
.home .site-branding { visibility: visible; }
/* reduce padding around header*/

.site-branding {
    padding: 20px;
}
/*Enlarge logo */

.custom-logo-link img {
  max-height: 190px;
}
/* Center Logo */
#masthead .wrap {
    /* position: relative; */
	text-align: center;
}
/* custom columns for front page*/
.first-column {
    width: 66%;
   /* padding: 0 10px 0 0;*/
    float: left;
}

.second-column {
    width: 33%;
    padding-left: 20px;
    float: right;
	  line-height: 2;
	  border: 2px solid #ededed;
	  background-color:#f9f9f9
		
}

@media only screen and (max-width: 800px) {

   .first-column {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }

    .second-column {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }
    
}

/* Resize blog page title and add custom color and font*/
.page-title {
font-size: 2.0rem; text-align: center; font-weight:600; color:#143034; font-family: Crime
}

/*Center featured images on posts*/
.post-thumbnail{
	text-align: center;
}

/*don't display featured image on individual blog post*/
.single-featured-image-header {
display: none !important;
}

/* To remove page title from twenty seventeen theme and remove gap if desired*/
/*
.page #content {
padding-top: 10px !important;
}

.page .entry-header {
display: none !important;
}*/


/* Custom title for Mahina State page. */
body.page-id-78 .entry-title{ font-size: 50px;/*font-family:Colleged*/
}

/* Custom title for Changs page. */
body.page-id-81 .entry-title{ font-size: 50px;font-family:NightinTokyo;}

/* Custom title for Pair-O-Dice. */
body.page-id-76 .entry-title{ font-family:Neon}

/* shorten height of header image * /
 * /*Computer screen */
@media screen and (min-width: 48em) {
	.twentyseventeen-front-page.has-header-image .custom-header-image {
	/*height: 1200px;*/
	/*height: 100vh;*/
	height: 40vh;
	/*max-height: 100%;*/
	/*overflow: hidden;*/
	}
}

/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .custom-header {
	/*display: table;*/
	/*height: 300px;*/
	/*height: 75vh;*/
	height: 50vh;
	/*width: 100%;*/
}

/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
	/*height: calc(100vh - 32px);*/
	height: calc(50vh - 32px);
	}
}


To use the custom columns:

<div class="first-column">FIRST COLUMN CONTENT </div>
<div class="second-column"><h2>SECOND COLUMN HEADER</h2> SECOND COLUMN CONTENT
</div>
<hr style="clear: both; visibility: hidden;">
*/