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.

Slides:



Advertisements
Similar presentations
Create your site in the folder Rosary in your My Documents Folder.
Advertisements

Drupal Basics Part 5 Understanding Blocks Using the theme Agricultural Communications Services Integrated Media Training Sessions
Ruby on Rails Model of MVC. Model-View-Controller Paradigm A way of organizing a software system Benefits: Isolation of business logic from the user interface.
From a HTML5 Template Kaloyan Petrov Drupal Themer Telerik Web Design Course
Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.
Drupal Best Practices (or just good ideas) Q. Why Is it important to practice good programming habits? A. Following best practices, and thoughtful planning.
Government Web Template (GWT) for WordPress Updated 03/20/2015.
Developing Interfaces and Interactivity for DSpace with Manakin Part 6: Hands-on with Manakin’s Theme Tier Eric Luhrs Digital Initiatives Librarian, Lafayette.
Customizing your Theme Information Systems 337 Prof. Harry Plantinga.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
A smart stationery package is an important part of developing and promoting the image of a business.
CREATING CUSTOM LAYOUTS IN PANELS. What are panels? Contrib module: Main function Implement.
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.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
Publications, design sets, web pages
#psuweb13 WORDPRESS THEMES 101 A WORDPRESS THEME INTRO WORKSHOP.
1/30/11 Hacking your way through the Drupal API, a themers intro Baris Wanschers (BarisW)
Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!
Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Specialist
Dreamweaver Edulaunch Project 1 EQ: What are the key concepts when building the first page of a web site?
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.
Basic Instructions on how to use One Drive and share files. ONE Drive Your LogoYour own footer.
Drupal 6 Theme System Architecture –Theme Templates –Theme Engines –Theme Hooks What’s New –Theme registry –Theme Inheritance –Modules & Themes speak!
Drupal Themes The Survival Guide Drupal Camp | Managua 2009.
Drupal Overview Prepared by : Agustin D. Gumogda Jr. Instructor.
OC Drupal. Steps to creating a subTheme Download base theme to “site/all/themes” folder notice: D7 will allow you to install theme from module interface.
Business Web Design & Marketing Dignity for Children Students By Andrea Loh Lesson 4 Wordpress Add Ons.
EFolio Intermediate Adding Content Adding Content Images Images Documents Documents Audio and Video Files. Audio and Video Files. Sidebar - Hyperlinks.
How to create a powerpoint slide. To open a new Powerpoint™ document, click on “Start” and then on “Microsoft Office Powerpoint” Step #2 Step #1.
Tutorial to use a course link for the schedule and module pages.
Epson Interactive Projector Part 2 Whiteboard mode With whiteboard.
Setting up Wordpress Directions Creating an account Lost your password? Finding your dashboard Choosing background theme Adding a new page Setting the.
HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit A Creating an HTML Document.
Curriculum Standards Module Powered by Academic Benchmarks Tutorial support.ebsco.com.
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.
Drupal Theming Chris Neglia and Lisa Forgan Copyright 2009, Page 1 Solutions.
Lecture Capture and. Goal Link to D2L D2L Website
Content Administration 08/19/13 & 08/20/13.
Searching LexusNexus Academic Fall Select Magazines/Journals Select LexisNexis Academic.
HINDU STYLE PORTFOLIO TEMPLATE
BUILDING A WEB PAGE BASIC HTML CODING. We first open notepad to start to build our web page. We enter the code at the beginning. And then we write below.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Microsoft PowerPoint 2010 for Microsoft Windows Basically it’s a computerised slide show!
Creating a Google Site For a Digital Portfolio Purpose.
Workshop Partner:. Saad Amin Cofounder and CTO Inspire Chittagong Cofounder & Managing Director Codework Builders and Assets Ltd.
Web Services College of Life Sciences / College of Medicine, Dentistry and Nursing Andrew Millar, Web Services Manager.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
By Vicky Vickers Summarized by Mr. Parslow Webpage Design.
Dan Hakimzadeh Agenda ● A Fistful of Photos ● For a Few Photos More ● The Good, The Bad, and The Templates.
Creating a Theme From Scratch in Drupal
CSS Layouts: Positioning and Navbars
XmlBlocks xml-based blocks.
How To Move Mail To Different Folders in Gmail If You are not logged in then First You Have to Log in your Gmail account.
EOS WEBPAGE Collaborative work with: Ewa Lopienska (logo),
>> Header & Footer in CSS
How to make a website in dreamweaver a website
Jekyll Documentation Theme
Customizing your Theme
The Difference Between STATIC & DYNAMIC Websites
GLOBES Example text Text example Replace it with own Your own footer
Blueprint– Pyramids Example text Example Logo Footer.
Microsoft PowerPoint 2016 for Microsoft Windows
Common Page Design Elements
The Orsett Surgery Website
Engine Part ID Part 1.
Engine Part ID Part 2.
Engine Part ID Part 2.
How to Save to Your Learners Drive
Microsoft PowerPoint 2010 for Microsoft Windows
How to Save to Your Learners Drive
Presentation transcript:

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

Static HTML page

Required theme files and folders 1.Images folder 2.Page.tpl.php 3..info file 4.Style.css

Where do we save themes? sites/all/themes

.info file for your theme ; $Id$ name = rgdesign core = 6.x engine = phptemplate regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[footer] = Footer

Regions

page.tpl.php file

Page.tpl.php Replace this:

Page.tpl.php With this:

Page.tpl.php Replace this:

Page.tpl.php With this: if ($logo || $site_name) { if ($logo) { print ' '; } print ' '. $site_name.' '; }

Page.tpl.php if ($logo || $site_name) { if ($logo) { print ' '; } print ' '. $site_name.' '; } 'links primary-links')) ?>

Next regions

Left Side Bars With this: Replace this:

Right Side Bars With this: Replace this: Search

Footer With this: Replace this:

Content region

Important Variables

Important Variables