theming

Zurb Foundation

Document Status

Work in progress. See issue for more information: #1902848: .css documentation?


Getting started with Zurb Foundation

Zurb foundation is a great theme to get your website or application to a point of release. It has a strong component library and features lots of options and abilities for responsive design.

Get acquainted with Zurb Foundation

Be sure to visit the official Zurb Foundation theme documentation so you can leverage more out of your theme:

Foundation 4 Documentation
Foundation 3 Documentation

Drupal Zurb Foundation Versions

The Drupal adaptation of zurb foundation leverages different versions of foundation. There's a significant difference between the drupal Zurb Foundation 1.x and the 2.x branch.

  • The Drupal 1.x branch supports Zurb Foundation 3.
  • The Drupal 2.x branch supports Zurb Foundation 4.

Comparison of PHPTemplate and Twig theming paradigms

This page compares PHPTemplate to Twig. The Twig effort is currently in progress, so there will be changes and additions to this doc.

For more information, see:

About Twig

Twig is a PHP-based compiled templating language. When your web page renders, the Twig engine takes the template and converts it into a 'compiled' PHP template which it stores in a protected directory in sites/default/files/php_storage/... The compilation is done once. Template files are cached for reuse and are recompiled on clearing the Twig cache.

The Drupal Twig initiative shares the same motivation as the Symfony initiative: to adopt a modern, powerful, OOP-based engine that will allow developers to concentrate on Drupal proper.

1. Doc block

PHPTemplate:

  <?php
 
/**
   * @file
   *  File description
   */
 
?>

Twig:

  {#
  /**
   * @file
   *  File description
   */
  #}

2. File and function names

PHPTemplate file: node--article.tpl.php
Twig file: node-article.html.twig

Read more

Theming Drupal 8

Twig is the new templating engine in Drupal 8. See the change record for more information.

Please review the Twig coding standards for how we'll be using Twig in Drupal.

This document is still a work in progress, please see the subpages for more information or the following issues for more background:

Non-responsive theme with Radix

To create a non-responsive theme with Radix,

  1. Edit screen.css in your theme assets directory.
  2. Comment the line @import "compass_radix_responsive";
  3. At a terminal, run compass clean && compass watch.
  4. Flush the cache (optional).

Theming with Profile2

User-profile.tpl.php

If you are designing a custom template for your user profile pages and are using the Profile2 module, you probably are looking to add your custom fields to the user-profile.tpl.php template. Here is how this can be accomplished.

This assumes that you have a Profile2 profile type called my-profile. You may easily load your fields into your custom user-profile.tpl.php by printing them like this:

<?php print render($user_profile['profile_my-profile']['view']['profile2'][1]['field_example']); ?>

Where field_example is the machine name of your field. This example is setup for most fields such as text fields. Image fields can be rendered differently.

Node.tpl.php

To add the fields to the node.tpl.php template, we must first call the profile2 object like so:

<?php
$uid
= user_load($node->uid);
$myprofile = profile2_load_by_user($uid, 'my-profile');
?>

Then we can print fields like this:

<?php if (isset($portfolio->field_example['und'][0]['value'])): ?>
      <?php print ($portfolio->field_example['und'][0]['value']); ?>
<?php endif; ?>

As always you can view all printable items via the print_r function.

Create a quick Admin "Edit This Page" link that bypasses the content List

I sometimes do not like having to click on the Content link and then have to search for that page in the Content/Nodes screen, so this little code is handy for quickly editing a page while bypassing the Content list. Wordpress also has a quick command for this, but I never found it on Drupal.

global $user;
$role = $user->role ;
                                if($role=="admin" || $role=="administrator")
                                {
                                // Generate all your Drupal and PHP variables
                                    $nid = arg(1);
                                    $edit_this_page_link = ("<a style=" color:cyan;" href="' . $base_url . '/node/' . $nid . '/edit">Edit This Page</a>");
                                }

This can go into any page.tpl.php or even a preprocess function in your template's template.php file.

Subscribe with RSS Syndicate content
nobody click here