In Backdrop, as in Drupal, there usually seems to be more than one way of doing the same thing, and in this blog contribution I am not suggesting that this is THE way to theme your site, it just happens to be a way I have used with some success.
Why modify a theme?
I am very much in favour of establishing a range of ready-made themes for Backdrop, but almost without exception my clients have wanted something individual, tailored to their needs, their existing ‘house style’ and looking a bit special. They don’t want to look like ‘another Wordpress site’, or Joomla, or Drupal.
When working with Drupal my approach was to use the Zen theme as a basis, create a subtheme and then adapt it mostly by use of CSS, but also with small template modifications, sometimes use of panels and often extensive use of views where appropriate.
Use of subtheming
Although it is possible to make a copy of an existing theme, rename it, modify it in whatever way required, this is not best practice. The reason is that when a new release of the original is made the changes will not be applied to your copied theme. If however you use a subtheme, you can benefit from any changes made to the original base theme, except of course to the changes you have superimposed in your subtheme.
Bartik as a base theme
Starting work with Backdrop my initial thought was that I needed to port Zen or a similar theme, but after consideration I realised that with the addition of Layouts within Backdrop that might not be necessary.
By using an appropriate layout and modifying the CSS we have almost complete control of a page. The column widths of the layouts provided with Backdrop core can be adjusted or the arrangement flipped left-right, or if needed the contributed module Radix Layouts provides a variety of different layout schemes.
Somewhat to my surprise I have found that the theme Bartik that comes with Backdrop can provide an excellent starting point, either by creating a copy with a new name or by using the recommended approach of creating a subtheme. Add your new theme to the themes directory and make it the default for the site.
Layouts
Backdrop comes with four layouts and having chosen one of these as my starting point, or alternatively a Radix layout, I give it a revised name and copy it to the site layout directory. In this way it becomes an additional layout available for use within the site, and any page can be assigned this new layout or one of the original four.
An alternative approach, perhaps more appropriate when only small changes to a core layout are needed, is to override the styles provided in its stylesheet by adding new styles in your theme’s stylesheet. As with customising themes, it is important not to modify the files provided in core because these will change with your next update.
I then modify the theme and layout settings to begin to create the appearance I want, uploading any custom and background images as needed, and using my browser’s ‘inspect element’ function to identify the CSS selectors to modify. It is advisable to add comments to the CSS file in order to be able to understand changes at a later date.
Templates
There may well be occasional situations where some modification to a template is required. For one of my sites I needed to use a different header background for each page and a simple preprocess function adds a node number to the class of the body tag, enabling any page to be specifically targeted with styles.
/**
* Implements hook_preprocess_page().
*
* Adds a class 'page-node-N' to each page.
*/
function mytheme_preprocess_page(&$variables) {
$node = menu_get_object();
if ($node) {
$variables['classes'][] = 'page-node-' . $node->nid;
}
}
Page layout variations
I find the use of conditions within the default layout to be an essential part of controlling the content and appearance of individual pages. I use this capability to make blocks, including submenus, appear on specific pages. If the layout code allows for it, pages may appear as single or two or even three column depending on whether blocks are to appear or not. The only downside I see is that the default settings page for the layout can get rather complicated.
The layout system also provides for the selective use of different layouts. For example, you may use one layout for your front page and a different one for others. This approach can be extended to make use of different layouts for different sections of a site, and is controlled by setting the ‘visibility conditions’ for each layout.
Choosing a font
The choice of font can make a great difference to the appearance of a page and thanks to the existence of websites offering numerous typefaces we are spoilt for choice. Of particular note is the Google Fonts service, enabling open source font implementations to be used in a way that puts the chosen font into the display device where and when it is needed. I make use of the contributed module named Google Fonts (google_fonts) which enables a designer to preview all the fonts available, select those for use on a site and add the necessary code and style to a Backdrop site.
Please note that when you first use this module it takes a little while to download a full list of all the available fonts and store this in a local configuration file for future reference. Also, note that to get the layout you desire it is important to adjust some style settings to suit the chosen font.
Responding to screen size
One final point is that to be responsive the site must have styles set to control the differences in the layout for various screen sizes. To achieve this I usually add more breakpoints and styles than those provided within the layout’s stylesheet.
Example sites
Three examples where I have followed this approach are: