Theming Panopoly
Making a Theme for Panopoly
As part of it's design, Panopoly is designed to work with any theme! However, there are a few things that you can do to help make Panopoly theming even better.
- Make Your Theme Responsive - Panopoly has a lot of responsive functionality, but if the theme's layout and header/footer are not responsive it won't be as awesome.
- Provide a Default Style for Panel Panes - Panopoly uses Panel panes for everything and it has a different bit of markup than the standard Block. Be sure to include a default style for how this should look.
Creating New Layouts
If you want to create a new layout for Panopoly, just follow the directions to create a new layout for Panels. Make sure to make the layout responsive to take advantage of the rest of Panopoly's responsive capabilities.
Creating Style Plugins
If you want to create a reusable style for Panopoly panes and regions, just follow the directions to create a style plugin for Panels. This can then be applied to any of the panes or regions on your site!
Livethemer
The Livethemer module allows you to build your own unique, professional Drupal theme without writing any code.
It provides a point-and-click interface allowing you to modify and enhance your site’s theme — or even build a whole new one from scratch — all without writing any code. Page layouts, backgrounds, colours, typography, block styles… all these aspects and loads more can be styled by Livethemer.
The module comes with a number of “variations” which provide new visual appearance (and possibly functionality) to specific elements on the page (blocks, buttons, teasers, etc). New variations can also be downloaded from http://livethemer.com
View the demonstration screencast at http://livethemer.com/about. As a small demonstration of what's possible, the theme on the Marmaladesoul.com site has been created with a beta version of Livethemer.
Livethemer works best with the Livethemer Base theme: http://drupal.org/project/livethemer_base
Modify attributes of a form field (EXAMPLE: ADD SIZE attribute of a multi select box to make it bigger)
Goal:
ADD(or or modify) an attribute of a form field.
For this example, we'll be ADDING the "size" attribute to a multi select box in a custom content type, with the intent to make the select box bigger, vertically, so that more options are visible at once.
What you'll need to know:
- How to create and enable a custom module (not covered here)
- my_form_id (The form ID of the form you want to change, see previous page for details)
- my_field_name (The field name of the form field you want to modify, see section below for details)
- my_content_type (The content type you're changing the fields for. Don't worry if you're not dealing with a content type form, the below info applies to just about any form you'll likely come across).
The resulting code:
<?php
/**
* Implements hook_form_alter().
*/
function mymodule_form_alter(&$form, $form_state, $form_id) {
if($form_id == 'my_form_id'){
$form['my_field_name'][ $form['my_field_name']['#language'] ]['#size'] = '20';
}
}
?>The What, Where, and Why:
if($form_id == 'my_form_id')
This IF statement is important if you you do not want to process every form on your site with this modification.
Changes in 7.x-2.x
This page describes the changes between 7.x-1.x and 7.x-2.x branch of Display Suite.
Upgrade warning
Do not upgrade an existing site from 7.x-1.x to 7.x-2.x. Some functionality has been changed, especially on the template level. Both branches are supported, so stick with the same branch once you have chosen one.
UX
- Menu structure overhauled.
- Layouts now have preview image, including panels.
- Contextual links on by default, only for nodes.
- When selecting a layout, default fields will be pre filled.
- Layout preview vertical tabs will always be primary, fixing the discovery problem for new users.
- All field settings on the manage display screens are now underneath the cogwheel.
Frontend and developers
- HTML5 support for wrappers (layout, region AND subregion).
- Templates work on forms now as well, with more support for entities by default.
- Hide empty region option is gone. There are now fluid regions.
- Disable sidebars option has moved to extras.
- Hidden region to put fields on the build, but not print them.
- Expert template even more flexible.
- Field configured in UI can be restricted per bundle and view mode.
Paging non-SQL data
Generic Array Pager
With the following function, you can use the Drupal core pager with any array with only two lines of code.
<?php
/**
* An generic array pager for Drupal.
* For Drupal 5 and 6, the default limit is 10. For Drupal 7 it is 9.
*/
function pager_array_splice($data, $limit = 9, $element = 0) {
global $pager_page_array, $pager_total, $pager_total_items;
$page = isset($_GET['page']) ? $_GET['page'] : '';
// Convert comma-separated $page to an array, used by other functions.
$pager_page_array = explode(',', $page);
// We calculate the total of pages as ceil(items / limit).
$pager_total_items[$element] = count($data);
$pager_total[$element] = ceil($pager_total_items[$element] / $limit);
$pager_page_array[$element] = max(0, min((int)$pager_page_array[$element], ((int)$pager_total[$element]) - 1));
return array_slice($data, $pager_page_array[$element] * $limit, $limit, TRUE);
}
?>The usage is as simple as:
<?php
$output = '';
$tree = taxonomy_get_tree($vocab->vid);
$tree = pager_array_splice($tree, 5);
// Do something with the 5 terms
$output .= theme('pager', array('quantity' => 5));
?>Similar SOAP example (D7)
We will define two templates to format data on our listings: the page and the item.
Read morePass the theme path to javascript
Description
This extends Drupal.settings allowing you to get the theme path in a javascript file
Steps
Add a preprocess function to your theme's template.php
Using drupal_add_js we extend Drupal.settings in order to make it a variable that returns the path to the theme
p.s. don't copy the php tags into template.php just what's inside.
<?php
function theme_preprocess_page(&$variables) {
drupal_add_js('jQuery.extend(Drupal.settings, { "pathToTheme": "' . path_to_theme() . '" });', 'inline');
}
?>