Send the link below via email or IMCopy
Present to your audienceStart 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
Drupal Theming from Scratch
Transcript of Drupal Theming from Scratch
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/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).
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> <?php if ($page['footer']): ?>
<?php print render($page['footer']); ?>
<?php endif; ?> Create your regions Some of the most common are:
$logo (the logo uploaded through the theme settings; only useful when you're implementing the logo theme feature)
$title (the page title)
There are also some variables associated with Drupal administration:
$tabs (menu used for edit/view admin menus, among other things; often used by modules)
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
Ctools Creating SUB-THEME Omega Theme Settings