Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Drupal Theming from Scratch

No description
by

Saket Kumar

on 14 December 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Drupal Theming from Scratch

Drupal Theming To demo step by step process of creating your own DRUPAL 7 Theme including a .info file, page template, regions and css files. AIM Some basic knowledge of DRUPAL setup.
Knowledge of html, css and Javascript.
Drupal terminologies. ASSUMPTIONS Existing Themes are very generic.
To avoid many different templates and extra css files.
Also working from scratch gives a better understanding of the theming system. WHY we need a theme from scratch??? Creating your theme Creating the folder structure Create new folder with the name of your theme which goes in
/sites/all/themes/ or
/sites/yoursite/themes/ You must further divide it into subfolders for better understanding. Inside the .info file, we’ll need to enter information about our theme in key-value pairs. These include:
name - a human-readable name of your theme.
description - a description of the theme.
core - the version of Drupal this is designed for.
engine - the templating engine your theme will use (probably phptemplate).
features - theme components that can be turned on or off in in the Drupal admin interface (e.g. option to specify a site name, mission statement, logo etc.).
stylesheets - your CSS files.
scripts - any scripts required by your template. Create the .info file Understanding Drupal template files name = My Cool Theme
description = Custom theme for my site
core = 7.x
engine = phptemplate

regions[header] = Header
regions[sidebar_first] = Right sidebar
regions[content] = Content
regions[footer] = Footer

stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css

features[] = name
features[] = main_menu Sample .info file Add them to the info file and place them in the folder with proper path. Adding CSS and JS files Theming using Base themes Thank You Grid based Layouts
Responsive themes Other Topics to dive in Little Theory The HTML mark-up for your theme (containing div's, and any other major structural elements).
Region definitions.
Variables for other content items (e.g. title, navigation tabs). Create the page.tpl.php Start by creating the basic HTML structure for your page. The HTML mark-up <div id="header">
</div>
<div id="wrapper">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
<div id="footer">
</div> <?php if ($page['footer']): ?>
<?php print render($page['footer']); ?>
<?php endif; ?> Create your regions Some of the most common are:
$site_name
$logo (the logo uploaded through the theme settings; only useful when you're implementing the logo theme feature)
$title (the page title)
$main_menu
$secondary_menu
$breadcrumbs
$messages
There are also some variables associated with Drupal administration:
$tabs (menu used for edit/view admin menus, among other things; often used by modules)
$action_links
And some other useful variables:
$base_path (the path to your site root)
$front_page (the path to the site front page)
$directory (the path to your theme) Add variables for basic page elements stylesheets[all][] = css/style.css scripts[] = js/exp.js Saket Kumar
Drupal Themer @ QED42 Omega as Your Base theme Why Omega??? Fully Responsive Grid layouts based on 960.gs standards.
12, 16, 24 Column Layouts built in.
Quickly disable groups of and individual regions and zones.
Every region/zone size and placement configurable.
Create contextual layouts with the Delta module. MODULES REQUIRED Omega tools
Delta
Context
Ctools Creating SUB-THEME Omega Theme Settings
Full transcript