{"id":959,"date":"2018-09-21T20:07:51","date_gmt":"2018-09-21T20:07:51","guid":{"rendered":"https:\/\/sites.generatepress.com\/volume\/?p=959"},"modified":"2018-09-21T20:07:51","modified_gmt":"2018-09-21T20:07:51","slug":"styling","status":"publish","type":"post","link":"https:\/\/meansfind.com\/?p=959","title":{"rendered":"A guide to styling and making Volume your own"},"content":{"rendered":"\n<p>Completely rebuilt with GeneratePress Premium 2.0, Volume ( remastered ) is a fresh clean site for bloggers . With new Post Archive cards, Single Post Heros, Sidebar Author Box and revisited Featured Post Navigation all built with GPP 2.0 Block Elements.<\/p>\n\n\n\n<p>Stripping away 5 custom hook elements and over 350 lines of code you can now restyle entire theme elements with Block Elements and GenerateBlocks. <\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/meansfind.com\/?p=959\/#GP_Premium_20_Theme_Building\" >GP Premium 2.0  Theme Building<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/meansfind.com\/?p=959\/#Where_to_begin\" >Where to begin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/meansfind.com\/?p=959\/#What_Elements_are_in_place\" >What Elements are in place<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/meansfind.com\/?p=959\/#A_note_on_Images\" >A note on Images<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"GP_Premium_20_Theme_Building\"><\/span>GP Premium 2.0  Theme Building<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>GPP 2.0 introduced a major upgrade to the Elements Module. With  GPP and GenerateBlocks you can now deliver dynamically generated block built content across your entire site.<\/p>\n\n\n\n<p>If you want more of a low down on Theme Building, check out our <a href=\"https:\/\/www.youtube.com\/channel\/UCoHk-JZFs1N-iI2DQlIKVnA\">YouTube channel<\/a> where Block master Leo Hsing will walk your through just some of the things you can do with it. But lets dig in and show you where Volume brings these new features to your new GP Site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Where_to_begin\"><\/span>Where to begin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are 3 main interfaces that are used to customize and build the site.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The Customizer<br>this is where you will find the global styling controls for the theme. From Colors and Typography to Navigation and Widget Areas. If you find theres not a control for one the elements your trying to style then check out #3.<\/li><li>The Post Editor<br>In Volume our posts are simply Block Based content. But we have included a Manual Excerpt in some of our Posts that is displayed in a Page Hero Block Element and our Custom Archive Post Cards. If theres some content above or below your post that you cannot see in the editor then once again check out #3.<\/li><li>The Elements Module<br>This is where the cool stuff happens. Across the site you will see a Custom Single Post Hero, Custom Post Cards on our archives, an Author Box at the top of our right sidebar, and Custom Navigation on archives and Single Posts. <\/li><\/ol>\n\n\n\n<p>Wherever possible we have defined our default styles in the Customizer. However some Elements are directly styled in the Elements Module. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Elements_are_in_place\"><\/span>What Elements are in place<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Head on over to Dashboard &gt; Appearance &gt; Elements to check out what we have prebuilt for you:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Archive Navigation<br>A simple previous \/ next Page button configuration located after the post archives and home page.<\/li><li>Post Navigation<br>A previous \/ next post  navigation with post title and featured image background located just before the footer on every single post.<\/li><li>Author Box<br>Positioned over the sidebar, the author box will display Avatar Name, the User Bio and a link to the authors archives.<\/li><li>Post Cards<br>here is our Content Template for our Blog \/ Post Archives.  This is the global style for all cards except for the First Featured Post. Which is using the following Child Element<\/li><li>&#8211; First Post Template<br>Set specifically to display for the first post of the first page of your archives.<\/li><li>Single Post Hero<br>The Full Width responsive Hero element for our single posts. Please note the following Merged Header<\/li><li>Merged Header<br>This simply applies a Merged Header for our single post, where custom site header and navigation colors are set to give them their transparent background.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_note_on_Images\"><\/span>A note on Images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Volume site preloads a series of images whose sizes are: 1024 by 576 pixels which is a nice 16:9 Aspect ratio. In general the theme has the images set to medium-large which displays the image at 768px x 432px. <\/p>\n\n\n\n<p>You can of course choose to upload large images, but its always best to maintain your images sizes and if you choose to use larger ( or smaller ) image size then try and keep the aspect ratio the same.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Two and half years after Volume was created it was time for an update. What i like to call Volume Remastered. With the advent of GP Premium 2.0 we rebuilt the entire site. Removing multiple custom elements and 100&#8217;s of line of Custom CSS. Welcome to a new era of site building.<\/p>\n","protected":false},"author":1,"featured_media":1206,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-meanings"],"_links":{"self":[{"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/posts\/959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=959"}],"version-history":[{"count":0,"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/posts\/959\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/media\/1206"}],"wp:attachment":[{"href":"https:\/\/meansfind.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}