{"id":909,"date":"2018-09-21T16:50:22","date_gmt":"2018-09-21T16:50:22","guid":{"rendered":"httpss:\/\/gpsites.co\/volume\/?p=909"},"modified":"2018-09-21T16:50:22","modified_gmt":"2018-09-21T16:50:22","slug":"how-to-change-the-custom-colors","status":"publish","type":"post","link":"https:\/\/iblog.dearbornschools.org\/christestsite\/2018\/09\/21\/how-to-change-the-custom-colors\/","title":{"rendered":"How to change the Custom Colors"},"content":{"rendered":"<p>Changing Volumes Colors are mainly done via the Theme Customizer. There are a few that are controlled by CSS. The rules for them are found in the Customizer > Additional CSS. They have been placed together at the top of the stack for easy access:<\/p>\n<h2>Link accents<\/h2>\n<p>Styling for Category Tags found in Blog Articles &#038; Single Post Header and the Next \/ Previous links in the Featured image post navigation.<br \/>\n<span class=\"hero-category\"><a href=\"#\">Link<\/a><\/span><\/p>\n<pre><code>\r\n.hero-category a, .post-nav, .entry-meta .cat-links a {\r\n    background-color: #ff3366;\r\n    color: #fff !important;\r\n}\r\n<\/code><\/pre>\n<h2>Custom Slide Out Navigation<\/h2>\n<h5>Slide Out Header<\/h5>\n<p>This is a hooked element used to create the custom toggles.<\/p>\n<pre><code>\r\n\/* bar at the top of slide out *\/\r\n.slideout-header {\r\n    background-color: #0b0521;\r\n}\r\n<\/code><\/pre>\n<h5>Slide Out Toggle<\/h5>\n<pre><code>\r\n\/* Menu Open colors *\/\r\n.slideout-header .custom.slideout-toggle a {\r\n    background-color: #ff3366;\r\n}\r\n\/* Menu Exit colors *\/\r\n.slideout-header .slideout-exit {\r\n    color: #fff;\r\n    background-color: #ff3366;\r\n}\r\n<\/code><\/pre>\n<h5>Slide Out Menu background<\/h5>\n<p>To create the slide down effect the Slide Out navigation background is set to transparent in the Customizer.<\/p>\n<pre><code>\r\n\r\n\/* Background of menu *\/\r\n#generate-slideout-menu .slideout-menu li {\r\n    background-color: #0b0521;\r\n}\r\n<\/code><\/pre>\n<h2>Blog post navigation<\/h2>\n<p>The Blog post navigation page numbers and next previous styling.<\/p>\n<p><span class=\"nav-links\"><a class=\"page-numbers\" style=\"margin: 3px;\" href=\"#\">1<\/a><a class=\"page-numbers\" style=\"margin: 3px;\" href=\"#\">2<\/a><a class=\"page-numbers\" style=\"margin: 3px;\" href=\"#\">3<\/a><\/span><\/p>\n<pre><code>\r\n.nav-links .page-numbers {\r\n    background-color: #0b0521;\r\n    color: #fff;\r\n}\r\n\r\n.nav-links .page-numbers:hover {\r\n    background-color: #383f49;\r\n    color: #fff;\r\n}\r\n<\/code><\/pre>\n<h2>Author Box<\/h2>\n<pre><code>\r\n.author-box {\r\n    background-color: #f1f6f7;\r\n}\r\n<\/pre>\n<p><\/code><\/p>\n<h2>Comments Toggle<\/h2>\n<p>The show and hide toggle before the Posts Comments form.<\/p>\n<pre><code>\r\n.slider {\r\n    background-color: #0b0521;\r\n}\r\n\r\ninput:checked+.slider {\r\n    background-color: #ff3366;\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Changing Volumes Colors are mainly done via the Theme Customizer. There are a few that are controlled by CSS. The rules for them are found in the Customizer > Additional CSS. They have been placed together at the top of the stack for easy access: Link accents Styling for Category Tags found in Blog Articles [&hellip;]<\/p>\n","protected":false},"author":355,"featured_media":57,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-909","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\/909","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=909"}],"version-history":[{"count":0,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/posts\/909\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/media\/57"}],"wp:attachment":[{"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/media?parent=909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/categories?post=909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iblog.dearbornschools.org\/christestsite\/wp-json\/wp\/v2\/tags?post=909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}