{"id":140,"date":"2017-12-04T12:55:08","date_gmt":"2017-12-04T12:55:08","guid":{"rendered":"http:\/\/documentation.px-lab.com\/boombox\/?p=140"},"modified":"2018-09-03T15:50:47","modified_gmt":"2018-09-03T15:50:47","slug":"design","status":"publish","type":"post","link":"https:\/\/documentation.px-lab.com\/boombox\/design\/","title":{"rendered":"Design"},"content":{"rendered":"<p>You can control Boombox design from WordPress Customizer. Under design we added the general features and options which are visible to end users.<\/p>\n<p>You can control Boombox global fonts, font size for some elements, page wrapper type, background image, main, secondary and some elements colors and border radius.<\/p>\n<p>All above mentioned options you can change from <em>WordPress Customizer \u25b8 Design<\/em><\/p>\n<p>Below are options that can be changed by admin in Design section:<\/p>\n<h4 class=\"docs-title2\">Global Fonts<\/h4>\n<ul>\n<li>Logo Font Family<\/li>\n<li>Primary Font Family<\/li>\n<li>Secondary Font Family<\/li>\n<li>Post Titles Font Family<\/li>\n<\/ul>\n<p>For each family available 2 options <strong>Variant<\/strong> and <strong>Subset<\/strong>.<\/p>\n<p><img loading=\"lazy\" class=\"img-frame alignnone wp-image-141 size-full\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/2017-12-04_1627.png\" alt=\"BoomboxDesignFonts\" width=\"328\" height=\"746\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/2017-12-04_1627.png 328w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/2017-12-04_1627-132x300.png 132w\" sizes=\"(max-width: 328px) 100vw, 328px\" \/><\/p>\n<h4 class=\"docs-title2\">Font Size<\/h4>\n<ul>\n<li>General Text Font Size<\/li>\n<li>Single Post Heading\u00a0 Font Size<\/li>\n<li>Widget Heading Font Size<\/li>\n<\/ul>\n<p><strong><img loading=\"lazy\" class=\"img-frame alignnone wp-image-142 size-full\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/2017-12-04_1636.png\" alt=\"BoomboxDesignFontSize\" width=\"325\" height=\"188\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/2017-12-04_1636.png 325w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/2017-12-04_1636-300x174.png 300w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><\/strong><\/p>\n<h4 class=\"docs-title2\">Background options<\/h4>\n<ul>\n<li>Background Style<\/li>\n<li>Body Background Color<\/li>\n<li>Body Background Image<\/li>\n<li>Body Background Image Type<\/li>\n<li>Body Background Link<\/li>\n<\/ul>\n<p><a href=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-min.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1077 img-frame\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-min.png\" alt=\"\" width=\"310\" height=\"396\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-min.png 310w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-min-235x300.png 235w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><\/a><\/p>\n<p>Page wrapper (<strong>Background Style<\/strong>) can be:<\/p>\n<dl class=\"dl-horizontal dl-horizontal-sm\"><br \/>\n<dt>Stretched<\/dt><dd>means that in global level if different not selected then all pages and posts will have <strong>Full Width<\/strong> layout<\/p>\n<p><a class=\"img-zoomin\" href=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-2-min.png\"><img loading=\"lazy\" class=\"img-frame alignnone wp-image-1081 size-medium\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-2-min-300x179.png\" alt=\"\" width=\"300\" height=\"179\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-2-min-300x179.png 300w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-2-min-768x459.png 768w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-2-min-1024x611.png 1024w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-2-min.png 1499w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/dd><br \/>\n<dt>Boxed<\/dt><dd>means that in global level if different not selected then all pages and posts will have <strong>Boxed<\/strong> layout<\/p>\n<p><a class=\"img-zoomin\" href=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-3-min.png\"><img loading=\"lazy\" class=\"img-frame alignnone wp-image-1082 size-medium\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-3-min-300x194.png\" alt=\"\" width=\"300\" height=\"194\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-3-min-300x194.png 300w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-3-min-768x496.png 768w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-3-min-1024x662.png 1024w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-3-min.png 1430w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/dd><br \/>\n<dt>Flat cards<\/dt><dd>means that in global level if different not selected then all pages and posts will have <strong>Flat cards<\/strong> layout<\/p>\n<p><a class=\"img-zoomin\" href=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-4-min.png\"><img loading=\"lazy\" class=\"img-frame alignnone wp-image-1083 size-medium\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-4-min-300x233.png\" alt=\"\" width=\"300\" height=\"233\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-4-min-300x233.png 300w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-4-min-768x596.png 768w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-4-min-1024x794.png 1024w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-4-min.png 1204w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/dd><br \/>\n<dt>Material cards<\/dt><dd>means that in global level if different not selected then all pages and posts will have <strong>Material cards<\/strong> layout<\/p>\n<p><a class=\"img-zoomin\" href=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-5-min.png\"><img loading=\"lazy\" class=\"img-frame alignnone wp-image-1080 size-medium\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-5-min-300x232.png\" alt=\"\" width=\"300\" height=\"232\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-5-min-300x232.png 300w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-5-min-768x593.png 768w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-5-min-1024x791.png 1024w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-5-min.png 1206w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/dd><br \/>\n<\/dl>\n<h4 class=\"docs-title2\">Colors<\/h4>\n<p>In this section admin can control:<\/p>\n<ul>\n<li>Content Background Color<\/li>\n<li>Primary Color<\/li>\n<li>Primary Text Color<\/li>\n<li>Base Text Color<\/li>\n<li>Secondary Text Color<\/li>\n<li>Heading Text Color<\/li>\n<li>Link Text Color<\/li>\n<li>Secondary Elements Background Color<\/li>\n<li>Secondary Elements Text Color<\/li>\n<li>Global Border Color<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1087 img-frame\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-6.png\" alt=\"\" width=\"294\" height=\"704\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-6.png 294w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-6-125x300.png 125w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/p>\n<h4 class=\"docs-title2\">Borders Radius<\/h4>\n<ul>\n<li>Global Border Radius (px)<\/li>\n<li>Inputs\/Buttons Border Radius (px)<\/li>\n<li>Social Icons Border Radius (px)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1089 img-frame\" src=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-7.png\" alt=\"\" width=\"316\" height=\"280\" srcset=\"https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-7.png 316w, https:\/\/documentation.px-lab.com\/boombox\/wp-content\/uploads\/sites\/4\/2017\/12\/Design-7-300x266.png 300w\" sizes=\"(max-width: 316px) 100vw, 316px\" \/><\/p>\n<p class=\"note-box bg-success\">For Changing design for Header check <a href=\"https:\/\/documentation.px-lab.com\/boombox\/header\/\"><em>Header section<\/em><\/a> in this documentation<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can control Boombox design from WordPress Customizer. Under design we added the general features and options which are visible to end users. You can control Boombox global fonts, font size for some elements, page wrapper type, background image, main, secondary and some elements colors and border radius. All above mentioned options you can change [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[85,86],"tags":[97,99,98,101,95,87,91,90,89,88,94,100,92,96,93],"_links":{"self":[{"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/posts\/140"}],"collection":[{"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":24,"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":1095,"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/posts\/140\/revisions\/1095"}],"wp:attachment":[{"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.px-lab.com\/boombox\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}