Theming

Use of external style sheets in Drupal 7

External style sheets can't be added in the themes .info file

In Drupal 7, drupal_add_css is used to add external style sheets. In this example, the minified Bootstrap's CSS is fetched.


/**
 * Implements template_preprocess_html().
 */
function subtheme_preprocess_html(&$variables) {
  drupal_add_css('https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css', 
    array('type' => 'external'));
}

Also, externally hosted style sheets are never aggregated or compressed.

Remove all CSS files except current theme files

Function is placed in template.php.


/**
 * Implements hook_css_alter().
 */
function MYTHEME_css_alter(&$css) {
 
  dpm('-- Before unset --');
  dpm($css); 
 
  foreach ($css as $key => $value) {
    if ($value['group'] != CSS_THEME) {
     unset($css[$key]);
    }
  }

  dpm('-- After unset --');
  dpm($css);
   
}

CSS_THEME is a constant defined in common.inc and refers to the group of theme CSS files

Create a subtheme Drupal 7

This example show the basics to create a subtheme in Drupal 7.

First of all, create a new directory in the sites theme folder to add the custom theme.

Create the .info file, aside the mandatory name and core properties, and the recommended desription property, add the base theme property.

The custom theme can be activated on the /admin/appearance page.

How to render an item list

To use the theme_item_list function, a $variables array needs to be declared which contains an items array, a title which can be empty, a type element (ul or ol) and an attributes array. When a title is passed, a h3 element is added to the HTML markup.

How to theme a table Drupal 7


  
  $items = array(
    array(
      'sender' => 'Lorem',
      'receiver' => 'Dolorem',
      'message' => 'This is a message',
      'amount' => 5,
    ),
    array(
      'sender' => 'Dolorem',
      'receiver' => 'Lorem',
      'message' => 'This is the reply',
      'amount' => 7,
    ),
  );
  
  $header = array(t('From'), t('To'), t('Message'), t('Amount'));
  $rows = array();
  foreach($items as $item) {
    $rows[] = array(
      $item['sender'],
      $item['receiver'],
      $item['message'],
      $item['amount'],
    );
  }

Remove the read more and comment links on nodes

MYTHEME_preprocess_node is the best solution as it is a theme adjustement. However, when you're using a default Drupal theme, then instead of hacking core, use hook_node_view_alter(&build) inside a custom module.

Subscribe to RSS - Theming