CLAS Drupal
Our Building Perspective
Rick Porter, Developer
Ben Speare, Designer
Mark Fullenkamp, Director
CLAS Drupal
•
•
•
•
•
•
Lack of resources
Get r done mentality
No planning
Short term fix
Aesthetics?
Credibility
CLAS Drupal
•
•
•
•
•
•
•
Integrated Approach/Big Picture
Project Purpose/Requirements
Speaks to who you are: Brand
Usable
Sustainable
Accessible
Scalable
CLAS Drupal
CLAS Drupal
CLAS Drupal
Images Speak Louder…
CLAS Drupal
…than words.
CLAS Drupal
Site Configuration
Drupal 7
CLAS Drupal
• LAMP Virtual Machine – multisite
– Subdirectories
• Subdomains trickier with SSL
• clas.uiowa.edu/site1/site2,
clas.uiowa.edu/site2/site1
– Symbolic links
• Aliases cleaner
– .htaccess
• <FilesMatch>
• DirectoryIndex
CLAS Drupal
Development Process
• Version Control
– Git
• Local development
– Deployment
• Move configuration to code using Features
• Code moves up, database moves down
• Deploy via git pull, jenkins, capistrano, drush
– Drush
• Updates, sql-sync
CLAS Drupal
Modules
• Must-have
– Pathauto
– Token
– Views
– Ctools
– Date
– Webform
– Wysiswyg editor of some kind (ckeditor)
– (features, context, strongarm)
CLAS Drupal
Modules
• Important
– Backup and migrate
– Metatag
– Feeds (tamper, xpath, youtube)
– Google analytics
– Jquery update
– authentication of some kind (ldap, secure
login)
CLAS Drupal
Modules
• Extra
– Login destination
– View unpublished
– Calendar
– Content access
– Profile, entity api
– Module filter
– Node convert
– Override node options
CLAS Drupal
•
•
•
How we create a basic theme:
page.tpl.php found in the system modules folder
(modules/system/page.tpl.php) and move it to your theme folder
(sites/all/themes/themename folder)
Also, while you are in the system folder grab html.tpl.php and maintenancepage.tpl.php and move them to your theme folder.
CLAS Drupal
•
•
•
html.tpl.php displays the basic html structure of a single Drupal page.
Includes the header, body tags and other Drupal variables.
Override the default html.tpl.php to change the doctype to HTML5.
•
•
Page.tpl.php is the default file to display a single page.
Override and use page.tpl.php in our theme to structure the markup around
Drupal’s print statements for rendering page regions as defined in the .info
file.
Save page.tpl.php as page--front.tpl.php for a custom home page design.
•
CLAS Drupal
Optional files for creating a basic theme:
•
•
•
node.tpl.php from node modules folder in (modules/node/node.tpl.php)
Override the output of custom content types.
Control the display output of node--article.tpl.php or just use Views.
•
Or, to render some parts of the main node content in other areas of the node template.
CLAS Drupal
Optional files for creating a basic theme:
•
•
•
field.tpl.php from the field modules folder in (modules/field/theme/field.tpl.php)
Use this file to override the output of custom fields.
To override the image field output for the page content type, rename field.tpl.php to field-field_image--page.tpl.php.
•
•
•
Block.tpl.php from block modules folder in (modules/block/block.tpl.php).
Override the output of a blocks.
Rename the block file to block--blockname.tpl.php in the theme folder.
CLAS Drupal
What the theme folder looks like:
•
Fluid 960 grid - designinfluences.com/fluid960gs
•
Media queries can also be inline.
•
Ckeditor.styles.js - add custom object styles to
ckeditor.
•
Maintenance-page.tpl.php
-includes all available variables from page and
html tpl files which are unavailable when the site is
off-line.
•
.info file / base theme = fluid960
•
Template.php
Some functions that we run:
- Remove system menu css
- Unset width and height attributes on images (7.9)
- Remove (All Day) from date display
- Add IE edge meta tag
- Add viewport meta tag
- Conditional IE css
CLAS Drupal
Tools for a responsive Drupal site:
CSS
•Fluid 960 grid
- designinfluences.com/fluid960gs
•Meta viewport tag
•Media queries for device widths.
•Set a max-width of 100% for images, leave out width & height attributes.
•Tables: http://css-tricks.com/9096-responsive-data-tables/
•Device testing: http://mattkersley.com/responsive/
CLAS Drupal
Site set-up/configuration for users.
-Text formats
-Ckeditor configuration
Text formats – Filtered HTML
/admin/config/content/formats/filtered_html
Limit HTML tags to keep out old font tags, inline css, and MS generated inline styles.
CLAS Drupal
Ckeditor configuration.
-
Filtered HTML
Security
Correct faulty and chopped off HTML
Limit allowed HTML tags
Toolbar
Cleanup
and output
CLAS Drupal
Ckeditor configuration.
CSS options
Advanced Options:
In your css:
#themename-cke-body, .cke_panel_frame {
background:#fff !important;
}
CLAS Drupal
Ckeditor configuration.
Also in the CSS configuration - Ckeditor.styles.js
CLAS Drupal