Drupal-lovers

Who love to Drupal

Archive for the ‘Theme’ Category

Theming

An Introduction to Drupal’s Display Suite(DS)

Posted by drupallovers on March 30, 2012

One of the rites of passage for beginner Drupal users is to learn Panels. It’s a useful tool for laying out pages and redesigning content pages without any code knowledge.

However, not everyone is a fan. Panels is sometimes criticized for being hard to use and for having performance issues.

In this tutorial we’re going to introduce you to a powerful alternative: Display Suite. We’re going to show you several ways in which it can make designing your content fun and pain-free.

Why Display Suite?

We’re going to use Movies as our example. In the image below, we created a Movies content type and added several fields. We added a a Movie Poster, Director, Stars and the Length of the movie.

tutuploadsmedia_1330890697146.png

So far, so good. However, the vertical layout seen above is ugly. In contrast, the image below is Titanic as seen on IMDB.com. That site has a two column layout that makes the content much more attractive.

The goal of Display Suite is to allow us to move from the layout above to the layout below.

tutuploadsmedia_1330890712547.png

Getting Started with Display Suite

To start working with Display Suite, you just need two modules:

  1. Display Suite: http://drupal.org/project/ds
  2. Chaos Tools Suite: http://drupal.org/project/ctools

Download and install both modules. Make sure to enable all of the Chaos Tools Suite modules that you are able to in order to get as the full benefit from Display Suite.

Go to Structure > Display suite so to see the options available. We’re going to start by clicking Layout.

tutuploadsmedia_1330895877454.png

You’ll now see a list of all the things that you can redesign with Display Suite. You can create new layouts for Comments, Nodes, Taxonomy terms and User pages.

Get started by clicking on the content type you want to redesign.

tutuploadsmedia_1330895943731.png

You’ll now see all of your fields. This screen can also be accessed by clicking Manage Display when you’re working with a particular content type:

tutuploadsmedia_1330896164042.png

You’ll now see your normal Manage Display option as in the image below:

tutuploadsmedia_1330891154417.png

The extra power of Display Suite can be seen at the bottom of the page. Click Layout for movies in default and you’ll see some layout options:

tutuploadsmedia_1330896210138.png

In this example I chose Two column stacked and then clicked Save.

The Ajax-based drag-and-drop wasn’t working for me, but I was able to use the Region dropdown to place each of the fields into different parts of the page:

tutuploadsmedia_1330896342969.png

When it was done, I had a layout that appeared close to IMDB. The Movie Poster was on the left and the other information was on the right:

tutuploadsmedia_1330896717669.png

One note of caution here: the are several view options available in the top-right corner. Make sure that you are redesigning the layout for Full content if you want to control the normal content pages.

tutuploadsmedia_1330891389687.png

If you’ve created your layout once, it is easy to re-use it for others by using the Clone layout option.

tutuploadsmedia_1330891407022.png

The end result can be seen below. I was able to divide my content into two columns:

tutuploadsmedia_1330896687265.png

If you need to get more sophisticated with your layouts, you have two options:

  1. You can add Panels to your site and use the Custom layout feature to add more options.
  2. You can use template files to change how existing layouts work. In the image below, I’ve highlighted how Display Suite helps with this.
tutuploadsmedia_1330891566431.png

View Modes

View modes is a very useful Display Suite feature that makes working with Views easier and more flexible.

Starting by going to Structure > Display Suite > View Modes > Add a view mode.

We’re going to create a new View Mode called Sidebar which will add a layout for Nodes in our Sidebar. Go ahead and choose the settings below.

tutuploadsmedia_1330891976272.png

Now you can go to Structure > Display Suite > Layout > Manage display and enable your new view mode for the content type you’re working with.

tutuploadsmedia_1330892001911.png

Click Save and it will appear as an option in the top-right hand corner:

tutuploadsmedia_1330892058711.png

Go ahead and set up your design the sidebar content. Choose the layout from the bottom of the page and then add your fields. Click Save when you’re done.

If you haven’t done so yet, go ahead and install Views http://drupal.org/project/views and create a View. Once your View is ready, click Fields under the Format label.

tutuploadsmedia_1330892322902.png

Usually you will have only Content and Fields as options but this time Display Suite will also be an option.

tutuploadsmedia_1330892355190.png

Choose Display Suite and click Apply (all displays). Then choose your new Sidebar View Mode.

tutuploadsmedia_1330892386484.png

The image below shows how my block turned out, using the Sidebar View Mode that I created. This View Mode can now be reused across as many Views and Blocks as you wish. You can make one update from inside Display Suite and automatically update all of those Views and Blocks.

tutuploadsmedia_1330892858898.png

Styles for Regions

The final feature we’re going to look at is Display Suite’s Styles for Regions feature. To start using it, go to Structure > Display suite > Styles.

I’m going to be subtle. I’m going to create a style for one of the my content regions called Big Ugly Border:

tutuploadsmedia_1330894672739.png

When I go back to my Manage display page, it’s possible to apply that new style to any of the regions.

tutuploadsmedia_1330894652173.png

With some CSS added to the theme file, we can target that region accurately. Here’s the CSS:

tutuploadsmedia_1330894691242.png

And here is the big, ugly border that resulted:

tutuploadsmedia_1330894727159.png

Summary

We have wanted to recommend Display Suite for over year. It is a far more user-friendly alternative to Panels for many layout option. Panels will still be a better option for designing individual pages such as your homepage or an important landing page. However for working with content types, we’re now recommending Display Suite, particularly to beginners. Mediacurrent have a good blog post on when and why using Panels still makes sense.

One note of caution: we have held off from recommending Display Suite until now because bugs were still being worked out. The Fields feature still contained too bugs many for us to recommend yet, but the rest of the Display Suite core worked perfectly during testing.

Posted in Drupal7, Modules, Theme | Tagged: , , , | 1 Comment »

How to use the JCarousel Module for Drupal

Posted by drupallovers on March 30, 2012

JCarousel is a useful module for creating Drupal slideshows. It uses the JCarousel plugin from http://sorgalla.com/jcarousel/and makes it easy to use via integration with Views.

Here’s a simple example of how to use the JCarousel module.

Step 1: Install the modules

Make sure that you have these three modules installed and enabled:

Step 2: Create content with an image field

tutuploadsmedia_1328037792046.png

In order to show images, you will need content with images.

You can use the default “Article” content type if you wish. Go to Structure > Content types and make sure that you have a content type with an image field attached as in the image above. Then go to Add content and use that content type to create several content items with images attached.

Step 3: Create a view

tutuploadsmedia_1328037067831.png

Go to Structure > Views and click Add new view.

The important part of the view is “Create a block”. Choose the JCarousel Display format and then click Continue & edit.

The image below shows the settings you will need. If you followed our instructions when setting up the view, the only thing you might have to change here is the Fields. Click Add and add the Content: Image field to your view.

tutuploadsmedia_1328038178103.png

Click Save to complete the creation of your view.

Step 4: Place the block

tutuploadsmedia_1328037109070.png

Go to Structure > Blocks and place your new JCarousel block somewhere on your site.

Once the block is live, it will look like the image below:

tutuploadsmedia_1328038443124.png

The JCarousel project page on Drupal.org warns:

“You will almost certainly need to do custom CSS in your theme in order to use this module. The default CSS only supports 100 pixel square items. A basic understanding of CSS is therefor required to use this module.”

As you can see, the output here is 100 pixel square images.

You will need to add some CSS for JCarousel to your theme in order to change this width. The original CSS is in /sites/all/modules/jcarousel/skins/default/jcarousel-default.css

The width is being controlled by:

 

01..jcarousel-skin-default .jcarousel-item {
02.padding: 0;
03.width: 100px;
04.height: 100px;
05.overflow: hidden;
06.border: 1px solid #CCC;
07.list-style: none;
08.background: #fff none;
09.}

 

You can modify that and place it in your theme’s CSS file.

Posted in Modules, Theme | 1 Comment »

How to Create Dropdown Menus in Drupal

Posted by drupallovers on March 30, 2012

No matter what CMS we’re teaching, when we come to talking about themes and designs, one question always comes up quickly: “How do I make a dropdown menu”? Here’s the answer to that question in Drupal.

First, we are going to show you how to get your menu set up correctly. Second we’re going to give you three different options for showing that menu to your visitors.

Setting Up the Dropdown Menus

tutuploadsmedia_1328643949622.png

Go to Structure > Menus. Click list links next to the menu you’d like to use.

tutuploadsmedia_1328644328522.png

Click Add link and then create your link.

Pay close attention to two options further down the page:

– Enabled. Check this box.
– Parent link. If you want this link to dropdown under another, here is where you choose the top-level link. In this example below, the link will drop down from under Home.

tutuploadsmedia_1328644380136.png

When you’re done, you’ll see that the sub-links are indented under the top-level links.

tutuploadsmedia_1328645783324.png

If you’re going to put dropdown links under existing menu links, don’t forget to also open up those existing links and check the Show as expanded box.

Option 1: Using a Theme with Dropdown Menus

tutuploadsmedia_1328646997914.png

One thing that confuses some Drupal beginners is that not all themes have dropdown menus. In fact, none of the default Drupal 7 themes do so Bartik, Garland and Stark would not be the right choice in this case.

For example, the main menu bar of the default Bartik theme will always look like the image above. And if you try to place the menu in a block, you’ll only get an indented link as in the image below.

tutuploadsmedia_1328645760427.png

To get an easy-to-use dropdown menu you’ll need a theme such as Marinelli: http://drupal.org/project/marinelli. Each theme will be slightly different in how the dropdown menus are setup but Marinelli is a good example.

tutuploadsmedia_1328644936117.png

Install Marinelli and make it the default theme on your site.

Under the Apperance tab, click Configure next to Marinelli and scroll down. Under Primary Menu Settings, select Mega Drop Down.

tutuploadsmedia_1328645228108.png

Now when you check your site, you’ll have working dropdown menus as in the image below.

tutuploadsmedia_1328645302561.png

Option 2: Use a Module

A second way to get dropdown menus on your Drupal site is to use a module. Nice Menus is very common choice and then one we’ll use in this tutorial: http://drupal.org/project/nice_menus. Another very popular choice is Superfish http://drupal.org/project/superfish.

tutuploadsmedia_1328645453517.png

Install the Nice Menus module and enable it.

Go to Structure > Blocks and place one of the two Nice Menu blocks into a region of your site.

tutuploadsmedia_1328645725343.png

You can also click Configure next to one of the Nice Menu blocks and you’ll be able to take some control over the menu settings.

tutuploadsmedia_1328645886530.png

Once the menu is live on your site, it will look like the image below.

tutuploadsmedia_1328645941153.png

You might not want the menu in the sidebar as in this example, so check to see which regions are available to you in current theme. Go to Structure > Blocks > Demonstrate block regions and you’ll see your choices:

tutuploadsmedia_1328646054907.png

Option 3: Change the Code of Your Theme

Finally, if you have some coding knowledge, you can modify the theme that you’re using to include dropdown menus.

The quickest way to do this would be to take advantage of one of the modules mentioned in Option 2 such as Nice Menus or Superfish.

Here is one step-by-step example of how you can add a Superfish dropdown menu to the Bartik theme: http://drupal.org/node/1073298.

Posted in Modules, Theme | Leave a Comment »

Theme: Which are the files in a typical drupal theme and their purpose

Posted by drupallovers on February 27, 2012

A drupal theme is a collection of files that define the presentation layer. You can also create one or more “sub-themes” or variations on a drupal theme. Only the .info file is required, but most themes and sub-themes will use other files as well. The following diagram illustrates the files that are found in a typical drupal theme and sub-theme.

DRUPAL 6

DRUPAL 7

theming requirements

.info (required)
All that is required for Drupal to see your theme is a “.info” file. Should the theme require them, meta data, style sheets, JavaScripts, block regions and more can be defined here. Everything else is optional in drupal theme.

The internal name of the theme is also derived from this file. For example, if it is named “drop.info”, then Drupal will see the name of the theme as “drop”. Drupal 5 and below used the name of the enclosing folder of the theme.

Info files for themes are new in Drupal 6. In version 5, .info files were used solely for drupal modules.

template files (.tpl.php)
These drupal templates are used for the (x)HTML markup and PHP variables. In some situations they may output other types of data xml rss for example. Each .tpl.php file handles the output of a specific themable chunk of data, and in some situations it can handle multiple .tpl.php files through suggestions. They are optional, and if none exists in your drupal theme it will fall back to the default output. Refrain from having complex logic in these files. In most cases, it should be straight (x)HTML tags and PHP variables. A handful of these templates exist in directories where core and contributed modules exist. Copying them to your drupal theme folder will force Drupal to read your version.

Note: The theme registry caches information about the available theming data. You must reset it when adding or removing template files or theme functions from your theme.

template.php
For all the conditional logic and data processing of the output, there is the template.php file. It is not required, but to keep the .tpl.php files tidy it can be used to hold preprocessors for generating variables before they are merged with the markup inside .tpl.php files. Custom functions, overriding theme functions or any other customization of the raw output should also be done here. This file must start with a PHP opening tag ”

Sub-themes
On the surface, sub-themes behave just like any other drupal theme. The only differences is that they inherit the resources from their parent themes. To create one, a “base theme” entry inside the .info file is needed. From there it will inherit the resources from its parent theme. There can be multiple levels of inheritance; i.e., a sub-theme can declare another sub-theme as its base. There are no hard set limits to this.

Drupal 5 and below required sub-themes to be in sub-directories of the parent theme. This is no longer the case.

Others
  • The logo and screen shot is not absolutely necessary for the theme to function, but it is recommended, especially if you are contributing your theme to the Drupal repository. Screenshots will show inside the theme administration page and the user account settings for selecting themes when the appropriate permissions are set. See the screenshot guidelines for more information.
  • To supply administrative UI settings or “features” beyond logo, search, mission, etc., a “theme-settings.php” file can be used. This is an advanced feature. More information can be found in the Advanced settings handbook page.
  • For color module support, a “color” directory with a “color.inc” file is needed along with various support files.
  • If you want to base your work on a core theme, use sub-theming or make a copy and rename the theme. Directly modifying Bartik, Garland or Minnelli is strongly discouraged, since they are used for the install and upgrade process.
  • All non-Core or modifications to Core themes should be installed under the “sites/all/themes” directory to keep them separate from core files. If you plan to run multiple sites from a single Drupal code base, you can make a theme available to a specific site rather than all sites; read about how to set this up in Multi-site installations.

Posted in Theme | Leave a Comment »