{"id":46,"date":"2014-01-15T15:01:30","date_gmt":"2014-01-15T15:01:30","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=46"},"modified":"2014-03-26T10:16:14","modified_gmt":"2014-03-26T10:16:14","slug":"section-sidebars-banners-and-footers","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/15\/section-sidebars-banners-and-footers\/","title":{"rendered":"Section Sidebars, Banners and Footers"},"content":{"rendered":"<p><strong>The simplest way<\/strong> to get content into the sidebar is to create a piece of All Purpose Content in a section and give it the class &#8216;<strong>insidebar<\/strong>&#8216;. This content will then appear in the sidebar (if there is one in the template you&#8217;re using). This is demonstrated on the Sample <a href=\"http:\/\/dev-research.ncl.ac.uk\/samplecomponents\/\">Components site homepage<\/a>. Images used in the sidebar should be cropped to 200px wide. If you want to <em>remove<\/em> the sidebar from a section, you give a piece of content in that section the class &#8216;<strong>nosidebar<\/strong>&#8216;.<\/p>\n<p><strong>If you want to alter the sidebar or footer across multiple sections, you will need to use hidden sections &#8211; the rest of this post describes how to do that:<\/strong><\/p>\n<p>Once you&#8217;ve got started with the <a title=\"Site Structure \u2013 Adding, Amending and Moving Sections\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/15\/site-structure-adding-amending-and-moving-sections\/\">Structure <\/a>of your site and some basic <a title=\"Adding and amending Content.\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/15\/adding-and-amending-content\/\">Content<\/a>, you&#8217;ll have noticed a number of Sections with grey folder icons in the Site Structure.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.44.12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-47\" alt=\"Initial Site Structure from Template\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.44.12-224x300.png\" width=\"224\" height=\"300\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.44.12-224x300.png 224w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.44.12.png 291w\" sizes=\"auto, (max-width: 224px) 100vw, 224px\" \/><\/a><\/p>\n<p>The grey icon simply means that these are Hidden Sections, however the template we use is set up to recognise certain naming conventions and place these in the relevant area of the site. \u00a0We&#8217;ll ignore Section Styles for now as it&#8217;s a special case.\u00a0The names you can use are as follows:<\/p>\n<ul>\n<li><strong>Section Sidebar\u00a0<\/strong><\/li>\n<li><strong>Home Sidebar\u00a0<\/strong><\/li>\n<li><strong>Section Footer<\/strong><\/li>\n<li><strong>Home Footer\u00a0<\/strong><\/li>\n<li><strong>Section Banner<\/strong><\/li>\n<li><strong>Home Banner<\/strong><\/li>\n<\/ul>\n<p><strong>Section Footer<\/strong> and<strong> Home Footer<\/strong><\/p>\n<p>If you click &#8216;Modify Content&#8217; for <strong>Section Footer<\/strong>, you&#8217;ll see a piece of content called Address. Modify this and you&#8217;ll see the fragment of content that appears on the footer of all pages of your website.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.52.47.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-48\" alt=\"Section Footer\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.52.47-300x150.png\" width=\"300\" height=\"150\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.52.47-300x150.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.52.47-500x250.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-13.52.47.png 1003w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>If you add the contact details for your site and click Add and Approve your changes will be reflected in the footer of all pages when the site next publishes.<\/p>\n<p><em>So: content placed in these hidden sections appears in the part of the site its name suggests: the Sidebar content under the left hand menu, and the Footer content at the bottom of all the content. Banner content appears below the top navigation, but above the sidebar and main content area.<\/em><\/p>\n<p><em>The prefixes Home and Section differ as follows: Home Sidebar\/Footer will only appear in the sidebar or footer of that single section. Section Sidebar\/Footer will appear in that section and all subsections.<\/em><\/p>\n<p><strong>Section Sidebar<\/strong> and<strong> Home Sidebar<\/strong><\/p>\n<p>So, if we wish to create a sidebar to override the rest of the site within only the Partners section (logo&#8217;s of funding bodies perhaps?) we click &#8216;Add Section&#8217; to this&#8230;<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-51\" alt=\"Add Secton\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.12-300x141.png\" width=\"300\" height=\"141\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.12-300x141.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.12-500x236.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.12.png 809w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&#8230;\u00a0and give the new section the name &#8216;Section Sidebar&#8217;. Make sure you uncheck the &#8216;Show in Navigation&#8217; checkbox half way down the right hand side.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.42.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-50\" alt=\"Uncheck Show in Navigation\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.42-300x151.png\" width=\"300\" height=\"151\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.42-300x151.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.42-1024x517.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.42-500x252.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.00.42.png 1030w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>We then see that the Partners section has a subsection called <strong>Section Sidebar<\/strong>.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.01.21.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-49\" alt=\"Add Sidebar Section\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.01.21-300x159.png\" width=\"300\" height=\"159\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.01.21-300x159.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.01.21-500x265.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-14.01.21.png 778w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>You can then <strong>Add Content<\/strong> to just the sidebar of the Partners section (and any subsections it might have in future). This overrides any Section Sidebar sections appearing higher up in the structure.<\/p>\n<p>In the below screenshot, content of type <strong>File Resource<\/strong> was placed in the Section Sidebar of the Partners Section.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.00.04.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-52\" alt=\"File Resource in Sidebar\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.00.04-300x214.png\" width=\"300\" height=\"214\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.00.04-300x214.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.00.04-1024x730.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.00.04-420x300.png 420w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.00.04.png 1050w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Section Banner<\/strong> and<strong> Home Banner<\/strong><\/p>\n<p>Add a section called <strong>Home Banner<\/strong> to the top level of the site, remembering to uncheck the Show in Navigation checkbox.<\/p>\n<p>Then go back to the site structure and <strong>Add Content<\/strong> to it. Any content you add will appear above the sidebar and content, but below the main navigation. In the screenshot below a large image has been added to the Home Banner section:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.05.23.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-55\" alt=\"Home Banner\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.05.23-300x212.png\" width=\"300\" height=\"212\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.05.23-300x212.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.05.23-1024x726.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.05.23-423x300.png 423w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-15-at-15.05.23.png 1344w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>The Banner area is 950px wide.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-23-at-12.58.41.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-75\" alt=\"950 Pixels Wide\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-23-at-12.58.41-300x248.png\" width=\"300\" height=\"248\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-23-at-12.58.41-300x248.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-23-at-12.58.41-1024x847.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-23-at-12.58.41-362x300.png 362w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/01\/Screen-shot-2014-01-23-at-12.58.41.png 1046w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Next:<\/p>\n<ul>\n<li><a title=\"Banner Slideshows\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/23\/banner-slideshows\/\">Banner Slideshows<\/a><\/li>\n<li>Template Controls (Section Styles)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The simplest way to get content into the sidebar is to create a piece of All Purpose Content in a section and give it the class &#8216;insidebar&#8216;. This content will then appear in the sidebar (if there is one in &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/15\/section-sidebars-banners-and-footers\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":839,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,19],"tags":[],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-getting-started","category-the-class-field"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/users\/839"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":10,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":314,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/46\/revisions\/314"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}