Volume is a blank canvas for your new website. There is no pre-built content or plugins. And no Page Builder. Just a series of posts that explaining the different features and how they work. Each of Volumes features has been designed and built using GeneratePress Elements and CSS. At over 350 lines it is recommended, but not necessary, to move the Additional CSS to a Child Theme style sheet. So lets get onto making it your own.<\/p>\n
Yes, you can if you wish. The only rule is that you need to use the Default Template for your Pages and Posts. To create a full width blank canvas template then follow these steps:<\/p>\n
The majority of Volumes colors are controlled by the Customizer. There are some Elements that are part of Volumes features that require CSS. This article covers where to make those changes:
\nhttpss:\/\/gpsites.co\/volume\/how-to-change-the-custom-colors\/<\/p>\n
Volumes Slide-out navigation is customized version of the awesome GeneratePress Navigation.
\nAll controls aside of its custom colors are controlled via the Customizer.<\/p>\n
These colors have been set in Additional CSS and are in the Custom Colors Post.<\/p>\n
This is done in the Customizer > Layout > Slide Out Navigation.<\/p>\n
This would require new Custom Code and is not an option currently.<\/p>\n
You can assign a new Menu to the Slide Out Navigation via the Customizer > Menus or Dashboard > Appearance Menus.<\/p>\n
This is set in Additional CSS, find and edit this CSS just the 500ms on both lines:<\/p>\n
\r\n.offside-js--interact .offside, .offside-js--interact .offside-sliding-element, .slideout-navigation.is-open .slideout-menu, .slideout-menu {\r\n -webkit-transition: all 500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);\r\n transition: all 500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);\r\n}\r\n<\/code><\/pre>\n
\nLogo and Site Identity<\/h2>\n
Volume does not have a logo, just the Site Identity and Tag Line.
\nYou can change the Site Branding or add a logo via the Customizer.<\/p>\n
\nHero Headers<\/h2>\n
The Full width Hero Headers are set using the Elements module. Volumes Hero Headers are covered here:<\/p>\n
httpss:\/\/gpsites.co\/volume\/page-and-post-heroes\/<\/p>\n
Blog and Front Page<\/h3>\nChanging the Title<\/h4>\n
Go to Appearance > Elements and edit the Front Page & Blog Header.
\nKeep the HTML intact as it is required for styling.<\/p>\n
Different titles and background<\/h4>\n
The Blog and Front Page use the same Hero and is using Static HTML for the title and a Custom Image for its background. To have \u00a0different heroes for the blog and homepage you will need to create a new Header Element. Make sure you change the display rules accordingly.<\/p>\n
Single Post<\/h3>\nRemoving the Single Post Category tags<\/h4>\n
To remove the category tags edit the Single post header and delete this line:<\/p>\n
<span class=\"hero-category\">{{post_terms.category}}<\/span><\/code><\/pre>\nThis uses custom colors, please refer to the Custom Colors post above.<\/p>\n
Changing the Single Post Date and Author Byline<\/h4>\n
Edit this line here:<\/p>\n
<span class=\"hero-byline\">{{post_date}} by {{post_author}}<\/span><\/code><\/pre>\nRemoving the Inner Box Shadow behind header<\/h4>\n
This is set in Additional CSS, find and remove this code:<\/p>\n
\r\n.page-hero.overlay {\r\n\tbox-shadow: inset 0px 100px 83px -15px rgba(0,0,0,0.75);\r\n}\r\n<\/code><\/pre>\nPages<\/h3>\n
Although not used on the Volume site a Header Element named Pages has been set up and assigned to all Pages. The style matches the same as the Blog and Front Page.<\/p>\n
\nBlog Page<\/h2>\nChanging Featured Image sizes<\/h4>\n
The Customizer > Blog settings have been set to Auto sized featured images.
\nThe following CSS in Additional CSS does two things:
\nFirst rule removes unnecessary margins and forces the image to be centered.
\nSecond rules makes the image fit the width of the container with a fixed height.
\nEither rule can be removed if an altertnative Customizer layout is requiered.<\/p>\n
\r\n\/* Removes the margins from the post image and forces it to be justified *\/\r\n.blog .post-image, .archive .post-image, .search .post-image {\r\n margin: 0.5em 0 1em 0 !important;\r\n\tfloat: none !important; \/* Remove this line if you want to us\r\n}\r\n\r\n\/* Forces the image 100% wide and a fixed height for object fit *\/\r\n.blog .post-image img, .archive .post-image img, .search .post-image img {\r\n width: 100%;\r\n height: 250px; \/* remove or adjust height *\/\r\n -o-object-fit: cover;\r\n object-fit: cover;\r\n}\r\n<\/code><\/pre>\n\u00a0Changing the Category Link colors<\/h4>\n
This is set using Additional CSS. See the Change Colors guide above.<\/p>\n
<\/h2>\nAuthor Box<\/h2>\nRemoving Author Box<\/h4>\n
Go to Appearance > Elements and Delete the Author Box Hook Element.<\/p>\n
Changing the Author Box background color<\/h4>\n
This is set using Additional CSS. See the Change Colors guide above.<\/p>\n
<\/h2>\nShow Hide Comment Toggle<\/h2>\nRemoving the toggle<\/h4>\n
Go to Appearance > Elements and Delete the Comment Toggle Switch and the Head Scripts<\/p>\n
Changing the Toggle Colors<\/h4>\n
This is set using Additional CSS. See the Change Colors guide above.<\/p>\n
<\/h2>\nCustom Post Navigation<\/h2>\nRemoving the Custom Post Navigation<\/h4>\n
Go to Appearance > Elements and Delete the Custom Post Navigation.<\/p>\n
Changing the Next and Previous colors<\/h4>\n
This is set using Additional CSS. See the Change Colors guide above.<\/p>\n
<\/h2>\nFooter Widgets<\/h2>\nRemoving the the spacing and dotted underline<\/h4>\n
This is set in Additional CSS, find and remove this code:<\/p>\n
#footer-widgets li:not(:last-child) {\r\n border-bottom: 1px dotted #d6d7d8;\r\n line-height: 2.5em;\r\n margin-bottom: 0.5em;\r\n display: inline-block;\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Volume is a blank canvas for your new website. There is no pre-built content or plugins. And no Page Builder. Just a series of posts that explaining the different features and how they work. Each of Volumes features has been designed and built using GeneratePress Elements and CSS. At over 350 lines it is recommended, […]<\/p>\n","protected":false},"author":355,"featured_media":54,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-styling"],"_links":{"self":[{"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/posts\/959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/comments?post=959"}],"version-history":[{"count":0,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/posts\/959\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/media\/54"}],"wp:attachment":[{"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/media?parent=959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/categories?post=959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/tags?post=959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}