Drupal + Omega + Bootstrap: the rapid creation of fully custom themes without layout (Part 1. Omega)
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 moving the layout sketch to life is only in setting the necessary styles in CSS. There are no additional restrictions, you can create themes of any complexity, and are fully customizable; and unless you come across the limitations of the platform itself (Drupal) or the chosen framework (Bootstrap).
My development experience under Drupal is more than 7 years old, started in 2005 with Drupal 4.6, 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 of creating and using a sabzhevy bundle. It is understood that you are familiar with Drupal, know how to install modules and create themes, but for some reason you are not using the Omega framework to develop your themes. The first part of the article is a simple tutorial on how to create and configure a subteme based on Omega. I also hope that the idea of this article will be of interest to users of alternative platforms, and will slightly advertise 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:
First, a couple of general words about the architecture of the Drupal themes engine, for those who are not familiar with it.
')
1. Actually engine
First, it is determined which theme engine will be used. From time immemorial, Drupal has used the standard PHP engine (PHPTemplate) as its engine, the templates of which are normal HTML files with PHP inserts of the form
2. Basic theme
The skin that defines all the basic styles, functions, and so on for future sub-topics. Your theme may not use any basic themes, may be written from scratch, or itself be a base for other topics.
3. Sub-topic
It inherits all functions, styles, etc. from the base theme and can override them. The subtem can also be specified as a baseline, and so on to infinity.
This is a very flexible system that can be used, for example, for minor modifications of the main theme of the site (for example, to decorate it for the New Year - we create a sub-topic that hangs for a while, then turn it off, turn it on after a year, and so on). Well, this architecture also allows you to create, use and extend frameworks such as Omega or AdaptiveTheme.
To start, download and install the basic theme and modules listed at the beginning of the article. Next, go to the ppearance section and, if the Omega Tools module is correctly installed, see the Create new Omega subtheme link on the page (if the module is installed, but there is no such link, try clearing the cache). Follow the link and set the parameters of the new theme:
Figure 1. Creating a subtext using the Omega Tools module
Click the Save and continue button, followed by 2 simple steps of the wizard, where you can set additional parameters for the theme, enable it immediately after installation, or edit the
Next comes the fun part.
Go to 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 basic screen resolutions (800, 1024, 1280), or Fluid - stretching across the entire width of the screen. Users of frameworks like Bootstrap know the difference between them. Also on this tab, you can fine-tune
The following CSS is connected to the theme via
All the main work on setting up the layout of the site will be held in this tab. Actually, this is the main feature of the Omega framework - setting the location of Drupal regions to place Drupal blocks not by editing the
Now a few words about how to use it. At first glance, everything looks a bit confusing, but once it is sorted out, everything becomes simple further. Omega introduces in addition to the standard entity of the region in Drupal two more: section and zone. The sections unite zones, and the regions already familiar to us are included in the zones. There are three sections in total: Header (header), Content (content) and Footer (footer), you cannot redefine them (although there is no need for this, since these are rather abstract entities). Within these sections, you can arbitrarily place zones with regions.
Each zone has settings, the main of which are: Section (section that owns the zone), Weight (weight, determining the order of zones in the section), Column count (the number of columns for each section can be set, 12, 16 options are available) and 24), Primary Region (primary 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 Sidebar First (Left column) and Sidebar Second (Right column) regions, then the Region of Content is 12 columns wide. And if blocks appear on the inner pages in the left column, the region with the contents will occupy 9 columns in width. Well, if the blocks are present in both columns, the width of the contents will be equal to the specified number of columns - 6. This will happen if the main region is set in the zone, and if not, then there can be any number of any width, all regions will have the specified width, empty regions (without blocks or with hidden blocks) will not be displayed.
Then the regions belonging to it are listed in the zone, the regions themselves have the same settings as zones: Zone (parent zone), Prefix (number of columns to shift, similar to the classes offset * in Bootstrap), Width (width, number of columns), Suffix (number of columns for indentation after region), Weight (weight).
Changing all these parameters, you can customize the location of the blocks in the layout as you please. Regions can be redefined in a 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, a 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 work: it adds 2 buttons that allow you to enable (by default, disable) the grid overlay and auxiliary blocks. Figure 2 (below) shows what the layout looks like with the blocks and grid turned on. In the settings, I disable the display of these things by default, and I make the buttons visible only to the administrator.
On this tab, you can enable or disable the necessary / unnecessary libraries. The library is the essence of the Omega framework and is not related to the Libraries API. Libraries are defined in a
Similar to the previous tab, on this we can enable or disable the CSS files that Omega uses, as well as the 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 disable all standard Drupal elements that we cannot disable in the general settings of the theme: messages, tabs, bread crumbs, page title, RSS icon. The remaining elements are disabled in the general for all those settings that are below the tabs and have each theme: logo, site name, slogan, main and secondary menu.
As a result, we got a pristine clean layout, which we will see by going to the main page.
Figure 2. Main page with disabled blocks and enabled grid and debug blocks
In order to return the standard elements to the page (logo, page title, menus, messages, tabs, etc.), we will use the Delta Blocks module: in its settings we will turn on the components we need and place them on the page anywhere in the form of standard blocks . It also saves us from editing the
We created our own fully customizable design theme without editing the code of the files of the main templates, and even without connecting to the server via FTP / SSH. But now we want to add the full 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 under Drupal is more than 7 years old, started in 2005 with Drupal 4.6, 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 of creating and using a sabzhevy bundle. It is understood that you are familiar with Drupal, know how to install modules and create themes, but for some reason you are not using the Omega framework to develop your themes. The first part of the article is a simple tutorial on how to create and configure a subteme based on Omega. I also hope that the idea of this article will be of interest to users of alternative platforms, and will slightly advertise 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 - the basic theme for Drupal 7, a framework for creating your own themes;
- Omega Tools - toolkit (module) for simple creation of sub-threads on the basis of Omega through the admin area;
- Delta - from this set we need the Delta Blocks module to replace the standard block design components;
- Block Class is a simple module for adding blocks of CSS classes we need (useful for Bootstrap).
Architecture
First, a couple of general words about the architecture of the Drupal themes engine, for those who are not familiar with it.
')
1. Actually engine
First, it is determined which theme engine will be used. From time immemorial, Drupal has used the standard PHP engine (PHPTemplate) as its engine, the templates of which are normal HTML files with PHP inserts of the form
<?php print $title ?> . As it seems to me, this is convenient, since there is no need to learn the additional syntax of the design engine, and you can also insert any code without any restrictions. Also, Drupal allows you to use any themes engine, for example Smarty, but for a long time no one has been in a hurry to fasten them (for the same Smarty there is a version for Drupal 6, and for 7 it's gone - probably, nobody needs it).2. Basic theme
The skin that defines all the basic styles, functions, and so on for future sub-topics. Your theme may not use any basic themes, may be written from scratch, or itself be a base for other topics.
3. Sub-topic
It inherits all functions, styles, etc. from the base theme and can override them. The subtem can also be specified as a baseline, and so on to infinity.
This is a very flexible system that can be used, for example, for minor modifications of the main theme of the site (for example, to decorate it for the New Year - we create a sub-topic that hangs for a while, then turn it off, turn it on after a year, and so on). Well, this architecture also allows you to create, use and extend frameworks such as Omega or AdaptiveTheme.
Creating a subteme based on Omega
To start, download and install the basic theme and modules listed at the beginning of the article. Next, go to the ppearance section and, if the Omega Tools module is correctly installed, see the Create new Omega subtheme link on the page (if the module is installed, but there is no such link, try clearing the cache). Follow the link and set the parameters of the new theme:
- Name , for example,
Omega Example Theme; - Machine-readable name , for example,
omega_example; - Check Install automatically ;
- select Destination (destination) - the directory with the configuration of the site we need or
sites/all, if we want the theme to be accessible to all sites in a multisite installation (the web server must have write access to this directory to perform an unattended installation); - as the Base theme (base theme) choose
Omega; - as the starterkit (starter kit) choose
Omega HTML5 Starterkit.
Figure 1. Creating a subtext using the Omega Tools module
Click the Save and continue button, followed by 2 simple steps of the wizard, where you can set additional parameters for the theme, enable it immediately after installation, or edit the
.info file. 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 the default.Next comes the fun part.
Layout Customization
Go to 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 basic screen resolutions (800, 1024, 1280), or Fluid - stretching across the entire width of the screen. Users of frameworks like Bootstrap know the difference between them. Also on this tab, you can fine-tune
@media under the desired width. Well, for most projects on this tab, everything can be left by default.The following CSS is connected to the theme via
@media :- global.css - the main style file that connects globally on all screens, including mobile, realizing the concept of mobile-first;
- omega-example-alpha-default.css - the main style file for use with the grid
- omega-example-alpha-default-narrow.css - file for screens about 800 pixels wide
- 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 more than 1200 pixels wide
2. Zone and region configuration (configuration of zones and regions)
All the main work on setting up the layout of the site will be held in this tab. Actually, this is the main feature of the Omega framework - setting the location of Drupal regions to place Drupal blocks not by editing the
page.tpl.php template 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.php or page.tpl.php , and others. This is the functionality indicated in the beginning of the article, which eliminates the HTML layout of the layout. You can focus directly on the CSS and the code on the output templates you need, node.tpl.php , for example. And the width or location of the left / right columns, the main content of the page or blocks in the basement 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 it is sorted out, everything becomes simple further. Omega introduces in addition to the standard entity of the region in Drupal two more: section and zone. The sections unite zones, and the regions already familiar to us are included in the zones. There are three sections in total: Header (header), Content (content) and Footer (footer), you cannot redefine them (although there is no need for this, since these are rather abstract entities). Within these sections, you can arbitrarily place zones with regions.
Each zone has settings, the main of which are: Section (section that owns the zone), Weight (weight, determining the order of zones in the section), Column count (the number of columns for each section can be set, 12, 16 options are available) and 24), Primary Region (primary 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 Sidebar First (Left column) and Sidebar Second (Right column) regions, then the Region of Content is 12 columns wide. And if blocks appear on the inner pages in the left column, the region with the contents will occupy 9 columns in width. Well, if the blocks are present in both columns, the width of the contents will be equal to the specified number of columns - 6. This will happen if the main region is set in the zone, and if not, then there can be any number of any width, all regions will have the specified width, empty regions (without blocks or with hidden blocks) will not be displayed.
Then the regions belonging to it are listed in the zone, the regions themselves have the same settings as zones: Zone (parent zone), Prefix (number of columns to shift, similar to the classes offset * in Bootstrap), Width (width, number of columns), Suffix (number of columns for indentation after region), Weight (weight).
Changing all these parameters, you can customize the location of the blocks in the layout as you please. Regions can be redefined in a standard way for Drupal - in the topic description file
.info , zones are also 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, a 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 work: it adds 2 buttons that allow you to enable (by default, disable) the grid overlay and auxiliary blocks. Figure 2 (below) shows what the layout looks like with the blocks and grid turned on. In the settings, I disable the display of these things by default, and I 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. The library is the essence of the Omega framework and is not related to the Libraries API. Libraries are defined in a
.info file and 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 the CSS files that Omega uses, as well as the 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 disable all standard Drupal elements that we cannot disable in the general settings of the theme: messages, tabs, bread crumbs, page title, RSS icon. The remaining elements are disabled in the general for all those settings that are below the tabs and have each theme: logo, site name, slogan, main and secondary menu.
Total
As a result, we got a pristine clean layout, which we will see by going to the main page.
Figure 2. Main page with disabled blocks and enabled grid and debug blocks
In order to return the standard elements to the page (logo, page title, menus, messages, tabs, etc.), we will use the Delta Blocks module: in its settings we will turn on the components we need and place them on the page anywhere in the form of standard blocks . It also saves us from editing the
page.tpl.php template, and allows us to place, enable and disable the necessary elements on the fly.We created our own fully customizable design theme without editing the code of the files of the main templates, and even without connecting to the server via FTP / SSH. But now we want to add the full 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
Source: https://habr.com/ru/post/172213/
All Articles