Creating a Theme From Scratch in Drupal

Slides:



Advertisements
Similar presentations
Bending Zen Intro Using Zen Themes functionality, but bending it into your own theme.
Advertisements

Drupal Basics Part 3 Create a new page Main tabs menu Using the theme Agricultural Communications Services Integrated Media Training Sessions
Create your site in the folder Rosary in your My Documents Folder.
Source: ojects/tabber/ ojects/tabber/
Creating and Editing a Web Page Using Inline Styles
INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.
From a HTML5 Template Kaloyan Petrov Drupal Themer Telerik Web Design Course
Customizing your Theme Information Systems 337 Prof. Harry Plantinga.
Drupal Blocks David Manela, Mark Ritzman, Chad Campbell.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
The Dr ü G Book: An Intro to Drupal The Dr ü G Book: An Intro to Drupal (Dr ü G: Drupal User ’ s Group - users, not developers) This is an introduction.
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Microsoft ® Word Templates and Accessibility. 1 What is a Word template? File with a.dot (document template) extension Can define the following:  Paragraph.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!
Web Technologies Website Development Trade & Industrial Education
CITY UNIVERSITY / Vysoká Škola Manažmentu.:IS Information Systems :. © Martina Cesalova, 2005 MS FRONTPAGE 4 1. Create a folder on L/BSBA/IS330/website.
Copyright © Eric Liria Web Site Builder This application allows you to build and manage web sites. It provides the following functionnalities: use.
IT204 - Web Scripting and Authoring I Introduction to Dreamweaver Unit 6.
INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.
Static HTML to Drupal Theme By Ivan Zugec. Static HTML to Drupal Theme. Setting up a theme. Overriding tpl files. Using the devel module. Q and A.
Drupal Themes The Survival Guide Drupal Camp | Managua 2009.
Drupal Overview Prepared by : Agustin D. Gumogda Jr. Instructor.
© 2012 The McGraw-Hill Companies, Inc. All rights reserved. word 2010 Chapter 3 Formatting Documents.
Seattle Drupal Clinic Introduction to Drupal Part 1: Web Content Management, Advantages/Disadvantages of Drupal, Drupal terminology.
© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University
Introduction to Views Stanford Drupal Camp April 6, 2013.
Creating a Web Site Review of Concepts. Templates Templates are special HTML files that are used to quickly create pages on a web site. They contain the.
Web Design Part I. Click Menu Site to create a new site root.
Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Drupal Theming Chris Neglia and Lisa Forgan Copyright 2009, Page 1 Solutions.
CSCI 6962: Server-side Design and Programming Facelets and User Interface Design.
Advanced Web 2012 Lecture 11 Sean Costain 2012.
Adxstudio Portals Training
Inserting Hyperlinks  Purpose : Enables viewers to click the link and move directly to a slide  Directions : Make one link on slide one to move to each.
Positioning Objects with CSS and Tables
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
1.Getting Started 2.Modifying Design 3.Newsletter Templates 4.Announcement 5.Administer Sections Index Training 14 th Mar., 2011.
1 Creating a Menu Bar on a Secondary Web Page  It is important for visitors to be able to move easily from one page to another  You will create a menu.
Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Before We Begin Please download the files from as we will be using them in our walkthroughs.
LibGuides Interface Customization Presented By: Christine Tobias ~ Kelly Sattler ~ Jenny Brandon Michigan State University Libraries.
Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.
Weebly is Your Friend. * To Enhance And Promote Your Curriculum * To Provide A Student Resource * Add Efficiency to Your Planning * Informational * Promote.
Chapter 5 Using a Template to Create a Resume and Sharing a Finished Document Microsoft Word 2013.
Week 1: Introduction to HTML and Web Design
Working with HTML5 & DIV Structures, CSS, Webfonts and Templates
Web Basics: HTML/CSS/JavaScript What are they?
>> PHP: HTML Integration
Cascading Style Sheets (Layout)
Customizing your Theme
Complex Layouts created simply using Display Suite
Custom Wiki Pages SharePoint 2010 September 18, 2018.
Cheat Sheet CSCI 100 JW Ryder
Starting to develop a website
Add Image and Title to Individual Page
Cheat Sheet CSCI 100 JW Ryder
Intro to Web Development Links
Unit 2 Test Building a Web Page Test.
Web Design and Development
Shelly Cashman: Microsoft Word 2016
Introduction to Web Application Design
Web Programming and Design
One Set of Styles Connected to As Many Pages as You Want!!!
Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.
Presentation transcript:

Creating a Theme From Scratch in Drupal Theming 101

Drupal Theme Structure

Modules, Themes, and Core

Why to theme… Themes allow you to change the interface of your system without affecting the business logic or code that is providing the system functionality. Think of PAC and MVC design, the theme is the view or presentation layer of a web application.

Step 1 – Create a Design Create a working design in HTML and CSS

Step 2 - Create a Theme Folder Create a theme folder and place it in your drupal site’s theme folder E.g. default/themes/example_theme

Step 3a – Create a .info file Create a a .info file for your theme and save it into the theme folder you created. E.g. example_theme.info

Step 3b – Fill in .info required information Add the following information to the .info file:

Step 5 Create a page.tpl.php file & dump your html code into the page and save it into the theme folder you created.

Step 6 Create a style.css file and place all of your CSS code into that file and save it into the theme folder you created.

Step 7 Remove all of your CSS code from the page.tpl.php file and remove all the information / text between the <head>….</head> tags.

Step 8 Place this code between the <head> </head> tags, this will print out all of your styles, java script, page titles, etc…

Step 9 At this point, you will need to place the following code, where your main content display area is in your design. This will print out page content and local menus that appear as tabs. <div id=“content”> </div>

Step 10 In your theme, you should have an area for primary and secondary links defined. Replace the HTML code that you are using for these with this:

Step 11a You will need to define “Regions” that will display “Blocks” of content. By default you have the following regions: regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer

11b – Add regions to .info

11c – Print the content of the region in you page. tpl 11c – Print the content of the region in you page.tpl.php file, locate it where you want the content to be placed.

Congratulations! You just made a theme!

template.php Functions included in this file can be called in your theme. To override a function in Drupal such as the theme(…) function, you can copy the code for the theme function from http://api.drupal.org and then paste it into your template.php file. You will need to append the name of your theme to the function and then modify it’s code to suit your purposes.

node.tpl.php Default node theme

node-story.tpl.php Custom template theme for a specific content type.

block.tpl.php You can create custom themes for each block

page-front.tpl.php Custom Front Page

Overrides