1. Enable Clean URLsThis article assumes Clean URLs are setup on the site. These can be enabled by selecting Administer -> Site Configuration -> Clean URLs from the Drupal side bar menu. The enable option will be blanked out until a test has been run. To run the test click Run the clean URL test: this will ensure Apache has mod_rewrite enabled: something the reader doesn’t need to understand, unless the test fails! If the test does fail, ensure there is a file named .htaccess in the directory where Drupal is installed. If that file is where it should be contact the hosting company, check whether they have mod_rewrite enabled. Alternatively post a question on mod_rewrite to our webmaster forums.The video is in Flash format; as this is a non-Free, and patent enclubered, format not all surfers are able to view it. For these users an OGG video is available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
2. Enable the Path ModuleThe Path Module must be enabled next. This allows pages created in Drupal to have URLs of the authors choosing, e.g. http://www.example.com/newpage where newpage is chosen by the author. Like all modules, this is enabled via Administer -> Site Building -> Modules from the Drupal side bar menu. Under the group Core – optional search for Path. Check the box next to it and Save configuration to save the changes.As before, this video is in Flash format. An OGG video alternative is also available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
3. Create a new PageIn this step a static page to hold the login block is created. Select Create Content -> Page from the Drupal side bar menu. Enter ‘Login’ as the title; optionally any text to appear on the page can be added to the Body text field. Expand the URL path settings, enter ‘login’ into the text box. Also expand the Publishing options, ensure Published is set but Promoted to front page is not. Finally click submit to save the changes (alternatively clicking preview shows how the page will look without saving it).As before, this video is in Flash format. An OGG video alternative is also available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
4. Move the Login Block to newly Created PageAs the new page has been created the Login block may be moved to it. The block administration page can be found under Administer -> Site building-> Blocks. To move the login block to the page created in the previous step find User login in the list of blocks, then click configure.Under Page specific visibility settings select the Show on only the listed pages option, then enter ‘login’ into the Pages text box. ‘login’ is the name of the page where the block should be displayed; more than one page can be listed by pressing return between page names (see the instructions on the block configuration page, underneath the Pages text box for details). Click Save block to complete the changes.When the block is saved Drupal returns to the block listing page, finally the block should be moved from the side bar to the content area of the page. Under Region in the block list are a column of drop-down menus: using the drop-down for User login select Content, then click Save blocks. The login block should have successfully been moved, all that remains is to test the changes: particularly important as hiding the login block would be disastrous!As before, this video is in Flash format. An OGG video alternative is also available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
5. Test the ChangesImportant: use a different browser for testing! Ensure at least one browser is logged in to Drupal as an administrator in case the setup is incorrect!If a different browser is used for testing, e.g. Opera is logged in as Administrator then use Firefox for testing, it will still be possible to correct any mistakes. The block will not appear for browsers that are logged in, so testing must be conducted using a browser which is not. To test enter the site URL followed by ‘login’, e.g. http://www.example.com/loginAs before, this video is in Flash format. An OGG video alternative is also available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.

Conclusion

This tutorial only covers moving the login block to its own page, also having a link to the page may also be desirable (amongst other things the reader can probably think of). This can be done by writing a link to /login manually or adding a new menu item (either via editing the login page or through the menu editor Administer -> Site building -> Menus). Unfortunately not everything can be covered in this article. Suggestions for future articles, corrections and comments for this article should be posted at: Webmaster Forums: Moving the Login Block to a Seperate Page in Drupal.

The Color module is standard, you don’t need to download it, just turn it on in the list of modules if it’s off.

Why is it called Color Handling? This module also supports slicing png files, creating gradients on them, as well as the ability to create a preview of what is done, I will just look at the basic work with changing colors.

Preparing

So, from introduction to business. For this guide we will need the Color module (from the kernel) as well as some sort of design theme. I made a very simple theme, you can use it or you can make your own, there is no difference.

Create basic files

• Step 1 – In the theme folder create a folder named “color”. If you use the theme from the guide, then it goes like this: sites/all/themes/color_theme/color.
• Step 2 – create, in the newly created color folder, an empty file named “color.inc”.
• Step 3 – in the same folder (color) add a file called “base.png”. It does not matter what it will be, just a file with that name is mandatory, and necessarily a picture.
• Step 4 – create, all in the same folder, a styles file named “color.css”.

The result should be as follows.

Integrate with the theme.

It’s time to add functionality to the theme. Let’s start by customizing the “color.inc”.

• Step 1 – first add the basic settings of the module. This contains all the variables for colors that you will be able to change. The file starts with <?php, but doesn’t close!

// An array with all the settings.
$info = array();

// Declare all color variables.
// Each variable is a field for choosing a color.
// Have the form: // 'key' => 'label'.
// You can use the t() function.
$info['fields'] = array(
    'bg' => 'Site background',
    'page_bg' => 'Page background',
    'link_color' => 'Link color',
    'menu_bg_color' => 'Background color of menu items',
    'menu_link_color' => 'Menu item link color',
);

• Step 2 – we’ll create some base color schemes.

// Declare base color schemes (pre-defined).
$info['schemes'] = array(
//declare a mandatory scheme, which will be used by default, and
// which will be used as the default one // by the Color module.
'default' => array(
//name of the color scheme. Will be displayed in the list of all schemes.
'title' => 'Default color scheme',
// Set colors for each key ($info['fields']).
// I take all the default values from CSS.
// The color must be in HEX format, starting with a grid and be in lower
// case.
'colors' => array(
'bg' => '#f1f1f1',
'page_bg' => '#ffffffff',
'link_color' => '#2158ce',
'menu_bg_color' => '#ecececec',
'menu_link_color' => '#000000',
),
),
//Add another color scheme but with the colors we need.
'example' => array(
'title' => 'Example extra scheme',
// Make it completely white.
'colors' => array(
'bg' => '#ffffffff',
'page_bg' => '#ffffffff',
'link_color' => '#ffffffff',
'menu_bg_color' => '#ffffffff',
'menu_link_color' => '#ffffffff',
),
),
);

• Step 3 – connect color.css.

First of all let’s specify that this file will be used by the Color module. To do this, add the following in the same file color.inc:

// The path is relative to the theme's root.
$info['css'] = array('color/color.css');

Next we need to connect color.css to the theme so that it is loaded with the page. To do this, add a line in the color_theme.info file with the style connection.

; Styles
stylesheets[all][] = css/style.css
stylesheets[all][] = color/color.css

It’s important that color.css is plugged in somewhere at the end. Because if we include it before style, nothing will work. Who doesn’t understand what the trick is, google CSS priority.

• Step 4 – we need to add all the elements, classes, identifiers in color.css that will change. The values must be as in “default”. The principle is simple. It takes the first color from the default – it is #f1f1f1, then opens the file color.css, looking for it there and replacing it with what is specified in this field now (the color). I.e. if you have matching colors, but they must be different afterwards, you will have to change the color a bit, for example #f1f1ff2.

/* bg */
body {
background: #f1f1f1f1;
}

/* bg */
body {
background: #f1f1f1f1;
}
/* link_color */
a {
  color: #2158ce;
}

/* page_bg */
#page-wrapper {
    background: #ffffffff; 
}

/* menu_bg_color && menu_link_color */
#navigation ul.menu li a {
  background: #ececec; 
  color: #000000;
}

• Step 5 – add the settings to our theme. The code is added to the theme’s template.php

/**
* Use template_preprocess_html().
*/
function color_theme_process_html(&$variables) {
if (module_exists('color')) {
_color_html_alter($variables);
}
}
/**
 * Use template_process_page().
 */
function color_theme_process_page(&$variables, $hook) {
 if (module_exists('color')) {
 _color_page_alter($variables);
 }
}

• Step 6 – To avoid a bunch of errors, we need to specify default values for features that we don’t use. To do this, go back to color.inc and add the following lines:

/**
 * The settings below are empty. The color module needs them even if we don't
 * use them in our theme.
 */

// The path is specified relative to the theme root.
$info['css'] = array('color/color.css');

// Files to copy. (color.css is copied automatically)
$info['copy'] = array();

// files to be used in the preview.
$info['preview_css'] = 'color/preview.css';
$info['preview_js'] = 'color/preview.js';
$info['preview_html'] = 'color/preview.html';

//declaration of gradients.
$info['gradients'] = array();

// Coordinates for filling.
$info['fill'] = array();

// Coordinates for slicing the image.
$info['slices'] = array();

// base picture.
$info['base_image'] = 'color/base.png';

That’s it. Now reset the site cache, and then go into the theme settings. You will see the color settings section.

If you want to set the colors yourself, don’t forget to select in Color set: Custom.

Then save the settings and see the result.

P.s. If you get berrores about preview.html or preview.js, just create files with those names in the color folder.

The statistics are useful in determining how users are visiting and navigating your site. It provides a customisable “Popular content” block that can be added to your theme.

Use

Configuring statistics

In Drupal 9, configure statistics via Configuration > System > Statistics.

To enable collection of statistics, check the Count content views checkbox on the Statistics settings page.

Display popular content

The module includes a Popular content block that displays the most viewed pages today and for all time, and the last content viewed. To use the block:

1. Enable Count content views on the statistics settings page (Configuration > System > Statistics)
2. Add the Popular Content block from the Block Layout page (Structure > Block Layout)
3. Configure how many results to show for each statistics list.
4. Choose which roles to show the statistics to

Page view counter

The Statistics module includes a counter for each page that increases whenever the page is viewed. To use the counter, enable Count content views on the statistics settings page, and set the necessary permissions (View content hits) so that the counter is visible to the users.

User login what?

The default user login block in Drupal 7, shown here in the Bartik theme. Our statistics show the Create new account link is the method most people use to get to the site’s registration form.

Since this link is both hard to spot and a small target for the user to click with their mouse, Drupal is making it harder to sign-up. This small text link should be changed into an obvious call to action.

Register link one: button

A Bartik sub-theme was used to create this, changing the login block in any theme should be possible although the files may be in slightly different locations.

Start by opening the theme’s template.php (or creating one if it does not exist), scroll to the bottom and add the following:

<?php
/**
* Implements hook_form_FORM_ID_alter().
*/
function THEMENAME_form_user_login_block_alter(&$form) {
  // Remove the links provided by Drupal.
  unset($form['links']);

  // Set a weight for form actions so other elements can be placed
  // beneath them.
  $form['actions']['#weight'] = 5;

  // Shorter, inline request new password link.
  $form['actions']['request_password'] = array(
    '#markup' => l(t('Lost password'), 'user/password', array('attributes' => array('title' => t('Request new password via e-mail.')))),
  ); 

  // New sign up link, with 'cuter' text.
  if (variable_get('user_register', USER_REGISTER_VISITORS_ADMINISTRATIVE_APPROVAL)) {
    $form['signup'] = array(
      '#markup' => l(t('Register - it’s free!'), 'user/register', array('attributes' => array('class' => 'button', 'id' => 'create-new-account', 'title' => t('Create a new user account.')))),
      '#weight' => 10,
    ); 
  }
}
?>

Change the THEMENAME in the above code to the name of the theme being edited.In css/style.css, add the following to the bottom of the file:

#block-user-login .form-actions {
  margin-top: 0;
  padding-top: 0;
}
#block-user-login #create-new-account {
  background-position-y: bottom;
  color: #fff;
  display: block;
  font-size: 1em;
  margin: 0 auto;
}    
#block-user-login a#create-new-account:hover {
  text-decoration: underline;
}

The end result

This is the login block after the template and CSS code is applied to the Bartik sub-theme. The registration link is far more prominent, making it easier for users to locate and (hopefully) leading to more registrations.

Register link two: icon and text

As before, this assumes a Bartik sub-theme is being used, this icon image should also be uploaded to into the images directory in the theme folder.

Start by opening the theme’s template.php, scroll to the bottom and add the following:

<?php
/**
* Implements hook_form_FORM_ID_alter().
*/
function THEMENAME_form_user_login_block_alter(&$form) {
  // Remove the links provided by Drupal.
  unset($form['links']);
 
  // Set a weight for form actions so other elements can be placed
  // beneath them.
  $form['actions']['#weight'] = 5;
 
  // Shorter, inline request new password link.
  $form['actions']['request_password'] = array(
    '#markup' => l(t('Lost password'), 'user/password', array('attributes' => array('title' => t('Request new password via e-mail.')))),
  );
 
  // New sign up link, with 'cuter' text.
  if (variable_get('user_register', USER_REGISTER_VISITORS_ADMINISTRATIVE_APPROVAL)) {
    $form['signup'] = array(
      '#markup' => l(t('Register - it’s free!'), 'user/register', array('attributes' => array('id' => 'create-new-account', 'title' => t('Create a new user account.')))),
      '#weight' => 10,
    );
  }
}
?>

Change the THEMENAME in the above code to the name of the theme being edited.In css/style.css, add the following to the bottom of the file:

#block-user-login .form-actions {
  margin-top: 0;
  padding-top: 0;
}
#block-user-login #create-new-account {
  background: transparent url('../images/bartik-new-user.png') top left no-repeat;
  display: block;
  font-size: 1.1em;
  line-height: 37px;
  margin: 0 auto;
  padding-left: 38px;
}    
#block-user-login a#create-new-account:hover {
  text-decoration: underline;
}

If the code for the first register link type is in the theme’s template.php and css/style.css, make sure it is deleted.

The end result

This is the login block after the template and CSS code is applied to the Bartik sub-theme. The registration link is made more obvious by increasing its font size and adding an explanatory icon.

Make further changes to the login form

Notice how the code copied into the template.php file alters the structure of the login block form. This function is known as a hook and is called when Drupal is building the form, passing the structure of the form through to function in the &$form variable. Importantly, this variable is passed by-reference so any changes made to it, within the function, are kept.

To make further changes to way the form is laid out it is necessary to find the contents of $form, before writing code to alter it (like the code copied to template.php).

There are several ways to do this, one that works well for the author (and doesn’t require the Devel module):

<?php
drupal_set_message('<pre>' . check_plain(var_export($PHP_VARIABLE, TRUE)) . '</pre>');
?>

To get the structure of the form passed to the form alter hook, this could be added to the template.php function as follows:

<?php
/**
* Implements hook_form_FORM_ID_alter().
*/
function THEMENAME_form_user_login_block_alter(&$form) {
  drupal_set_message('<pre>' . check_plain(var_export($form, TRUE)) . '</pre>');

  // ... code for altering form ...
}
?>

Then, every time the form is built, a dump of the array representing its structure will be printed in a Drupal message. The message will look similar to the following:

array (
  '#action' => '/node?destination=node',
  '#id' => 'user-login-form',
  '#validate' =>
  array (
    0 => 'user_login_name_validate',
    1 => 'user_login_authenticate_validate',
    2 => 'user_login_final_validate',
  ),
  '#submit' =>
  array (
    0 => 'user_login_submit',
  ),
  'name' =>
  array (
    '#type' => 'textfield',
    '#title' => 'Username',
    '#maxlength' => 60,
    '#size' => 15,
    '#required' => true,
  ),
  'pass' =>
  array (
    '#type' => 'password',
    '#title' => 'Password',
    '#maxlength' => 60,
    '#size' => 15,
    '#required' => true,
  ),
  'actions' =>
  array (
    '#type' => 'actions',
    'submit' =>
    array (
      '#type' => 'submit',
      '#value' => 'Log in',
    ),
  ),
  'links' =>
  array (
    '#markup' => '<div class="item-list"><ul><li class="first"><a href="/user/register" title="Create a new user account.">Create new account</a></li>
<li class="last"><a href="/user/password" title="Request new password via e-mail.">Request new password</a></li>
</ul></div>',
  ),
  '#form_id' => 'user_login_block',
  '#type' => 'form',
  '#build_id' => 'form-tiTIWFywr67J8eTtcMnmJIEbpjx9pIW1I0ZozyRcWvM',
  'form_build_id' =>
  array (
    '#type' => 'hidden',
    '#value' => 'form-tiTIWFywr67J8eTtcMnmJIEbpjx9pIW1I0ZozyRcWvM',
    '#id' => 'form-tiTIWFywr67J8eTtcMnmJIEbpjx9pIW1I0ZozyRcWvM',
    '#name' => 'form_build_id',
  ),
  'form_id' =>
  array (
    '#type' => 'hidden',
    '#value' => 'user_login_block',
    '#id' => 'edit-user-login-block',
  ),
  '#method' => 'post',
  '#theme_wrappers' =>
  array (
    0 => 'form',
  ),
  '#tree' => false,
  '#parents' =>
  array (
  ),
  '#theme' =>
  array (
    0 => 'user_login_block',
  ),
)

That’s it! Good luck with your login block theme.

This does not mean that you have to learn all of Drupal from beginning to end just to make your theme. These chapters will cover issues related to working with design, and you can learn only the ones you need. Some documents are designed for technically trained users, others are general in nature, but you will need knowledge to understand most things:

• HTML and CSS
• JavaScript and jQuery (if you are going to make a theme that supports those scripts)
• PHP (this is not necessary, but in many situations knowing PHP will help you better understand what you are talking about)
• Drupal terminology

Try to adhere to coding standards when developing a theme – this will keep the code of the theme clean. Before creating a theme, you need to imagine the goals and capabilities of the site for which you are making the theme. Knowing certain requirements is much easier to develop a new theme than designing one based on general notions.

How do I create a theme?

To make your theme appear in the admin panel and become available for connection, simply create a folder with its name in the directory (recall that custom themes should be in your_sites/sites/all/themes) and put a file with the extension .info in it.

This is the required minimum. In addition to it, the theme must include:

• template.php – the file in which the php code will be inserted to expand the capabilities of the topic (to add non-standard templates, change the code of individual elements, for example breadcrumbs)
• Templates tpl.php – files in which we actually work with the code of the pages and their individual elements. It is in them that will happen tematization
• css and js files – normal files with scripts and design

In general, this minimum is enough for theming almost any site. Next, let’s examine the contents, the purpose of the files, and the structure of the theme in more detail.

File .info

Syntax

Its name must exactly match the name of the folder in which it is located, because this is the system name of the theme.

You can use lowercase English letters and twitch marks in his name.

For example, I will create a theme called mytheme. It will look like this:

Content

In the minimum configuration its contents will look as follows:

name = My Theme
description = Special theme for the site. By Vaden Pro /
version = VERSION
core = 7.x
 
; ---------STYLESHEETS---------
stylesheets[all][] = css/style.css
 
 
; ---------REGIONS---------
regions[header] = Header
regions[sidebar_left] = Sidebar left
regions[content] = Content
regions[footer] = Footer
 
; Information added by Drupal.org packaging script on 2015-10-15
project = "drupal" 

This means the following:

• name – the name of your theme, which will be displayed in the Drupal admin panel
• description – description, which will also be displayed in the administrative panel
• version – version of the theme is displayed next to its name, if you write here VERSION, it will match the current version of the engine, if you write your own value (for example 7.X-1.1) it will be displayed.
• core – as name is a mandatory parameter, it indicates for which version of Drupal created our theme.
• ;something is – comment syntax in info file, semicolon at the beginning of the line
• stylesheets[all][] = css/style.css – include css files into theme (more about include js and css files into theme’s template)
• scripts[] = js/scripts.js – include js files in the same way, if necessary
• regions[header] = Header -create the key areas of our theme. See below for a more detailed description.
• project – says what platform the theme is created for

A couple of words about creating regions for a theme. Suppose we have a typical site with the following structure:

Accordingly, we want to be able to display blocks of the site in these regions, this line in the file .info:

regions[header] = Header

This is how they are created. If you look at our example, after enabling our default theme, the following blocks will be available to us in the theme:

In addition to the above minimum, you can still add to the info file:

• screenshot – allows you to set a preview of the theme for the admin panel, just specify the path to the picture: screenshot = screenshot. png
• features – allows you to add additional features to the theme settings, allowing you to override the global theme settings, they include the following:

features[] = logo
features[] = favicon
features [] = name 
features [] = slogan 
features [] = node_user_picture 
features [] = comment_user_picture 
features [] = comment_user_verification 
features [] = mainjnenu 
features [] = secondary_menu

• php – if a specific version of php should be used in the project, it can also be specified directly, for example: php = 5.3
• settings – allows you to specify additional settings for the theme, more about this we will talk in a course on professional temizatsii Drupal, now just enough to know that there is such.

Templates .tpl.php

Also to work with the theme we minimally need to configure a template page, the remaining files tpl.php connect in the course of further theme site, described in the following lessons.

For ease of future work, create a folder templates inside our theme, which will store all our files tpl.php.

html.tpl.php

Suppose we want to make a site using html 5, which means we need to override the standard Drupal !DOCTYPE (more about html page structure). To do this, we need to connect an appropriate template.

You can simply create a file with this name in our folder and set the encoding to UTF-8 without BOM, but it is better to take the source code from the core, to do this, go to the root of the site modules/system, there find and copy the file html.tpl.php, then paste it into the appropriate folder of our topic, open it and make the necessary changes:

The code to which we replace the opening html tag and !DOCTYPE to connect html5:

<!DOCTYPE HTML>
<html lang="ru-RU">

It is also in this template we get access to the head tag of the entire site. For example, if we need to add a bunch of social media buttons to the pages of the site, it is here we can add their code to the head tag.

page.tpl.php

Similarly to the previous template can be copied from modules/system/page.tpl.php, or you can just copy and rename the template html.tpl.php, because unlike html in page we will already do the first layout of our page, which means we better write the code by hand (a couple of words on how to create the structure of the page in html 5):

<?php if ($page['header']): ?>
  <header>
      <?php print render($page['header']); ?>
  </header>
<?php endif; ?>
 
<?php if ($page['sidebar_left']): ?>
  <aside class="leftSidebar">
      <?php print render($page['sidebar_left']); ?>
  </aside>
<?php endif; ?>
 
<section class="mainContent">
 
    <?php if ($messages): ?>
      <div id="messages">
          <div class="section clearfix">
              <?php print $messages; ?>
          </div>
      </div>
    <?php endif; ?>
 
    <?php if ($tabs): ?>
      <div class="tabs">
          <?php print render($tabs); ?>
      </div>
    <?php endif; ?>
 
    <?php if ($breadcrumb): ?>
      <div id="breadcrumb"><?php print $breadcrumb; ?></div>
    <?php endif; ?>
 
    <?php print render($page['content']); ?>
 
</section>
 
 
<?php if ($page['footer']): ?>
  <footer>
      <?php print render($page['footer']); ?>
  </footer>
<?php endif; ?>

Let’s break down the code in a little more detail:

In order to display a specific region of the theme in the page template, a string is used:

<?php print render($page['header']); ?>

As you can guess [‘header’] is simply taken from the .info file, I remind you that the region is defined as [‘header’] in it (note that in the page template we add [‘header’] in [header]):

regions[header] = Header

Similarly, output all the other regions.

Next, add the desired wrap to it (if we want all the blocks from the header region to be in the tag <header></header>, that’s the tag to add).

And put a check in php, so that if we have no content in a particular region (as now, when the topic is just created and all the blocks in it are disabled):

<?php if ($page['header']): ?>
...
<?php endif; ?>

We’ve already figured out where we take the condition from, everything inside this tag will not be rendered on the page if there are no blocks in the [‘header’] region. So we got the result:

<?php if ($page['header']): ?>
  <header>
      <?php print render($page['header']); ?>
  </header>
<?php endif; ?>

We did this with all the regions in the example and added it to the page output:

<?php if ($breadcrumb): ?>
 <div id="breadcrumb"><?php print $breadcrumb; ?></div>
 <?php endif; ?>

<?php if ($messages): ?> 
<div id="messages"> 
<div class="section clearfix"> 
<?php print $messages; ?> 
</div> 
</div> 
<?php endif; ?>

<?php if ($tabs): ?> 
<div class="tabs"> 
<?php print render($tabs); ?> 
</div> 
<?php endif; ?>

So, congratulations, we have already created the skeleton of our new theme. For someone this may even be enough, because by placing in their own arbitrary regions with the desired markup Drupal blocks we can already operate quite flexibly with the structure of the page.

template.php

Also a must-have file. Copy any of our already created files tpl.php, delete code from it, rename it and put this file in the root of the theme. Open it, put an open tag <?php in the beginning of the file (because it will contain only php code) and first let’s add the code that removes the system link to drupal.org from the page output. Now the contents of template.php looks like this:

<?php
 
//Remove automatic generation of a link to a Drupal site in the theme:
function mytheme_html_head_alter(&$head_elements) {
  unset($head_elements['system_meta_generator']);
}

style.css

As we remember, we also plugged the css file from the .info file into the theme:

stylesheets[all][] = css/style.css

And so we just create a folder css and put our file style.css.

To summarize

This is where the creation of the skeleton of our future theme can be considered complete. Next we will work on the design of specific individual parts of the site.

For convenience, let’s add empty folders to our theme at once:

• js – Here we will put script files if necessary
• img – for pictures
• views – for tpl.php files, which will be used to topicize the preconceptions (to avoid confusion it is better to separate them from the usual tpl templates)

Getting Started with Views

The point of the module is simple – it displays data in the form we need, the output can be customized according to many parameters, and various transformations. First, the module should be downloaded and installed (this was discussed in the previous lessons). It is necessary to activate 2 modules (they are in the archive Views) Views and Views UI, the first gets the lists from the base, and the second is a visual shell, through which Views are created.

After activation, the menu “Administer → Site building” will have a tab Views. Going in.

Here we see the views that are already created by default, there may be more depending on the modules installed. These views are inactive, you can turn them on with the link “Enable”, and use them for your own purposes. But, !!!WE!! as true “Jedi” will try to make our own (even if it will be small, unsightly and not working). Click on the button “Add”.
The first menu of view creation view.

There are two mandatory fields:

• the title (the name of the view, enter English letters in lowercase),
• and the view type (View type – this is where we will take the information for the output).

Let’s write in the title first (after all it is our first-born, right?), and the type of view put “Material” (Node), we will display the materials. Press “Next“, and we get to the page where we will set output parameters, initially it looks terrible, but this is only the first time.

Here you can create several displays (the most common are block and page). One display already exists – default, if you want to create several similar displays, you can specify the basic settings in default, the created displays will inherit these settings. If you want the display settings to be different from the default settings, you need to reassign them, for this use the Override button.

Let’s add a block.

Consider the Fields block, it is one of the main blocks, because it is where we choose which fields (Fields) will be displayed in our view.

On the block you see two buttons, the first is used to add a field, the second is used to set the fields in the order you want.
When you click on add field button, you will see fields that can be added at the bottom, and a dropdown sorting list. If we want to add headers to the output, we need to select Node: title, and click Add.

The Configure field menu will appear, where we can set the Name of the field with which it will be displayed and check the checkboxes:

• Exclude from display: load the field, but do not display it.
• Rewrite the output of this field: replace the output of this field with its own text.
• Output this field as a link: The output text can be turned into a link.
• Trim this field to a maximum length: you can specify a maximum text size, the rest will be trimmed.
• Link this field to its node: the entry will be a link, depending on the field, the link address changes.

Let’s dwell on the “Basic settings” block, where the basic properties of our view are collected. When you click on any of the properties, an editing panel appears at the bottom.

Let’s discuss the main properties:
Name: the name of the display, you don’t have to change it, but when there are a lot of displays, it helps not to get confused.
Title: The title of the display (in our case, the default title of the block).
Style: Output style. A very important property, determines how your view will be rendered. There are 4 variants in total (if you do not add modules):
Grid – the data are displayed in a “grid”, you can set the number of columns, alignment (horizontally/vertically) and whether they should be grouped by any field.

HTML list: regular HTML list, from the Grouping field (similar to the one in Greed), and List type (Unordered – regular, Ordered – numbered)

Table: fields are displayed in the columns of the table, you can sort by any field.

Use AJAX: whether to use AJAX to output the view. If, for example, paginated output is used, then the transition between pages will happen without reloading the page.
Use pager: whether to display data paginated, pages can be shown in 2 ways: Full (1 2 3 4 next ‘ last ‘) and Mini (1 of 4 ‘), the Pager element property you need when using multiple pagers in one view.
Items per page: How many entries per page.
Distinct: if enabled, only unique entries will be displayed.
Access: sets access to the view, Role – only for users with a certain role, Permission – only for users with a certain right of access (User management → Permission).
Caching: whether the block will be cached or not.
Header, Footer: this is where we can insert text before and after our block, we can also insert HTML.
Empty text: this text will be rendered in case the view returns no entries.
Theme: you can specify the style of the theme our block will correspond to.

Sort criteria: any field can be sorted in ascending or descending order.

The Filters block is used for specifying the output filters. For example, you can display only those entries, whose id is less than 5, or Node: Type is “Blog entry”.

Practice

The module Views is very extensive, we have considered the basics, the rest I hope you can figure out on your own. Now, let’s move from theory to practice, do a few tasks (below I will give the solution, but it is desirable that you do it yourself):

Custom Drupal Home Page: the Simple Way (Without Views)

The simple way to customize Drupal offers the least flexibility but is, of course, easier. For people who need only a static page this will work well. Those looking for more complicated, dynamic content on their front page (summaries of most popular content, most recent articles etc.) should skip to the section showing the complicated way (it’s complicated but, thanks to step-by-step instructions, not difficult!).

1. Create a New PageSelect Create Content -> Page in the Drupal administrator menu (in the side bar of a default installation).Enter at least a Title, e.g. ‘Home Page’. Text in the Body is optional (and can be added later).Click to drop-down URL path settings, then enter ‘home’ in the text box. Also drop-down Publishing options and ensure Published is checked but Promoted to Front Page is not.
2. Make Drupal Use the New Page as its Front PageUnder the administrator menu, select Administer -> Site configuration -> Site information.Change Default home page to ‘home‘, then click Save configuration.Finished! Click the site logo (or type in the URL) to go to the newly created home page. To edit the text on the home page simply click the Edit link, when logged in as an administrator.

Custom Drupal Home Page: the Complicated Way (With Views)

For a home page with dynamic content (latest article summaries, top ten articles, etc.) it is better to use a view. Views can be used to create both pages and blocks. This section will show both: first a page view will be created, then a block view added to that page, giving an overview of how to create truly customized home pages for Drupal.

1. Download and Enable the Views ModuleFirstly download the Views module from the Drupal website.Since Drupal 5 the best place to keep modules is drupalinstalldirectory/sites/all/modules (where ‘drupalinstalldirectory’ is the directory Drupal is installed in, e.g. httpdocs or public_html). If the directory does not exist: create it. Storing modules in this location keeps them separate from the ones that come with Drupal. Making upgrades and safely removing modules easier. No more: ‘Was that module part of Drupal?’Upload the whole views directory to the Drupal site, the path of the module should look like: drupalinstalldirectory/sites/all/modules/views. Then enable it under Administer -> Site building -> Modules on the Administrators menu (in the side bar of a default Drupal installation) by finding the Views group, selecting the Views and Views UI check boxes, then clicking Save configuration, at the bottom of the page.Optional Video: Installing the Views ModuleThe embedded video shows how to install the views module. This is in Flash format, which is non-Free and patent enclubered, not all surfers will be able to view it. For these users an OGG video is available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
2. Create a New Page ViewClick Administer -> Site building -> Views this will show a list of currently available views, the module comes with some ready made ones, but this article will show how to make a new page view from scratch.Click Add at the top of the views page, then enter: ‘first_three_teaser’ as the Name.Drop down the Page group and check the Provide Page View.Under the URL text box enter ‘firstthree’.Select Teaser List from the View Type list. This shows a short summary of the articles/blog posts in the site database, views allow up to 99999 posts per page (should be enough for any site)! In this case three will be shown, with no pager (widget to move between pages).Make sure Use Pager and Breadcrumb trail should not include “Home” are both not checked, then enter 3 in the Nodes per Page text box.Next Filters are used to ensure the view includes only articles published and promoted to the front page by an administrator. Expand the Filters group by clicking on it.Using the Add Filter drop-down list select Node: Published, then Add Filter. Repeat this with Node: Front Page.The article teasers need to be ordered by the date they were written. Expand the Sort Criteria group. Using the Add criteria drop-down select Node: Created time, then click Add Criteria. Note that the order of the criteria needs to be changed so the articles published last are listed first, to do this change the Order drop-down list to Descending.Lastly click Save. The new view has been created!
3. Make Drupal Use the New View as its Front PageSelect Administer -> Site configuration -> Site information in the Drupal administrator menu. Enter ‘firstthree’ in the Default front page text box.Click Save configuration. Return to the front page (usually by clicking the site logo) and check the changes are working, if there is no content on the site enter some by clicking Create content -> Story in the administrator menu. Anything can be entered here, silly posts can be deleted later!
4. Add Blocks to TasteCreating a page View is only the beginning. Views allow almost all the information on a site to be grouped, summarised and ordered in ways visitors might like. Blocks are small bits of content in Drupal, they can be inserted into a page at several predefined places (see Administer -> Site building -> Blocks to configure blocks). This tutorial shows how to create two blocks, the first produces a table of the 10 newest articles, the second a table of the 10 most commented on articles.10 Newest BlockSelect Administer -> Site building -> Views in the Drupal administrator menu, then click Add in the menu at the top of the page.Enter ‘newest10’ as the view Name.Expand the Block group and check the Provide block box.Under the View Type drop-down select Table View, enter ‘10 Newest’ in the Title and ‘10’ in the Nodes per block.Leave the Block group and expand the Fields one. Then—as creating a page view, using the Add field drop-down—add the following fields to the block:
   • Node: Title
   • Node: Author Name
   • Node: Created TimeNext to the Name is a Label field, this is used for column headings in the view generated table. Node: Title should have a Label of ‘Title’, Node: Author Name should be ‘Author’ and Node: Created time should be labelled ‘Date’.Expand the Filters group by clicking on it. Using the Add Filter drop-down list select Node: Published, then Add Filter. Repeat this with Node: Front Page. These are the same filters used on the page view.Lastly the items in the table need to be ordered by the date they were written. Expand the Sort Criteria group. Using the Add criteria drop-down select Node: Created time, then click Add Criteria. Then change the Order drop-down list to Descending. This sort is the same as that on the page view created earlier in this article. Click Save to finish creating the block.10 Most Commented BlockFollow the instructions above, for creating the 10 newest block, with the following changes:
   • For the view Name enter ‘mostcommented10’;
   • Under the block Title enter ‘10 Most Commented On’;
   • Instead of clicking Save when finished, click Save and edit.
   • Visitors may wish to know how many comments are attached to each article in the table. To do this add the field: Comment: Count to the block view (in the same way all other fields were added).Making this into the 10 Most Commented On block is just a case of adding another Sort Criteria. Select Comment: Comment Count in the Add Criteria drop-down list, then click Add Criteria. Notice the Node: Created Time criteria is above the one just created, click the up arrow of the comment count line to move it above this. Change the sort order by selecting Descending in the Order drop-down list.Finally click Save.Showing the Blocks on the Front PageRepeat these steps for each block. The block administration page can be found under Administer -> Site building-> Blocks. Click configure on the block that needs to be moved.Under Page specific visibility settings select the Show on only the listed pages option, then enter ‘<front>’ into the Pages text box. ‘<front>’ is the name of the page where the block should be displayed; more than one page can be listed by pressing return between page names (see the instructions on the block configuration page, underneath the Pages text box for details). Click Save block to complete the changes.When the block is saved Drupal returns to the block listing page, finally the block should be enabled and moved to the content area of the page. Under Region in the block list are a column of drop-down menus: using the drop-down select Content, then click Save blocks.
5. Optional Video: Creating Page and Block ViewsThe embedded video shows how to carry out the steps above to create both page and block views. Helpful if something some part of this tutorial is difficult to understand, missing something, or Drupal isn’t working the way it should. This is in Flash format, which is non-Free and patent enclubered, not all surfers will be able to view it. For these users an OGG video is available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.