| | 4 | |
| | 5 | In Drupal, layout and design are defined primarily in the Theme. This is where the HTML and CSS are defined. Anyone working on Drupal themes should start with the [[https://drupal.org/documentation/theme|official theme documentation on Drupal.org]]. |
| | 6 | |
| | 7 | Some aspects of the theme are "hard coded", but theme designers include several "regions" which allow site administrators to dynamically place content. The problem for most beginners is that Drupal provides several ways to place content in order to build up the structure of our website. |
| | 8 | |
| | 9 | The two most basic tools available to us are Content and Blocks. "Content" means a News Article, Event or Static Page that a user has added. "Blocks" are little extra bits of content (menus, buttons, adverts, asides) that are shown in the margins alongside the main Content. |
| | 10 | |
| | 11 | All Drupal themes include a space where the main Content is displayed, and one or more Block Regions where Blocks can be placed. |
| | 12 | |
| | 13 | One problem with complex sites is that Drupal's admin interface for Blocks quickly gets confusing and inflexible. To solve this, two modules are commonly added to Drupal sites - Context and Panels. The Transition Network uses Drupal's built in Blocks system for most of what goes on in the right-hand sidebar and the columns immediately above the footer - where the requirements aren't too complicated. But for "hubs" like the Home Page and Training Section, we use Panels to divide the main Content area up into rows and columns where all sorts of things can be placed. |
| | 14 | |
| | 15 | [ --- above needs more work --- ] |
| | 16 | |
| | 17 | So, looking at the home page screenshot to the right, you can see these things going on: |
| | 18 | |
| | 19 | '''Admin Menu''' - an administrative tool provided by a Module. |
| | 20 | '''Logo''' & '''Main Menu''' - these are more or less "hard-coded" into the theme, meaning you'd need to edit the PHP, HTML and CSS code of the theme to change the way they look and are laid out. |
| | 21 | '''Blocks''' - Drupal's key tool for adding "extras" to the margins. |
| | 22 | '''Views''' - the Views module allows us to create custom queries which do things like "display the most recent 10 News Articles". The Views module can provide "Page Views", which have a URL and take up the entire main content area, or "Block Views" which provide Blocks. |
| | 23 | '''Panel''' - in the pink box - a special area which can be subdivided into rows and columns, each one of which can contain small bits content, Blocks and Views. |
| | 24 | '''Footer''' - as with the logo and main menu, these are "hard-coded" into the theme. |
