{"id":418,"date":"2018-09-11T09:40:15","date_gmt":"2018-09-11T16:40:15","guid":{"rendered":"http:\/\/create.twu.ca\/eportfolios\/?page_id=418"},"modified":"2018-09-24T12:32:52","modified_gmt":"2018-09-24T19:32:52","slug":"customizing","status":"publish","type":"page","link":"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/customizing\/","title":{"rendered":"Customizing the Hearts Theme"},"content":{"rendered":"<p>You can modify the title of your portfolio and change other design aspects of it via the WordPress Customizer. This interface allows you to see a preview of your portfolio as you change settings.<\/p>\n<p>Access it via the <strong>Customize<\/strong> link at the top of your black WordPress admin bar while viewing your site or from inside your dashboard via <strong>Appearance<\/strong> -&gt; <strong>Customize<\/strong>.<\/p>\n<p>Each panel on the left side provides tools to change the appearance of your site. Let&#8217;s start with the first one, <strong>Site Identity<\/strong>.<\/p>\n<div id=\"attachment_420\" style=\"width: 840px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-420\" src=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizing-hearts-1024x576.jpg\" alt=\"editing the text form in the left under Site Title changes the appearance in the preview on the right\" width=\"840\" height=\"473\" class=\"size-large wp-image-420\" srcset=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizing-hearts-1024x576.jpg 1024w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizing-hearts-300x169.jpg 300w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizing-hearts-768x432.jpg 768w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizing-hearts-800x450.jpg 800w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizing-hearts-320x180.jpg 320w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-420\" class=\"wp-caption-text\">Change the site title and the tagline in the Customizer.<\/p><\/div>\n<p>As you change the text in the left side editing fields, you will see the changes previewed on the right. We might start by creating a more personal title.<\/p>\n<div id=\"attachment_421\" style=\"width: 840px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-421\" src=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/title-changed-1024x573.jpg\" alt=\"changing the site title in the interface to &#039;Pats Heartfelt Portfolio&#039;\" width=\"840\" height=\"470\" class=\"size-large wp-image-421\" srcset=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/title-changed-1024x573.jpg 1024w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/title-changed-300x168.jpg 300w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/title-changed-768x430.jpg 768w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/title-changed-800x447.jpg 800w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/title-changed-322x180.jpg 322w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-421\" class=\"wp-caption-text\">Start by changing the title of the portfolio site.<\/p><\/div>\n<p>No changes are made to your site until you click the <strong>Publish<\/strong> button at the top, so we can do a few more things.<\/p>\n<p>Let&#8217;s change the image shown at the top of the site. Open the Customizer panel for <strong>Header Image<\/strong>. <\/p>\n<div id=\"attachment_422\" style=\"width: 840px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-422\" src=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizer-hearts-image-1024x569.jpg\" alt=\"interface for adding a new header image\" width=\"840\" height=\"467\" class=\"size-large wp-image-422\" srcset=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizer-hearts-image-1024x569.jpg 1024w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizer-hearts-image-300x167.jpg 300w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizer-hearts-image-768x427.jpg 768w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizer-hearts-image-800x445.jpg 800w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/customizer-hearts-image-324x180.jpg 324w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-422\" class=\"wp-caption-text\">Click &#8216;Add Image&#8217; to upload your own photo to use in the header of your site.<\/p><\/div>\n<p>Now this site is looking different than the default template!<\/p>\n<div id=\"attachment_423\" style=\"width: 840px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-423\" src=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-changed-image-1024x579.jpg\" alt=\"a new image is set for the header image\" width=\"840\" height=\"475\" class=\"size-large wp-image-423\" srcset=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-changed-image-1024x579.jpg 1024w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-changed-image-300x170.jpg 300w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-changed-image-768x434.jpg 768w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-changed-image-800x452.jpg 800w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-changed-image-319x180.jpg 319w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-423\" class=\"wp-caption-text\">Your own image will now be on every page of your portfolio.<\/p><\/div>\n<p>Perhaps the new background image does not look good with the white of the text title. Open the Colours panel of the Customizer, and use the left side selected to choose a new colour for the Header Text Colour. As you change the selector, you will see the changes on the right side.<\/p>\n<p>You can also choose to have a different background color for the text page; make sure you use one that has sufficient contrast with the black text.<\/p>\n<div id=\"attachment_427\" style=\"width: 840px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-427\" src=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-colors-1024x566.jpg\" alt=\"Customizer interface for changing colours\" width=\"840\" height=\"464\" class=\"size-large wp-image-427\" srcset=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-colors-1024x566.jpg 1024w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-colors-300x166.jpg 300w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-colors-768x425.jpg 768w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-colors-800x443.jpg 800w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-colors-325x180.jpg 325w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-427\" class=\"wp-caption-text\">Choosing new colors for the Header Text and the page background.<\/p><\/div>\n<p>The Customizer for this theme provides a set of tools to modify the appearance of the <a href=\"https:\/\/create.twu.ca\/portfolio-hearts\/\">Hearts theme&#8217;s front page display of most recent portfolio artifacts<\/a>. These tools are in the TWU Portfolios panel of the Customizer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-front-1024x542.jpg\" alt=\"Customozer interface for changing the front screen, with arrows show where fields are that change the title, subtitle, and a menu to choose how many artifacts to show.\" width=\"840\" height=\"445\" class=\"aligncenter size-large wp-image-523\" srcset=\"https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-front-1024x542.jpg 1024w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-front-300x159.jpg 300w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-front-768x406.jpg 768w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-front-800x423.jpg 800w, https:\/\/create.twu.ca\/eportfolios\/files\/2018\/09\/hearts-customizer-front-340x180.jpg 340w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>In this panel, you can change the text of the title and subtitle (&#8220;tagline&#8221;) that appear above the display of your most recent artifacts. Use the drop down menu to select how many artifacts it should show on the front page.<\/p>\n<p>Now explore other things you can change here. If all these changes look good to you, click the <strong>Publish<\/strong> button to make them active.<\/p>\n<h2>Learn More About the WordPress Customizer<\/h2>\n<ul>\n<li><a href=\"https:\/\/wplift.com\/how-to-use-the-wordpress-customizer\">Beginner\u2019s Guide: How To Use The WordPress Customizer<\/a> (WP Lift)<\/li>\n<\/ul>\n<div class=\"video-wrapper\"><iframe loading=\"lazy\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/Z1NJ8Zm5c4g?feature=oembed\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/div>\n<h2><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/\">Tips for Using the Hearts Theme<\/a><\/h2>\n\n<!-- Page-list plugin v.5.9 wordpress.org\/plugins\/page-list\/ -->\n<ul class=\"page-list siblings-page-list \">\n<li class=\"page_item page-item-412\"><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/special-dashboard-features\/\">Special Dashboard Features<\/a><\/li>\n<li class=\"page_item page-item-414\"><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/front-page\/\">The Front Page<\/a><\/li>\n<li class=\"page_item page-item-418\"><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/customizing\/\">Customizing the Hearts Theme<\/a><\/li>\n<li class=\"page_item page-item-429\"><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/creating-artifacts\/\">Creating Artifacts<\/a><\/li>\n<li class=\"page_item page-item-433\"><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/shortcodes\/\">Shortcodes<\/a><\/li>\n<li class=\"page_item page-item-441\"><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/menus\/\">Navigation Menu<\/a><\/li>\n<li class=\"page_item page-item-435\"><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/footer-widgets\/\">Footer Widgets<\/a><\/li>\n<li class=\"page_item page-item-448\"><a href=\"https:\/\/create.twu.ca\/eportfolios\/portfolio-themes\/twu-hearts\/changing\/\">Changing to Another Theme<\/a><\/li>\n\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You can modify the title of your portfolio and change other design aspects of it via the WordPress Customizer. This interface allows you to see a preview of your portfolio as you change settings. Access it via the Customize link at the top of your black WordPress admin bar while viewing your site or from&hellip;<\/p>\n","protected":false},"author":279,"featured_media":0,"parent":311,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","footnotes":""},"class_list":["post-418","page","type-page","status-publish","hentry","empty-entry-meta"],"_links":{"self":[{"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/pages\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/users\/279"}],"replies":[{"embeddable":true,"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/comments?post=418"}],"version-history":[{"count":6,"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/pages\/418\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/pages\/418\/revisions\/524"}],"up":[{"embeddable":true,"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/pages\/311"}],"wp:attachment":[{"href":"https:\/\/create.twu.ca\/eportfolios\/wp-json\/wp\/v2\/media?parent=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}