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

Slides:

Advertisements

Similar presentations

Tables Feb. 14, Tables Great way to organize and display information Laid out in columns and rows Think of an excel spreadsheet Defined with tag.

Advertisements

WordPress Themes.

Layouts Using Tables Web Design – Section 4-5 Part or all of this lesson was adapted from the University of Washingtons Web Design & Development I Course.

Become a Panels Rockstar. Audience Survey Have you tried Panels? Are you a …. –Themer / Designer? –Developer / Code Junkie? –Information Architect?

Moving stuff around on your Drupal web pages Alex Bergin / Dept. Agriculture &

M2 – Explain the tools and techniques used in the creation of an interactive website. By Arturas Vitkovskij.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

Source: ojects/tabber/ ojects/tabber/

HTML / CSS – Basics Why the heck are we doing this?

Robby Seitz 121 Powers Hall ADVANCED WEB DESIGN USING DREAMWEAVER

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

Web Design HTML Basic Robertus Setiawan Aji Nugroho References: w3schools.com.

Seattle Drupal Clinic Introduction to Drupal and Web Content Management.

 Pseudo-elements  Centering  Tables  Classes and ids.

Art 128 Interface Programming 1 In-class Presentation Week 11B.

Making Accessible Drupal Sites Rick Ells UW Technology.

CREATING CUSTOM LAYOUTS IN PANELS. What are panels? Contrib module: Main function Implement.

Drupal Workshop Introduction to Drupal Part 1: Web Content Management, Advantages/Disadvantages of Drupal, Drupal terminology, Drupal technology, directories.

Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.

CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

The Characteristics of CSS

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.

INTERMEDIATE WEB DESIGN INTRODUCTORY CSS, JAVASCRIPT AND PHP.

Website Development with Dreamweaver

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.

Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website.

Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.

CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.

Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.

HTML and Web Pages. HTML?  HTML is not a programming language  A type of SGML (standard generalized markup language)  HTML uses paired tags to markup.

Project 4: Yosemite CSS Layout

>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.

Seattle Drupal Clinic Introduction to Drupal Part 1: Web Content Management, Advantages/Disadvantages of Drupal, Drupal terminology.

Basic Web Design Using Dreamweaver Robby Seitz 121 Powers Hall

Daveandal.net Cascading Style Sheets 101 “How I learnt to love CSS and found my inner designer”

PHP Form Introduction Getting User Information Text Input.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

CSS BEST PRACTICES.

1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.

Drupal Theming Chris Neglia and Lisa Forgan Copyright 2009, Page 1 Solutions.

Week 2: Building a Simple Website IMC 320 Web Publishing Spring 2011.

Advanced Topics Lecture 8 Rachel A Ober

 Look especially at › File Tips and Shortcuts › Student video.

CIT 256 CSS Intro & Dreamweaver Built-in Layouts Dr. Beryl Hoffman.

University of South Asia Course Name: Web Application Prepared By: Md Rezaul Huda Reza

HTML and CSS HTML is used for the content of web pages CSS is used for the style of the web pages You are going to learn how they can be combined to create.

Adobe Dreamweaver CC: The Professional Portfolio Project 8: BLVD Fluid Grid Site Working with fluid grids Creating CSS3 transitions.

Coding with HTML {. THE BASICS { What is HTML and how can you use it to make websites?

- WE’LL LOOK AT THE POSITION PROPERTY AND HOW CSS RESOLVES CONFLICTS BETWEEN STYLING INSTRUCTIONS The position property; CSS specificity hierarchy.

Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.

Emmet Tools for Web Developers. Emmet for Sublime “Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow” Adds tons.

Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.

Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.

HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

HTML for JavaScript Web Applications

Creating a Theme From Scratch in Drupal

CSS Layouts: Positioning and Navbars

>> Introduction to CSS

Arrays and files BIS1523 – Lecture 15.

CSS BEST PRACTICES.

Website Design 3

Cascading Style Sheets - Building a stylesheet

Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.

Cascading Style Sheets - Building a stylesheet

One Set of Styles Connected to As Many Pages as You Want!!!

Presentation transcript:

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

Needed for Theming Text Editor (Coda, Dreamweaver, ect.) Knowledge of CSS, HTML, and a tiny bit of PHP FIREBUG, BABY! A creative mind

Before Getting Started Consider the most Efficient Layout Regions Div tags Custom Blocks/Views/Fields

Dont make more regions than necessary Use existing regions as much as possible Regions are listed in the.info file Regions the PHP call is defined inside the [ ] this side sets the region name in the block admin

Regions Flexible by default in Zen The possibility of shuffling the regions makes it even more flexible These regions make it possible for content to be editable.

Theming Tip #1 If at all possible, try to avoid hard-coding into the page.tpl.php file. This doesnt mean youre never going to hack the page.tpl.php file, but consider your options before you do! And try to keep it minimal.

Tags Only code ID and Class attributes into the page.tpl.php file Good Bad Keeps code clean and changes more flexible Code gets cluttered, you will likely have to apply the style multiple times, and future changes will take more work

Custom Blocks/Views/Fields Not all blocks, views, and fields need the same style. I put custom theme styles at the bottom of the CSS Comment your code!

Best Practices Try to follow best practices as much as possible - they make life easier for you as well as anyone else that may be using your code later.