{"id":53406,"date":"2015-09-04T08:20:57","date_gmt":"2015-09-04T12:20:57","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=53406"},"modified":"2016-02-22T06:40:06","modified_gmt":"2016-02-22T11:40:06","slug":"wordpress-cherry-3-x-how-to-make-specific-post-fullwidth","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-cherry-3-x-how-to-make-specific-post-fullwidth.html","title":{"rendered":"WordPress Cherry 3.x. How to make specific post fullwidth"},"content":{"rendered":"<p>\r\n<p>Hello! This video tutorial shows how to make <strong>specific post fullwidth<\/strong> in WordPress CherryFramework 3 templates.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=Mja1qd6XphU?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress Cherry 3.x. How to make specific post fullwidth<\/a><\/p>\r\n<p><strong>Single post<\/strong> page usually includes the <strong>content area<\/strong> and the <strong>sidebar<\/strong>:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_1-300x158.png\" alt=\"wordpress_how_to_make_specific_post_fullwidth_1\" width=\"300\" height=\"158\" class=\"aligncenter size-medium wp-image-53407\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_1-300x158.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_1-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_1-1024x538.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_1.png 1247w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>You may want to get rid of the sidebar and force the post content to occupy the whole screen. This can be easily done using several simple <strong>CSS<\/strong> rules.<\/p>\r\n<p>Let&#8217;s learn how to do this.<\/p>\r\n<ol>\r\n<li>\r\n<p>Using <a href=\"\/help\/firebug-mozilla-firefox-plugin.html\" target=\"_blank\">Firebug<\/a> extension in <strong>Firefox<\/strong> or <strong>Inspect Element<\/strong> feature of your browser look for the<strong> sidebar class<\/strong>:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_2-300x158.png\" alt=\"wordpress_how_to_make_specific_post_fullwidth_2\" width=\"300\" height=\"158\" class=\"aligncenter size-medium wp-image-53408\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_2-300x158.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_2-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_2-1024x538.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_2.png 1248w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>Then, find the <strong>content area class<\/strong> in the same way:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_3-300x157.png\" alt=\"wordpress_how_to_make_specific_post_fullwidth_3\" width=\"300\" height=\"157\" class=\"aligncenter size-medium wp-image-53409\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_3-300x157.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_3-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_3-1024x537.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_3.png 1248w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>Now, let&#8217;s find specific <strong>class for single posts<\/strong> pages:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_4-300x165.png\" alt=\"wordpress_how_to_make_specific_post_fullwidth_4\" width=\"300\" height=\"165\" class=\"aligncenter size-medium wp-image-53410\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_4-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_4-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_4-1024x563.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_4.png 1247w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<\/ol>\r\n<p>The <strong>specific post<\/strong> page class is: <strong>postid-1910<\/strong>. In case you would like to perform changes to all the <strong>single posts<\/strong> pages, you should use the <strong>single-post<\/strong> class.<\/p>\r\n<p>Now that we know names of classes, we can add required <strong>CSS<\/strong> rules to remove the sidebar and stretch the content fullwidth.<\/p>\r\n<ol>\r\n<li>\r\n<p>Navigate to <strong>Appearance -> Editor<\/strong> in your WordPress admin panel:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_5-300x166.png\" alt=\"wordpress_how_to_make_specific_post_fullwidth_5\" width=\"300\" height=\"166\" class=\"aligncenter size-medium wp-image-53411\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_5-300x166.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_5-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_5-1024x565.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_5.png 1245w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>On the appeared <strong>style.css<\/strong> file screen add the following code at the very bottom of the file:<\/p>\r\n<\/li>\r\n<\/ol>\r\n<pre class=\"brush:css\">\r\n.postid-1910 #sidebar {\r\n display: none;\r\n}\r\n.postid-1910 #content {\r\n width: 100%;\r\n}\r\n<\/pre>\r\n<p>Click the <strong>&#8220;Update File&#8221;<\/strong> button below to apply changes:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_6-300x165.png\" alt=\"wordpress_how_to_make_specific_post_fullwidth_6\" width=\"300\" height=\"165\" class=\"aligncenter size-medium wp-image-53412\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_6-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_6-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_6-1024x563.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_6.png 1247w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>Navigate to your site front-end and refresh the page to see changes.<\/p>\r\n<p>You can see the post content is displayed fullwidth now:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_7-300x158.png\" alt=\"wordpress_how_to_make_specific_post_fullwidth_7\" width=\"300\" height=\"158\" class=\"aligncenter size-medium wp-image-53413\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_7-300x158.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_7-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_7-1024x538.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/wordpress_how_to_make_specific_post_fullwidth_7.png 1247w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>This is the end of the tutorial, you have learnt how to make <strong>specific post fullwidth<\/strong> in your WordPress CherryFramework 3 template.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=Mja1qd6XphU?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress Cherry 3.x. How to make specific post fullwidth<\/a><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This video tutorial shows how to make <strong>specific post fullwidth<\/strong> in Wordpress CherryFramework 3 templates.<\/p>\n","protected":false},"author":68,"featured_media":53416,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1878,592,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53406"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=53406"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53406\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/53416"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=53406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=53406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=53406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}