Drupal Theme system: getting started and advanced tutorial

Drupal's visual control is the most flexible and customizable, but this system is complex and not intuitive enough. In addition, some authors who are not fluent enough often write obscureDrupal topic advanced featuresAnd so on, the passion for Theme learning is completely broken down. This article will introduce the principles, distribution, and usage of Theme from a relatively simple perspective.

Working Principle

Drupal is still a PHP-based CMS. All the final technologies are completed through HTML, CSS, and PHP, and the layout and effects are mainly completed through HTML and CSS and collaboration. If you are not familiar with HTML and CSS, you should first learn these aspects. Especially now HTML5 and CSS3 are very mature and can display outstanding results conveniently and efficiently.
In addition, Drupal is a CMS, and an important feature of CMS is MVC development, which separates display from data and control. Drupal is doing well in this regard. It even makes the View part more detailed, including the specific display and layout of data, and even separates the overall display and layout, so that Theme is more focused on the overall display effect.
Drupal uses the PHPTemplate topic engine to combine these display technologies. This engine works in the Core of Drupal. When operating Drupal, changing the Core is a big taboo and should not be modified. Otherwise, not only will the system be unstable, it also destroys the adequacy of development and makes development a mess. What we need to do is to use a modular method and use some display technology to customize Drupal themes.

Implementation Overview

Drupal has many default themes.
In Drupal6, the default topic is generally Garland, which is a blue and common topic. In Drupal7, the default theme is changed to Bartik. I think this theme is indeed better than Garland. In addition, other themes such as seven and stark are installed by default.
Customization of themes can be simple and complex. Next, let's talk about the simplest small customization.

Simple Customization

Here we use the custom default theme Bartik as an example. The running environment is the original version of Drupal7.
Log on to the Management page and choose manage> appearance> Bartik settings.
Theme 1
The topic settings page is displayed.
Theme 2
Here, you can set the color of the webpage, change the logo, and change the favicon.
The specific operation will not be mentioned, which is simple enough. Without additional requirements, I think it is enough to use Bartik with simple color configuration and logo configuration.
In addition to colors and logos, the theme system also provides more configurations for common customization.
The theme system can switch the following functions:

• Site icon
• Site name
• Site slogan
• Show user profile picture in the article
• Author profile picture in comments
• User verification status information in comments
• Shortcut icon
• Main Menu
• Sub menu

Of course, if you do not customize the layout, you cannot modify the details (or modify the layout. These are all customized and can be used directly, which is simple and convenient.
If the requirement is simple, you can see it here. If you need more in-depth customization, continue to look down.

Topic storage path

There is a themes folder under the Drupal installation directory.
Path:

 

1

/themes

The folder generally has several default themes:
Theme 3
My folder has four themes: Bartik, garland, seven, and stark.
README.txt describes the content of this folder,
Engines is not a topic, but a PHPTemplate topic engine.
If you add a new topic to Drupal, it should not be placed in the default folder, but in

 

 

1	/sites/all/themes

Directory.
This can be distinguished from the core theme, but also be available to all sites. This is required if Drupal is used to support many sites.
The preceding two paths are displayed. However, if you are using a custom Drupal, it may be in another path. For example, if you useCommerce KickstartThe following path contains the default topic of Kickstart:

 

 

1	/profile/commerce_kickstart/themes

 

Directory structure

The following is an example of Drupal7. It may be different from Drupal6. If the times have been updated, it is still subject to Drupal7. Wait for drupal8.
Open a topic and see what follows. Take Barktik as an example:
Theme 4

• . Info -- the information file of the topic, which contains the necessary information of the topic. For example, the topic name, the version of the topic, and the core version of the topic.
• Color -- contains the files required for the Color module function in the topic Configuration Manager.
• Css -- contains the CSS file unique to the topic
• Images -- contains the image used by the Bartik topic
• Logo.png -- logo of the Bartik topic
• Screenshot.png -- Topic Preview
• Template. php -- template php
• Templates -- contains the template file of the Bartik topic

The following describes the template file.
A PHPTemplate-based topic contains one or more template files. Their extension is tpl. php.
The template file provides a layout framework for the page. Drupal has some default templates. When the topic does not contain the corresponding template file, the default template is used. Therefore, many template files are not required when some content does not need to be customized. Similarly, there are CSS files and many default CSS files in the system. When you customize CSS, the priority of this CSS file is higher than that of the kernel CSS.
In the topic template file, the core is page. tpl. php. It is one of the most critical files in a topic.
At the same time, in the cssfolder, the most core is style.css.
In Bartik, there is a file called teplate. php. This file seems to be the most important template, because it appears in the Bartik folder, and the name is very important. But in fact, Opening this file does not see a lot of div as expected, but some code. This file contains a lot of advanced code snippets and is used to rewrite theme functions. This file is not required for all topics.

Add topic

This part is relatively simple.
Click https://www.drupal.org/project/project_theme.
Copy the download link of a topic, and then open the Drupal Management page. You can directly obtain the download link from the URL when you choose appearance> install new topic.
Or, download it from the Internet to your local computer and decompress it to the folder mentioned above.

 

1	/sites/all/themes

Then open Drupal's administrator settings and set the appearance to find the topic. Enable is enabled first and set to default.
In addition to the official Drupal website, there are also many websites that provide Drupal themes. The topics of billing are generally more exquisite, and can also be considered in a niche manner.
Common websites include:

 

• Acquia.com
• Dream Template
• FusionDrupalThemes.com
• Theme Garden

Custom themes

Configuration Based on the options provided by the topic is limited after all. As you can see, Bartik is already a topic with many configuration options. You can also customize colors. Many theme configurations are poor, and many functions cannot be implemented through configuration.
At this time, you need to customize existing themes or create your own themes.
You can still create your own theme, because many things must be written from the beginning. I just want to add a function. It is not cost-effective to do so many things. Therefore, sub-themes are the best choice.
Why can't I directly modify it on the original topic. This is modular, for fear of chaos. As mentioned above, two folders are created to distinguish between core topics and custom topics.
There are a long series of steps below, which seem scary. Now we need to customize the Bartik topic. Follow these steps.

Custom CSS

CSS style sheets are the most commonly used webpage style configuration files. The simplest method is to modify CSS directly within the topic.

Original Drupal Bartik title
The above picture is the title and website slogan under our most common Bartik default topic. What if we think the title Font is too small and want to enlarge it? Right-click the webpage and check the elements (Safari development mode, Firefox, Chrome, and many other browsers have this mode ). This is the jump to the HTML source code window. Find the relevant code:

-*-*-*-*-*-*-*-*-*-*

This article is not over

For more information, click Connect To go to the original article: 5 Mark

Reprinted, please indicate the source, and attach the original text link. Thank you ~