Depth overview on Drupal's interface

Working on your site's interface to make it distinctive and attractive not only requires some technical know-how when it comes to Drupal, but like any design-like task, it also needs some creativity. Your site as it stands at the moment is fully functional and doesn't look awful—it's a bit plain, but it will get the job done! As you will see, however, with a bit of effort creating something entirely new is not out of your reach, and as you might expect, Drupal comes with a host of features to make our lives easier.
 
[adsense:block:adcontenuto]
 
If, like me, you enjoy working on the more creative aspects of a website, then this is really the chapter you have been waiting for. It's time to design, plan, and implement the visual environment in which users will be immersed—if you can succeed in creating a pleasing atmosphere in which to interact, then you will certainly have done a lot in terms of ensuring users are happy with your site.
 
However, like everything else in this book, we can't simply dive in headlong and learn to swim once we have begun working. There are plenty of interesting things to think about and learn before we begin customizing Drupal's interface.
 
You also have the luxury of having a website already set up for you, which frees you to simply make changes here and there to achieve your design goals rather than develop the HTML from scratch. To some extent, this luxury actually restricts you because anything short of a total rewrite of the pages will mean your site retains some of the Drupal flavor. But that's not a bad thing at all now, is it?
 
Here we discuss:
 
• Planning a web-based interface
• How Drupal's interface works
• CSS
• Themes
 
I should warn you that there is quite a lot involved with coming up with an entirely fresh, pleasing, and distinct look for a site. There are lots of fiddly little bits to play around with, so you should be prepared to spend some time on this section because after all, your site's look and feel is really the face you present to your community, and in turn the face of your community to the outside world.
 
Another thing to remember is that you should take some time to look at what is already out there. Many issues that you will encounter while designing your site have already been successfully dealt with all over the show, and not only by Drupal users of course. Also, don't be scared to treat your design as an ongoing process—while it is never good to drastically change your site on a weekly basis, regular tweaking or upgrading of your interface can keep it modern and looking shiny new.

Planning a Web-Based Interface

The tenet form follows function is widely applied in many spheres of human knowledge, ranging from evolution to biokinetics and engineering. It is a well understood concept, which basically says that the way something is built or made must reflect the purpose it was made for. This is an exceptionally sensible thought, and applying it to the design of your site will provide you with a yardstick to measure how well you have designed it. If you, or preferably everyone you ask, can honestly say that your site looks like it is meant to do whatever it is you are doing, then you are doing a good job.
 
That's not to say your site should look like every other site that performs the same function. In fact, if anything, you want to make it as distinctive as possible without stepping over the bounds of what you believe your target user will consider good taste or common sense.
 
How do you do that? The trick is to relate what you have or do as a website with your specific target audience. If you are providing content that has appeal to both sexes of all ages across all nationalities, races, or religions, then obviously you should go with something that everyone can use. If anything, this might be a slightly flavorless site since you wouldn't want to marginalize any group of users by explicitly making your site friendly to another group. Luckily, though, to some extent your target audience will be slightly easier to define than this, so you can generally make some concessions for a particular type of user.
 
Bear in mind that while these following sections refer to visual or functional design, what you are really thinking about is the visual or functional aspect of the interaction design, which encompasses all visual and functional design. The interaction design is how you envision your audience using and interacting with your site. This is an important distinction because thinking about everything from the perspective of the user will help to define your choices as you go along.

Visual Design

There's no beating about the bush on this issue. Make the site appear as visually simple as possible without hiding any critical or useful information. By this, I mean you shouldn't be afraid to leave a fairly large list of items on a page if all the items on that list are useful, and will be (or are) used frequently. Hiding an important thing from users—no matter how easy it appears to be to find it on other pages—will frustrate them, and your popularity might suffer. A consequence of this is that you should not be afraid to have quite long pages that users must scroll down—rather have information available at the bottom of the page than have a complex navigation structure.
 
How you make your site look can also have a big impact on how users understand the site's working. Think about this yourself for a moment! If you were reading a page of text and the links were all given in the same font as the writing, how would you know on which words to click?
 
This can be summed up as:
 
Make sure your site is visually consistent and that there are no style discrepancies from one page to the next.
There are quite a few so-called rules of visual design, which you could apply to your site. These are largely theoretical, and you may or may not wish to read up on these further—might I suggest Google for some good reading matter. Some that might apply to you are: the rule of thirds, which states that things divided up into thirds—either vertically or horizontally—are more visually appealing than other designs; the visual center rule, which states that the visual center of the page (where the eye is most attracted to) is just above and to the right of the actual center of the page.

Language

Now this is a truly interesting part of your site's design, and the art of writing for the Web is a lot more subtle than just saying what you mean. The reason for this is that you are no longer writing simply for human consumption, but also for consumption by machines. Since machines can only follow a certain number of rules when interpreting a page, the concessions on the language used must be made by the writers (if they want their sites to feature highly on search engines).
 
Before you worry about making your site's text highly optimized for searching, there are a few more fundamental things that you need to get right. First off, make sure your language is clear and concise! This is the most important; rather sacrifice racy, stylized copy for more mundane text if the mundane text is going to elucidate your important points better.
 
Apart from the actual content of your language, the visual and structural appearance of the copy is also important. Use bold or larger fonts to emphasize headings or important points, and ensure that you space your text out nicely to make the page easier on the eye and therefore easier to read and understand—we saw an example of this in the previous chapter when we posted a well formatted and laid out "about us" page.

Images

Working with images for the Web is very much an art! I don't mean this in the sense that generally you should be quite artistic in order to make nice pictures. I mean that actually managing and dealing with image files is itself an art. There is a lot of work to be done for the aspiring website owner with respect to attaining a pleasing and meaningful visual environment. This is because the Web is the one environment that is most reliant on visual images to have an effect on users because sight and sound are the only two senses that are targeted by the Internet, for now.
 
In order to have the freedom to manipulate images as required by your site, you really need to use a reasonably powerful image editor. Photoshop or Paint Shop Pro are examples of good image-editing environments, but anything that allows you to save files in a variety of different formats and provides resizing capabilities should be sufficient. Of course, if you have to take digital photographs yourself, then you will need to ensure you make the photos as uniform as possible, with a background that doesn't distract from the object in question—editing the images to remove the background altogether is probably best.
 
There are several areas of concern when working with images, all of which need to be closely scrutinized if you hope to produce an integrated and pleasing visual environment (not all of these relate to what your customers actually see, funnily enough):
  • • One of the biggest problems with images is that they take up a lot more memory than text or code. For this reason you need to have an effective method for dealing with large images that will be required for your site—simply squashing large images into thumbnails will slow everything down because the server still has to upload the entire large file to the user's machine.
  • • One common mistake people make when dealing with images is not working on them early on in the process to make them as uniform in size and type as possible. If all your images are of one size and of the same dimension, then you are going to have things a lot easier than most. In fact, this should really be your aim before you do anything involving the site—make sure your images are all uniform.
  • • Deciding what type of image you actually want to use from the multitude available can also be a bit of an issue because some image types take up more space than others, and some may not even be rendered properly in a browser. By and large there are really only three image types that are most commonly used—GIF, PNG, and JPG.
  • • The intended use of an image can also be a big factor when deciding how to create, size, and format the file. For example, icons and logos should really be saved as PNG or GIF files whereas photos and large or complex images should be saved in the JPG format.
  • Three types of image files were mentioned in the bulleted list. Let's take a quick look at those here.
  • GIF, or Graphics Interchange Format, is known for its compression and the fact that it can store and display multiple images. The major drawback to GIF is that images can only display up to 256 distinct colors. For photographic-quality images, this is a significant obstacle. However, you should use GIFs for:
  • • Images with a transparent background
  • • Animated graphics
  • • Smaller, less complex images requiring no more than 256 colors PNG, or Portable Network Graphics, is actually designed as a replacement for GIF files. In general it can achieve greater file compression, give a wider range of color depth, and quite a bit more. PNG, unlike GIF files, does not support animations. You can use PNG files for anything that you would otherwise use GIFs for, with the exception of animations.
 
Incidentally, there is also an MNG format, which allows for animations—you might want to check that out as an alternative to animated GIFs.
 
JPG, or JPEG (Joint Photographic Experts Group), should be used when presenting photo-realistic images. JPG can compress large images while retaining the overall photographic quality. JPG files can use any number of colors, and so it's a very convenient format for images that require a lot of colors. JPG should be used for:
  • • Photographs
  • • Larger, complex images requiring more than 256 to display properly
That about covers it for the planning phase of your site's interface development. Before we begin an in-depth look at themes, which are responsible for just about everything when it comes to your site's look and feel, we will need to take a look at how the various web technologies are combined in Drupal to provide your site with its interface.
 
[adsense:block:adcontenuto]

How Drupal's Interface Works

Knowing a bit about the theory behind creating an appealing site is one thing; applying this knowledge within the context of a Drupal site is another thing entirely. Because of this it is important that we take some time to understand exactly how everything is tied together. You have already seen that HTML and PHP can and do form part of a site's interface, but many of you will have noticed the themes link under the administer menu item and wondered what all that is about.
 
Further, some of you might have also been wondering what on earth a theme engine is, and how both themes and theme engines relate to your Drupal site. The following two definitions should clear up a few things:
  • • Theme: A file, or set of PHP files, that defines and controls the layout of Drupal's web pages. The look and feel of these pages is in turn controlled by CSS (Cascading Style Sheet) files, also provided by the theme. Various standard images might also be held within the theme for use by the site.
  • • Theme engine: Provides functionality to create your own unique theme, which in turn gives excellent control over the all aspects of a Drupal site, ranging from what functionality to include within a page, to how individual page elements will be presented.
Making use of a theme engine requires some programming know-how, as themes are built using code. Modifying themes, on the other hand, is fairly easy, and once a suitable base theme has been found, creating your own unique site is a matter of modifying the theme accordingly.
 
There are several things to make a note of here. Firstly, not all theme engines are pure PHP based. For example, there is a Smarty theme engine available in Drupal for use by people who are familiar with Smarty templates. Second, there are many types of browser out there, and not all of them are created equal. What this means is that a page that is rendered nicely on one browser might look bad, or worse, not even function properly on another. For this reason you should test your site using several different browsers!
The Drupal help site has this to say about browsers:
 
It is recommended you use the Firefox browser with developer toolbar and the view formatted source extensions.
You can obtain a copy of the Firefox browser at http://www.mozilla.com/firefox/ if you wish to use something other than Internet Explorer.
 
Now, in terms of how this relates to our situation, we are going to limit ourselves to the selection of a base theme, which we will modify to provide us with the site's interface. This means that for now, you don't have to concern yourself with the intricacies of theme engines. Can we now move on and look at themes directly? Not yet; notice that in the previous diagram there is a box containing the term CSS. This is very important in terms of developing our interface, and since we have already seen HTML and PHP in action, let's learn a bit about CSS before continuing.

 

 

CSS

The pages in a Drupal site obtain their style-related information from associated style sheets, which are held in the site's theme. Using style sheets gives designers excellent, fine-grained control over the appearance of web pages, and even allows you to produce some great effects. The appearance of pretty much every aspect of the site can be controlled from within a theme, and all that is needed is a little knowledge of fonts, colors, and style sheet syntax.
 
Before we go any further, it will make life easier if you have a readymade list of the type of things you should look at setting using the style sheet. The following is a list of the most common areas (defined by HTML elements) where style sheets can be used to determine the look and feel of a site's:
  • • Background
  • • Text
  • • Font
  • • Color
  • • Images
  • • Border
  • • Margin
  • • Padding
  • • List
As well as being able to change all these aspects of HTML, you can also apply different effects depending on whether certain conditions, like a mouse hovering over the specified area, are met—this will be demonstrated a little later on. You can also specify attributes for certain HTML tags, which can then be used to apply style-sheet styles to those specific tags instead of creating application-wide changes. For example, if you had one paragraph style with a class attribute set, like this:
 
<p class="center"></p>
you could specify this type of paragraph in your style sheet explicitly by saying something like:
 
p.center { color: green; }
 
Analyzing this line highlights the structure of the standard style-sheet code block, which appears in the form:
  • • Selector: in this case p.center
  • • Property: in this case color
  • • Delimiter: always :
  • • Value: in this case green

 

Note that all the property/value pairs are contained within curly braces, and each is ended with a semi-colon. This introduction to CSS has been very brief, and there are plenty of excellent resources available. If you would like to learn more about this (and it is highly recommended), then visit:
Now that you have an understanding of how Drupal's interface is created through the use of HTML, PHP, CSS, and themes, along with the knowledge of how stylesheets work, we are ready to begin looking at…

Themes

The use of themes makes Drupal exceptionally flexible when it comes to working with the site's interface. Because the functionality of the site is by and large decoupled from the presentation of the site, it is quite easy to chop and change the look, without having to worry about affecting the functionality at all. This is obviously a very useful aspect because it frees you up to experiment however you please knowing that, if worst comes to worst, you can reset the default settings and start from scratch.
 
You can think of a theme as a template for your site, which you can modify in order to achieve the look and feel you want. Of course, different themes have wildly varying attributes; so it is important to find the theme that most closely resembles what you are looking for in order to reduce the amount of work you need to do.
Accordingly, the first task we need to complete is…

Choosing a Base Theme

By default, Drupal ships with a few default themes and there are quite a few more available in the Downloads section of the Drupal site.
 
Looking at what's already present on the themes page in Drupal.
 
You might be wondering why it is possible to enable as many themes as you like, yet select only one as the default. The reason for this is that if you enable more than one option, then these options are available for users (assuming they have sufficient permissions) to select by editing their Theme configuration preferences on the edit tab of the my account page.
 
You should take the time to view each and every theme that is available by default in order to get a feel for what is on offer.
That is not the end of the story, because the Drupal site also has a whole bunch of themes for us to explore, so let's head on over to the themes page at http://drupal.org/project/Themes and select the relevant version tab to bring up the themes that are available for your installation of Drupal. Please make note that some of these themes require you to download a theme engine—the Box_grey_smarty contribution is an example of a theme that requires the Smarty theme engine in order to function.
You have already seen how to download and install other modules, and the process for installing themes is no different—simply download and extract the contents of the desired theme to your themes folder. For example, the box_grey theme was downloaded, and provides us with two new options in our list of themes.

 

 

 

Configuring Your Themes
Clicking on the configure tab at the top of the themes page brings up the global theme options, which will influence each theme regardless of which one is being used—useful if you know that you always want certain features enabled (it's also easy enough to navigate between global and theme-specific settings using the links given at the top of the configure page).
188
Chapter 8
We will concentrate on the global settings page here as this is representative of all the theme configuration pages, so you won't have any problems working on each one individually. Remember that you can override these settings by working on the configure page of a specific theme.
The first section allows you to either use the default logo supplied with the theme, or alternatively, specify a path to your own logo or upload a new logo to the site.
In the case of the demo site, we will be making use of a background image to display the logo and name; so this can be unchecked. If you have a site logo, or plan to have one, then simply upload it here.
Drupal also provides us with the ability to specify which content types require post information to be displayed. Now, we have already seen that there are certain types of pages for which we don't need to display this type of information—for example, the about us page should be presented as is without informing users precisely who created it.
The reason for the settings as shown in the last screenshot is that it is important to identify a blog posting with the person who posted it, and likewise for forum topics. However, when it comes to things like polls, pages, book pages, or stories, it is less important to do so—often because these sorts of things will be handled by site administrators anyway. For the moment, I have left the page type as the only type to forgo post information.
Please bear in mind that you need to think about what makes sense for your site and apply the settings that reflect your specific needs. For example, it may well be important to identify who has contributed certain book pages so that the authors can be contacted in case there is a need to query or modify content on the book page (especially since books are generally collaborative efforts).
The following section allows you to specify Logo image settings and an icon that will be displayed in the site's address bar and in any bookmarks. Once again, what you use here is really up to you. For the purposes of our site, we need not create a specific icon, and we don't yet have a logo to upload; so we can leave things blank for the moment.

Customizing Your Theme

Up until now, any settings or changes you have made have been fairly generic. Things are about to change as we begin to implement some more radical modifications that will require amendments to the style sheet in order to get things just right. In the case of the demo site, I have chosen to work with the box_grey theme as this most closely resembles the look that is envisaged and has features that are suitable for learning purposes.
Here is some information about box_grey, from their readme file:
box_ is intended to be relatively easy to modify for those that aren't competent in CSS positioning. Instead of using entirely CSS for layout it is a so called hybrid layout—it uses CSS combined with very simple tables.
It is a standard three-column layout using a table for the central three columns with a header above the table and a footer below. This reduces accessibility and adds a little code bloat but has certain advantages:
  • • The content columns won't overlap if a user inserts wide content.
  • • The content appears in the template (page.tpl.php) in the order it appears on the page.
  • • You can add any sized logo image; the header should expand to fit.
 
These features are useful from the point of view of learning how to work with style sheets and this will not only give you an effective means of customizing the look of your site, but also build a platform from which you can attempt some more advanced customizations on other themes when you are ready.
If you haven't already, now is the time to find a fairly good code editor as you will be looking at code files of one sort or another from here on out.
 
Navigate to the themes folder in your Drupal installation and make a copy of the box_grey folder, naming it box_grey_dev. This allows us to work on a development version of the theme without putting the original files at risk. Go back to themes in your Drupal administer section and enable the new box_grey_dev theme, setting it as the default. It is important you do this so that you know that you are viewing the correct theme when you check to see what effect any changes you make have on the look of the site.
Now, opening up the box_grey_dev folder, you will notice that there are a few .tpl.php files, namely:
  • • node.tpl.php
  • • page.tpl.php
  • • image_gallery.tpl.php

 

 

which are responsible for the layout of their namesakes. For example, a snippet of the code in page.tpl.php looks like this:
<table id="content">
<tr>
<?php if ($sidebar_left != ""): ?>
<td class="sidebar" id="sidebar-left">
<?php print $sidebar_left ?>
</td>
<?php endif; ?>
<td class="main-content" id="content-<?php print $layout ?>">
<?php if ($title != ""): ?>
<h2 class="content-title"><?php print $title ?></h2>
<?php endif; ?>
<?php if ($tabs != ""): ?>
<?php print $tabs ?>
<?php endif; ?>
<?php if ($mission != ""): ?>
<div id="mission"><?php print $mission ?></div>
<?php endif; ?>
<?php if ($help != ""): ?>
<p id="help"><?php print $help ?></p>
<?php endif; ?>
<?php if ($messages != ""): ?>
<div id="message"><?php print $messages ?></div>
<?php endif; ?>
<!-- start main content -->
<?php print($content) ?>
<!-- end main content -->
</td><!-- mainContent -->
<?php if ($sidebar_right != ""): ?>
<td class="sidebar" id="sidebar-right">
<?php print $sidebar_right ?>
</td>
<?php endif; ?>
</tr>
</table>
As you can see, this uses HTML to create a table that defines the content of each page. It uses a bunch of PHP if statements to check whether or not, for example, to display things like the left-hand sidebar or even the mission statement. The PHP code is embedded within HTML tags, which have certain attributes associated with them—like id="mission" or id="message". Don't worry about how these PHP variables are populated; we don't want to alter the way in which the site functions, we are simply looking at how it is laid out.
But why have they bothered to set the class and id attributes for different sections of the HTML page? This is where the power of CSS comes into play. We already know that we want to create a consistent look for our site. What this means is that every type of related content should have the same look and feel—in other words, the content of each page should be presented in a similar manner. This being the case, we can classify a class or id of content to be of a certain type, and then, using that attribute tag, specify how it should be laid out within the style sheet.
 
You should be asking for proof, and here it is…
 
Open up the style.css file in the box_grey_dev theme and search for the snippet of code that reads:
body {
color: #000;
background: #fff;
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
font-size: 84%;
padding: 0;
margin: 0;
}
Change this to:
body {
color: #000;
background: #8E6C63;
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
font-size: 84%;
padding: 0;
margin: 0;
}
Save these changes, and refresh the view of your Drupal site in your browser.
 
A single change to the body tag in the style sheet has changed the background color throughout each and every page of the whole site. This is quite a powerful and useful property of style sheets, and is precisely why everyone uses them so much nowadays. You can change this back to your original setting or leave it as is—it makes no difference at the moment since it will no doubt change once you have decided on a color scheme for your site.
 
Now that you know how to implement a change and view the effects of this change on your site, you are ready to continue with modifying the style sheet to reflect how you want the site to look. In the sections that follow, we will discuss several different types of modifications, without grinding through each and every one—and there are a lot of different properties associated with web pages, believe me! Once you have the hang of making changes in one area, it is easy to apply that knowledge somewhere else, so you should find the coverage here sufficient to get you up and running with confidence.
 
One of the first tasks required for the demo site is to create and upload an image that will serve as the logo and title in the header section of the site.

 

Development: 

Similar Content

Configure or add a google gmail account, e-mail user on Windows 8, or else Outlook account

set account gmail to windows 8To add a google mail user or other account except  hotmail, is sufficient, with the Mail program open, go with the mouse on the lower right so that you open the menu to the right and click on settings.
Offline Utility: 

How to access the search, share, start and the device settings, using touch or mouse with Windows 8

Windows 8 provides wherever you are the ability to search, share files or access the settings of devices.
Depending on where you are or on start, or your e-mail, or an application opened, you can access to different menus.
Offline Utility: