Drupal + Omega + Bootstrap: quick creation of completely custom themes without layout (Part 1. Omega)
- From the sandbox
- Tutorial
Drupal 7 today has developed so much that it allows you to create themes for sites of any complexity, almost without resorting to HTML-layout. The process of creating such themes is reminiscent of using a constructor; all the main work of transferring a sketch of a layout to life consists only in setting the necessary styles in CSS. In this case, there are no additional restrictions; you can create themes of any complexity, moreover, fully customizable; and unless you come across the limitations of the platform itself (Drupal) or the selected framework (Bootstrap).
My development experience for Drupal for more than 7 years, began in 2005 with Drupal 4.6, and since then I have been using and admiring how it develops and becomes better and more convenient from version to version. In this article I will share my experience in creating and using a sabzha bunch. It is understood that you are familiar with Drupal, you know how to install modules and create themes, but for some reason you are not yet using the Omega framework to develop your themes. The first part of the article is a simple guide on how to create and configure a sub-theme based on Omega. I also hope that the idea of this article will be interesting to users of alternative platforms, and will advertise a little the power, simplicity and flexibility of Drupal in this matter.
Here is a list of the main and auxiliary modules that allow you to achieve a similar result:
To begin with, a few general words about the architecture of the Drupal themes engine, for those who are not familiar with it.
1. The engine itself.
First, it is determined which theme engine will be used. Since time immemorial, Drupal has been using standard PHP (PHPTemplate) as an engine, the templates of which are ordinary HTML files with PHP view inserts
2. The basic theme
A design theme that defines all the basic styles, functions, and more for future subtopics. Your theme may not use any basic themes, may be written from scratch, or be itself basic for other topics.
3. Subtheme
Inherits all the functions, styles, and more from the underlying theme and can override them. A sub topic can also be indicated as a base, and so on ad infinitum.
This is a very flexible system that can be used, for example, for minor modifications of the main theme of the site (say, to decorate it for the New Year - create a sub-theme that hangs for a while, then turn it off, turn it on after a year, and so on). Well, also this architecture allows you to create, use and extend such frameworks as Omega or AdaptiveTheme.
To get started, download and install the basic theme and modules, indicated at the beginning of the article. Next, go to the section Appearance and, if the Omega Tools module is installed correctly, we see the Create new Omega subtheme link on the page (if the module is installed, but this link is not there, try to clear the cache). We follow the link and set the parameters for the new topic:
Figure 1. Creating a sub-theme using the Omega Tools module
Press the Save and continue button , followed by 2 simple steps of the wizard, on which you can set additional parameters for the theme, enable it immediately after installation or edit the
Then the fun begins.
We follow the Settings link of our theme and see several tabs in which the Omega framework offers us fine-tuning of our layout (Layout configuration).
Here you can choose one of the grid types: Default (960px) - standard, adaptively fixed in width for the main screen resolutions (800, 1024, 1280), or Fluid - stretching across the entire width of the screen. Users of frameworks like Bootstrap know the difference between the two. Also on this tab you can fine-tune
Through
All the main work on setting up the site layout will take place in this tab. Actually, this is the main bun of the Omega framework - setting the location of Drupal regions for placing Drupal blocks not by editing the template code
Now a few words about how to use it. At first glance, everything looks a bit confusing, but once sorted out, then everything becomes simple. Omega introduces in addition to the standard essence of the region in Drupal two more: section and zone. Sections unite zones, and zones that are already familiar to us are regions. There are three sections in total: Header (header), Content (content) and Footer (footer), you cannot redefine them (although this does not need to, since these are rather abstract entities). Inside these sections you can place zones with regions as you like.
Each zone has settings, the main of which are: Section (the section to which the zone belongs), Weight (weight that determines the order of zones in the section), Column count (the number of columns for each section can be set, 12, 16 are offered for selection and 24), Primary Region (main region). The width of each zone corresponds to the width of the page. If the main region is specified, then the total number of columns of all regions within the zone should be no more than the number of columns of the zone itself, and then if one or several regions are empty, then the region specified by the main one is stretched to the remaining width. For example, if there are no blocks on the main page in the regions Sidebar First (Left column) and Sidebar Second (Right column), then the Content region is 12 columns wide. And if blocks appear on the inner pages in the left column, then the region with the contents will occupy 9 columns in width. Well, if the blocks are present in both columns, then the width of the content will be equal to the specified number of columns - 6. This will happen if the zone is set to the main region, and if not, then there can be any number of regions of any width, all regions will have a given width, empty regions (without blocks or with hidden blocks) will not be displayed.
Further, the zone lists the regions belonging to it, the regions themselves have the same settings: Zone (parent zone), Prefix (number of columns for offset, similar to offset * classes in Bootstrap), Width (width, number of columns), Suffix (number of columns for indentation after region), Weight.
By changing all these parameters, you can adjust the location of the blocks in the layout absolutely as you like. Regions can be redefined in the standard way for Drupal - in the topic description file
Additionally using the Context module(we do not consider it in this article), you can completely redefine the location of all regions for different pages of the site, as well as apply other theme settings. Example: a large site, different arrangement of blocks on the main and internal pages of the site or sections, plus a reference page with an online map that uses a fluid layout.
Just an interesting bun that helps in the job: adds 2 buttons that allow you to enable (by default - disable) the overlay grid and auxiliary blocks. Figure 2 (further) shows how the layout looks with the blocks and the grid turned on. In the settings, I turn off the display of these things by default, and make the buttons visible only to the administrator.
On this tab, you can enable or disable the necessary / unnecessary libraries. A library is the essence of the Omega framework and is not related to the Libraries API. Libraries are defined in a file
Similar to the previous tab, on this we can enable or disable CSS files that Omega uses, as well as standard Drupal styles. It is very convenient when we do not want the styles of any module to interfere with us.
Well, on the last tab, we turn off all the standard Drupal elements that we cannot turn off in the general settings of the topic: messages, tabs, breadcrumbs, page title, RSS icon. We turn off the remaining elements in the settings common to all those topics, which are below the tabs and each topic has a logo, site name, slogan, main and additional menus.
As a result, we got a pristine clean layout, which we will see by going to the main page.
Figure 2. The main page with disabled blocks and enabled grid and debugging blocks
In order to return the standard elements to the page (logo, page title, menu, messages, tabs, etc.), we will use the Delta Blocks module: in its settings, turn on the components we need , and already in the form of standard blocks we will place them on the page anywhere. It also saves us from editing the template
We created our own fully customizable theme without editing the code for the files of the main templates, and even without connecting to the server via FTP / SSH. But now we want to add the power of Bootstrap to our theme. How to achieve this will be discussed in the second part of the article.
The second part, we connect Bootsrap
My development experience for Drupal for more than 7 years, began in 2005 with Drupal 4.6, and since then I have been using and admiring how it develops and becomes better and more convenient from version to version. In this article I will share my experience in creating and using a sabzha bunch. It is understood that you are familiar with Drupal, you know how to install modules and create themes, but for some reason you are not yet using the Omega framework to develop your themes. The first part of the article is a simple guide on how to create and configure a sub-theme based on Omega. I also hope that the idea of this article will be interesting to users of alternative platforms, and will advertise a little the power, simplicity and flexibility of Drupal in this matter.
Here is a list of the main and auxiliary modules that allow you to achieve a similar result:
- Omega Drupal 7 Base Theme - a basic theme for Drupal 7, a framework for creating your own themes;
- Omega Tools - toolkit (module) for easy creation of sub-themes based on Omega through the admin panel;
- Delta - from this set we need the Delta Blocks module to replace the standard design components with blocks;
- Block Class is a simple module for adding CSS classes to blocks that we need (useful for Bootstrap).
Architecture
To begin with, a few general words about the architecture of the Drupal themes engine, for those who are not familiar with it.
1. The engine itself.
First, it is determined which theme engine will be used. Since time immemorial, Drupal has been using standard PHP (PHPTemplate) as an engine, the templates of which are ordinary HTML files with PHP view inserts
2. The basic theme
A design theme that defines all the basic styles, functions, and more for future subtopics. Your theme may not use any basic themes, may be written from scratch, or be itself basic for other topics.
3. Subtheme
Inherits all the functions, styles, and more from the underlying theme and can override them. A sub topic can also be indicated as a base, and so on ad infinitum.
This is a very flexible system that can be used, for example, for minor modifications of the main theme of the site (say, to decorate it for the New Year - create a sub-theme that hangs for a while, then turn it off, turn it on after a year, and so on). Well, also this architecture allows you to create, use and extend such frameworks as Omega or AdaptiveTheme.
Creating Subtems Based on Omega
To get started, download and install the basic theme and modules, indicated at the beginning of the article. Next, go to the section Appearance and, if the Omega Tools module is installed correctly, we see the Create new Omega subtheme link on the page (if the module is installed, but this link is not there, try to clear the cache). We follow the link and set the parameters for the new topic:
- Name , for example
Omega Example Theme; - Machine-readable name , for example
omega_example; - check the box Install automatically ;
- select Destination (destination) - a directory with the configuration of the site we need, or
sites/allif we want the theme to be accessible to all sites in a multisite installation (the web server must have write permissions to this directory to perform an unattended installation); - as the Base theme (base theme) select
Omega; - as Starterkit (starter kit), select
Omega HTML5 Starterkit.
Figure 1. Creating a sub-theme using the Omega Tools module
Press the Save and continue button , followed by 2 simple steps of the wizard, on which you can set additional parameters for the theme, enable it immediately after installation or edit the
.infofile. If everything is done correctly and no errors occurred during the creation process, then our topic is ready! We can now find it in the list of topics and set it by default. Then the fun begins.
Layout Customization
We follow the Settings link of our theme and see several tabs in which the Omega framework offers us fine-tuning of our layout (Layout configuration).
1. Grid settings
Here you can choose one of the grid types: Default (960px) - standard, adaptively fixed in width for the main screen resolutions (800, 1024, 1280), or Fluid - stretching across the entire width of the screen. Users of frameworks like Bootstrap know the difference between the two. Also on this tab you can fine-tune
@mediato the desired width. Well, for most projects on this tab, you can leave everything by default. Through
@mediathe following CSS are connected to the topic:- global.css - the main style file, connected globally on all screens, including mobile, implementing the concept of mobile-first;
- omega-example-alpha-default.css - the main stylesheet for use with the grid
- omega-example-alpha-default-narrow.css - file for screens with a width of about 800 pixels
- omega-example-alpha-default-normal.css - file for screens with a width of about 1024 pixels and all IE up to version
9 - omega-example-alpha-default-wide.css - file for screens over 1200 pixels wide
2. Zone and region configuration
All the main work on setting up the site layout will take place in this tab. Actually, this is the main bun of the Omega framework - setting the location of Drupal regions for placing Drupal blocks not by editing the template code
page.tpl.php, but directly in the theme settings. Actually, when using Omega, there is no need to redefine or even look into global templates, such as html.tpl.phpor page.tpl.php, and others. This is the functionality indicated at the beginning of the article, which eliminates the HTML layout layout. You can focus directly on CSS and code on the output templates you need node.tpl.php, for example. And the width or arrangement of the left / right columns, the main content of the page or blocks in the footer is now configured in a couple of clicks.Now a few words about how to use it. At first glance, everything looks a bit confusing, but once sorted out, then everything becomes simple. Omega introduces in addition to the standard essence of the region in Drupal two more: section and zone. Sections unite zones, and zones that are already familiar to us are regions. There are three sections in total: Header (header), Content (content) and Footer (footer), you cannot redefine them (although this does not need to, since these are rather abstract entities). Inside these sections you can place zones with regions as you like.
Each zone has settings, the main of which are: Section (the section to which the zone belongs), Weight (weight that determines the order of zones in the section), Column count (the number of columns for each section can be set, 12, 16 are offered for selection and 24), Primary Region (main region). The width of each zone corresponds to the width of the page. If the main region is specified, then the total number of columns of all regions within the zone should be no more than the number of columns of the zone itself, and then if one or several regions are empty, then the region specified by the main one is stretched to the remaining width. For example, if there are no blocks on the main page in the regions Sidebar First (Left column) and Sidebar Second (Right column), then the Content region is 12 columns wide. And if blocks appear on the inner pages in the left column, then the region with the contents will occupy 9 columns in width. Well, if the blocks are present in both columns, then the width of the content will be equal to the specified number of columns - 6. This will happen if the zone is set to the main region, and if not, then there can be any number of regions of any width, all regions will have a given width, empty regions (without blocks or with hidden blocks) will not be displayed.
Further, the zone lists the regions belonging to it, the regions themselves have the same settings: Zone (parent zone), Prefix (number of columns for offset, similar to offset * classes in Bootstrap), Width (width, number of columns), Suffix (number of columns for indentation after region), Weight.
By changing all these parameters, you can adjust the location of the blocks in the layout absolutely as you like. Regions can be redefined in the standard way for Drupal - in the topic description file
.info, zones can be redefined in the same way, there can be any number of them. Additionally using the Context module(we do not consider it in this article), you can completely redefine the location of all regions for different pages of the site, as well as apply other theme settings. Example: a large site, different arrangement of blocks on the main and internal pages of the site or sections, plus a reference page with an online map that uses a fluid layout.
3. Debugging (debugging)
Just an interesting bun that helps in the job: adds 2 buttons that allow you to enable (by default - disable) the overlay grid and auxiliary blocks. Figure 2 (further) shows how the layout looks with the blocks and the grid turned on. In the settings, I turn off the display of these things by default, and make the buttons visible only to the administrator.
4. Toggle libraries (enable / disable libraries)
On this tab, you can enable or disable the necessary / unnecessary libraries. A library is the essence of the Omega framework and is not related to the Libraries API. Libraries are defined in a file
.infoand may consist of JS and CSS files. In the future, we will use them to connect Bootstrap.5. Toggle styles (enable / disable styles)
Similar to the previous tab, on this we can enable or disable CSS files that Omega uses, as well as standard Drupal styles. It is very convenient when we do not want the styles of any module to interfere with us.
6. Toggle advanced elements (enable / disable additional elements)
Well, on the last tab, we turn off all the standard Drupal elements that we cannot turn off in the general settings of the topic: messages, tabs, breadcrumbs, page title, RSS icon. We turn off the remaining elements in the settings common to all those topics, which are below the tabs and each topic has a logo, site name, slogan, main and additional menus.
Total
As a result, we got a pristine clean layout, which we will see by going to the main page.
Figure 2. The main page with disabled blocks and enabled grid and debugging blocks
In order to return the standard elements to the page (logo, page title, menu, messages, tabs, etc.), we will use the Delta Blocks module: in its settings, turn on the components we need , and already in the form of standard blocks we will place them on the page anywhere. It also saves us from editing the template
page.tpl.php, and allows us to place, enable and disable the necessary elements on the fly.We created our own fully customizable theme without editing the code for the files of the main templates, and even without connecting to the server via FTP / SSH. But now we want to add the power of Bootstrap to our theme. How to achieve this will be discussed in the second part of the article.
The second part, we connect Bootsrap