north east ohio drupal users group this - 2011... · well documented php and css files. lots of...
TRANSCRIPT
![Page 1: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/1.jpg)
A comprehensive look atDrupal Themeing
North East Ohio Drupal Users Group
![Page 2: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/2.jpg)
Zen◦ http://drupal.org/project/zen
Fusion◦ http://drupal.org/project/fusion
![Page 3: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/3.jpg)
Well documented php and css files.
Lots of easy-to-access classes and ids for CSS developers.
Classes on body include items like:◦ .logged-in◦ .not-logged-in◦ .front◦ .not-front◦ .node-type-story◦ .node-type-blog
This can allow CSS developers to do things like:◦ have a different color for a given page item for non-logged-in users◦ have a larger header section on the front page◦ put a different background color on a given node type.
![Page 4: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/4.jpg)
Automatic (table-less) column resizing for 1, 2, and 3-column layouts
Separate layout.css file to allow for changing the type of column layout
A print.css file optimizes print display automatically when sent to a printer◦ removes, sidebars◦ nav elements◦ optimizes font size◦ adds text to links showing href
![Page 5: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/5.jpg)
![Page 6: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/6.jpg)
![Page 7: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/7.jpg)
Well documented php and css files.
Classes on body include items like:◦ .logged-in◦ .not-logged-in◦ .front◦ .not-front◦ .node-type-story◦ .node-type-blog
Requires the Skiner Module◦ http://drupal.org/project/skinr
![Page 8: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/8.jpg)
Cross-browser compliant configuration of layout through the GUI◦ set block width◦ alignment◦ position
![Page 9: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/9.jpg)
![Page 10: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/10.jpg)
Adaptive Theme◦ http://drupal.org/project/adaptivetheme◦ highly configurable, HTML5 starter theme for Drupal◦ theme settings to ease theme and site development such as layout
control extra CSS classes Skinr support
Framework◦ http://drupal.org/project/framework◦ Supports one, two, and three-column layouts with source ordering◦ Set to a 12 column grid of 960px◦ CSS file is highly organized, including a table of contents, section
flags, alphabetical properties, etc.◦ Includes a CSS reset and a list of CSS utility classes◦ Uses HTML 5 structural markup
![Page 11: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/11.jpg)
Genesis◦ http://drupal.org/project/genesis◦ Standards compliant◦ Modular CSS◦ Flexible layout options◦ Built in support for theming site sections◦ Content source ordered for SEO
Basic◦ http://drupal.org/project/basic◦ stripped down version of the ZEN theme◦ block editing links◦ theme registry rebuild◦ page template options◦ SEO-friendly and easy-to-modify layout◦ support of the Skinr module
![Page 12: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/12.jpg)
![Page 13: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/13.jpg)
![Page 14: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/14.jpg)
![Page 15: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/15.jpg)
page.tpl.php
![Page 16: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/16.jpg)
page.tpl.php
![Page 17: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/17.jpg)
![Page 18: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/18.jpg)
![Page 19: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/19.jpg)
![Page 20: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/20.jpg)
![Page 21: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/21.jpg)
html-reset.css:This is the place where you should set the default styling for all HTMLelements and standardize the styling across browsers.
layout-fixed.css:layout-liquid.css:Zen's default layout is based on the Zen Columns layout method. Thelayout-fixed.css file is used by default and can be swapped with thelayout-liquid.css file. These files are designed to be easily replaced. If youare more familiar with a different CSS layout method, such as Blueprint or960.gs, you can replace these files with your choice of layout CSS file.
page-backgrounds.css:Layered backgrounds across scattered divs can be easier to manage if they arecentralized in one location.
tabs.css:While most of the CSS rulesets in your sub-theme are guidelines without anyactual properties, the tabs stylesheet contains actual styling for Drupaltabs, a common Drupal element that is often neglected by site desiners. Zenprovides some basic styling which you are free to use or to rip out andreplace.
![Page 22: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/22.jpg)
pages.css:Page styling for the markup in the page.tpl.php template.
blocks.css:Block styling for the markup in the block.tpl.php template.
navigation.css:The styling for your site's menus can get quite bulky and its easier to seeall the styles if they are grouped together rather then across theheader/footer sections of pages.css and in blocks.css.
views-styles.css:Views styling for the markup in various views templates. You'll notice thisstylesheet isn't called "views.css" as that would override (remove) the Viewsmodule's stylesheet.
nodes.css:Node styling for the markkup in the node.tpl.php template.
comments.css:Comment styling for the markup in the comment-wrapper.tpl.php andcomments.tpl.php templates.
![Page 23: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/23.jpg)
forms.css:Form styling for the markup in various Drupal forms.
fields.css:Field styling for the markup produced by theme_field().
print.css:The print styles for all markup.
ie7.css:ie6.css:The Internet Explorer stylesheets are added via conditional comments. Many
CSS authors find using IE "conditional stylesheets" much easier then writingrulesets with CSS hacks that are known to only apply to various versions ofIE. The full conditional comment syntax can be found on Microsoft's website:http://msdn.microsoft.com/en-us/library/ms537512.aspx
![Page 24: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/24.jpg)
/****************************//* LOCAL CSS *//****************************/
/* Put your custom CSS and CSS overrides in this file and *//* rename it local.css. By restricting your CSS changes *//* to local.css, your changes will not be overwritten when *//* upgrading to a new version of this theme. You can also *//* use a local-rtl.css file for the equivalent in RTL. */
/* Steps to activate local.css: *//* 1. Add your custom CSS to this file *//* 2. Rename this file to local.css *//* 3. Clear cached data at admin/settings/performance */
![Page 25: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/25.jpg)
![Page 26: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/26.jpg)
Install and Enable Theme
![Page 27: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/27.jpg)
From here on out we will just be working with the Fusion Theme
![Page 28: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/28.jpg)
Administration Theme
![Page 29: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/29.jpg)
RootCandy◦ http://drupal.org/project/rootcandy
Rubik◦ http://drupal.org/project/rubik
![Page 30: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/30.jpg)
RootCandy is a 3 column theme focused on administration section.◦ Supports node/add /edit pages◦ Re-colorable◦ Icons◦ Top navigation by role◦ Simple dashboard◦ 3 column fluid or fixed layouts◦ Rootcandy dark sub-theme◦ Icons in compact mode◦ Sliding region
![Page 31: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/31.jpg)
![Page 32: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/32.jpg)
Rubik is a clean admin theme designed for use with the admin module.
Features a set of icons for admin pages provided by Drupal core and aggressive styling to reduce visual noise wherever possible.
![Page 33: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/33.jpg)
![Page 34: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/34.jpg)
![Page 35: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/35.jpg)
![Page 36: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/36.jpg)
![Page 37: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/37.jpg)
![Page 38: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/38.jpg)
![Page 39: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/39.jpg)
![Page 40: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/40.jpg)
![Page 41: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/41.jpg)
![Page 42: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/42.jpg)
![Page 43: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/43.jpg)
![Page 44: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/44.jpg)
![Page 45: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/45.jpg)
![Page 46: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/46.jpg)
![Page 47: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/47.jpg)
Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
https://getfirebug.com/downloads/
![Page 48: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/48.jpg)
Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
https://getfirebug.com/downloads/
![Page 49: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/49.jpg)
![Page 50: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/50.jpg)
![Page 51: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/51.jpg)
HTML Selectors
ID Selectors
Class Selectors
![Page 52: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/52.jpg)
![Page 53: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/53.jpg)
![Page 54: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/54.jpg)
![Page 55: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/55.jpg)
![Page 56: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/56.jpg)
And its packaged with Drupal
![Page 57: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/57.jpg)
Drupal 5 to jQuery 1.2.6Drupal 6 to jQuery 1.3.2Drupal 7 to jQuery 1.5.2 and jQuery UI 1.8.11
http://drupal.org/project/jquery_update
Upgrades the version of jQuery in Drupal core to a newer version of jQuery.
![Page 58: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/58.jpg)
Drupal 6 Drupal 7
page--node--1.tpl.phppage--node.tpl.phppage.tpl.php
page-node-1.tpl.phppage-node.tpl.phppage.tpl.php
block-module-delta.tpl.phpblock-module.tpl.phpblock-region.tpl.php
block--module--delta.tpl.phpblock--module.tpl.phpblock--region.tpl.php
node--nodeid.tpl.phpnode--type.tpl.phpnode.tpl.php
node-nodeid.tpl.phpnode-type.tpl.phpnode.tpl.php
![Page 59: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/59.jpg)
![Page 60: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/60.jpg)
Facelift Image Replacement Integrationhttp://drupal.org/project/flir
Facelift Image Replacement or FLIR, is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced!...
![Page 61: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/61.jpg)
Typeface - Custom Fontshttp://drupal.org/project/typeface
With typeface you can embed custom fonts into your website, so you don't have to render text to images.
Here's what it takes to get going:
![Page 62: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/62.jpg)
A font browsing interface allows selection of fonts from several providers:
Typekit.comGoogle FontsFont SquirrelKERNESTFontdeckFonts.com
Fonts are automatically loaded on site simply by clicking "Enable"; no need to create font files, write CSS, add JS, nor figure out different methods for every font provider.
Clear indication of license restrictions on provided fonts.Fonts can be applied to specific text on the site either by using the provided font-family identifier in theme CSS, or by typing a CSS selector directly in the @font-your-face interface.
![Page 63: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/63.jpg)
3.1 + and iPad iPhone (iOS)
10 + and Opera Mobile 9.7 +
IE4 +
3.5 +
4.0 +
![Page 64: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/64.jpg)
Install and Enable Module
![Page 65: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/65.jpg)
Configure Module
Import your Fonts
![Page 66: North East Ohio Drupal Users Group This - 2011... · Well documented php and css files. Lots of easy-to-access classes and ids for CSS developers. Classes on body include items like:](https://reader036.vdocument.in/reader036/viewer/2022070922/5fbab45edea8ab76a739de7f/html5/thumbnails/66.jpg)
Pick Your Font