Drupal 7 Multi-site Instance with Clone, base and sub Responsive Themes using CSS and jquery

Drupal 7 Multi-site Instance with Clone, base and sub Responsive Themes using CSS and jquery By Diana Woodhouse Student Affairs IT October 2012

Introduction Student Affairs IT (SAIT) A relatively small group of generalists with limited resources and growing demands Operations and Systems 6 staff and 1 part-time contractor Applications and Websites 2 staff and 1 part time contractor Supports 12 departments in Student Affairs The Applications and Websites group supports: 28 websites (Joomla, Drupal 6, Drupal 7) 29 custom applications including some enterprise portals 17 PHP applications 5 Java applications 7 ColdFusion applications DBA needs for access to PeopleSoft Integration with at least 8 third party applications My team includes: Charles Streeter Senior DBA and ColdFusion expert Barb Baranksi Drupal Contractor, TekSystems

Mitigating the Challenge of Limited Resources Identify outside resources (including ITS) while maintaining a cohesive development environment and strategy. Examples: Website Design outsourced Web.unc.edu for student organizations SharePoint to replace intranets and more Part-time Drupal contractors to bring in outside expertise while working with us in-house ITS ResNet support for new StarRez system in Housing ITS Remedy help ticket support Support legacy systems while transitioning to newer platforms and emerging technologies Weigh benefits / costs of major enhancements to older systems Invest time in improved systems Re-evaluate and consolidate applications and websites Spend extra time up front for higher customer satisfaction and lower maintenance costs over time by Streamlining methodologies Architecting generalized scalable solutions Following good practices Transfer Knowledge Talk to others about what we re doing Share the technology Collaborate Document

Website Development Strategy

Principles of Cohesion and Coupling In software development, the principles of cohesion and coupling are very important. Functions and modules should be highly cohesive and exhibit low coupling High Cohesion o Understandable as a meaningful unit o Components are closely related to each other Low Coupling o Low interactions with other units o Understandably separate from other units o Separation of concerns Coupling is a major obstacle to change. If two components are strongly coupled, then it is likely that changing one will not work without changing the other. Low cohesion and high coupling leads to high maintenance and high costs. Solutions should be general enough to anticipate change and be free from unnatural restrictions and limitations. The same principles can be applied to many business needs such as a content management architecture, theme development and even organizational structures.

The Directive 2012 strategy for website development in Student Affairs 1. All new websites will be developed in Drupal 7 Our contractor had first hand experience with the newer release and made the recommendation Weighed benefits / costs of staying with older Drupal 6 environment Opportunity to invest time in an improved system as well as replace and consolidate websites 2. All new websites will be based on a Clone site for faster deployment Opportunity to develop a streamlined methodology, architect a scalable solution, and follow good practices from the very beginning Opportunity to invest time in an improved system for higher customer satisfaction and lower maintenance costs over time 3. All new websites will be based on a common Adaptive / Responsive theme to support mobile devices Our previous contractor suggested it, provided a basic proof of concept and shared resource material of coding examples Even before our departments asked for it, we anticipated they would want, need and even expect it This solution would be free from unnatural restrictions and limitations The clone site architecture and the responsive theme architecture would also be built on the principles of high cohesion and low coupling.

Deployed new websites for Website Progress Accessibility Resources & Service Office of Student Conduct Websites ready and waiting for completed content Dean of Students LGBTQ Carolina Union Other Drupal 7 Responsive website work targeted for this year Digital Signage New design and architecture Phase Two of Carolina Union Student Affairs IT Office of Fraternity and Sorority Life and Community Involvement Campus Health Career Services We anticipate that we will have launched about 10 Responsive websites by Spring 2013 Our responsive methodology will also be used in future custom applications as needed Example, the new Chancellor s Awards website is a simple PHP application that was a test case for our responsive UNC utility bar, and base-theme HTML, CSS and jquery

Drupal 7 Adaptive Clone Site

Drupal 7 Useful Common Modules AIS adaptive for adaptive/responsive images drush -command line sys admin Blocks (core) Field UI (core version of CCK fields) Taxonomy (core) Submenu trees child menu teasers jcarousel Views, Draggableviews, Panels, Contexts Webform Conditional Stylesheets Redirect Statistics Flexslider for adaptive/responsive slideshows Aggregator (core) Contextual Links (core) PHP filter (core) Superfish menus for drop downs Linkit link to internal content Full Calendar Menu and Custom Breadcrumbs Ldap Menu block Rules CKEditor

Defining the Regions Map out all common regions Nest regions inside wrappers if multiple columns are optional or if regions need to adapt together Minimize wrappers where floats can be used Use common meaningful names Use consistent naming convention

Click image to zoom

Click image to zoom

Click image to zoom

Other Good Practices for CMS Architecture Always clone contributed module views so you can easily reference or revert to original Keep custom blocks and views general purpose in function and in name and then create child blocks and pages for site-specific needs Add CSS styles to blocks and views and provide CSS to support them in advance Avoid using fixed block and view names in CSS Qualify exception CSS styles for common fields with the block / view style name, so as not to conflict with other pages Prefix block names with Menu - <menu block name> for example so you can see them altogether in a listing Create separate styles sheets for sections that adapt differently or for sections that overwrite specific module stylesheets, like features.css, menus.css, news.css, events.css for example

Adaptive / Responsive Theming

Some Things to Know <!DOCTYPE html> - for html5 iphone requires <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> Avoid fixed widths. Use width 100% for images. Floats always need widths IE doesn t support @media min-width and max-width Trouble shoot jquery with Chrome, Inspect Element, Console

Adaptive Tools Chrome Inspect Element Firefox and Safari Firebug IE Developer Tools jquery Inspect Console Other add-ons like Responsive, Ruler Modernizer (yep and nope pixel widths must be accompanied by CSS)

Theming in Drupal Base theme provides basic adaptive regions and is design independent Sub-themes like Student Affairs and Union build on the base adaptive theme, providing specific design elements Site-specific theme of Student Affairs allows department specific customization of the same theme using additonal CSS and jquery to columnize the main navigation at the right pixel width

Sub-Theming in Drupal Some things are inherited and some aren t CSS files are inherited and cascade so local CSS attributes take precedence Things that are not inherited Conditional stylesheets for IE jquery Regions in Info file Template files like html.tpl.php and page.tpl.php Sub-themes will call jquery additional times if it is referenced in one place in the parent theme and another place in the sub-theme

Sample Content.info File name = Student Affairs - Clone description = Clone sub-theme of Student Affairs Theme base theme = studentaffairs package = Core version = VERSION core = 7.x engine = phptemplate stylesheets[all][] = css/style_clone.css stylesheets[all][] = css/feature_clone.css stylesheets[all][] = css/menus_clone.css ; Conditional Stylesheets stylesheets-conditional[lt IE 10][all][] = css/ie.css stylesheets-conditional[lt IE 10][all][] = css/ie_sa.css stylesheets-conditional[lt IE 10][all][] = css/ie_clone_sa.css scripts[] = js/jquery.admin-menu-clear.js scripts[] = js/jquery.main-nav-menu-listsplitter.js regions[sidebar_first] = Left sidebar regions[sidebar_second] = Right sidebar regions[masthead_top] = Masthead Top regions[masthead_main] = Masthead Main

Sample Content of page.tpl.php File <div id="page-wrapper"> <?php if ($page['alerts']) :?> <?php print render($page['alerts']);?> <?php endif;?> <?php if ($page['masthead_top']) :?> <?php print render($page['masthead_top']);?> <?php endif;?> <div class="master-small"> <div id="masthead-wrapper"> <?php if ($page['secondary_menu']) :?> <div class="secondary-menu-wrapper"> <?php print render($page['secondary_menu']);?> </div> <!-- secondary-menu-wrapper --> <?php endif;?>

Example Template File Override block-views-feature-slide_show-block_2.tpl.php <div id="<?php print $block_html_id;?>" class="<?php print $classes;?>"<?php print $attributes;?>> <?php print render($title_prefix);?> <?php if ($block->subject):?> <h2<?php print $title_attributes;?>><?php print $block->subject?></h2> <?php endif;?> <?php print render($title_suffix);?> <div class="content"<?php print $content_attributes;?>> <?php $content = str_replace("<div class=\"views-field views-field-term-node-tid\">", "<div class=\"fteaser\"><div class=\"views-field views-field-term-node-tid\">", $content); $content = str_replace("<div class=\"views-field views-field-field-news-feature-image-1\">", "</div><div class=\"views-field views-field-field-news-feature-image-1\">", $content);?> <?php print $content?> </div> </div>

Sample jquery Printer Friendly Links jquery(function() { /* Printer Friendly Links */ if(jquery('.pane-node-links').length > 0) { if(jquery('.pane-node-webform').length > 0) { jquery('.pane-node-links ul.links').detach(); } else { // Move PF Links to the bottom after node content jquery('.pane-node-links ul.links').detach().appendto('.pane-node- } body'); } // if.pane-node-links });

Sample jquery Front News jquery(function() { if(jquery('.front-news').length > 0) { jquery('.front-news.view-content.views-row').each(function (index, domeele) { var item = index + 1; jquery('.front-news.view-content.views-row-' + item + '.views-field-fieldimage-news').after('<div class="news-teaser nteaser-' + item + '"></div>'); jquery('.front-news.view-content.views-row-' + item + ' div.views-fieldtitle').detach().appendto('.nteaser-' + item); jquery('.front-news.view-content.views-row-' + item + ' div.views-fieldbody').detach().appendto('.nteaser-' + item); jquery('.front-news.view-content.views-row-' + item + ' div.views-field-viewnode').detach().appendto('.nteaser-' + item); jquery('.front-news.view-content.views-row-' + item + '.nteaser-' + item).after('<span class="wl-clear"></span>'); }); } // if.front-news });

Sample jquery Mouse Events jquery(function() { if(jquery('.hover-orange').length > 0) { /* Menu Level 3 */ jquery('.hover-orange li').mouseenter ( function() { jquery(this).addclass('bg-hover-orange'); jquery('.hover-orange li.bg-hover-orange a').addclass('orange-text'); }); jquery('.hover-orange li').mouseover ( function() { jquery(this).addclass('bg-hover-orange'); jquery('.hover-orange li.bg-hover-orange a').addclass('orange-text'); }); jquery('.hover-orange li').mouseout ( function() { jquery(this).removeclass('bg-hover-orange'); jquery('.hover-orange li a').removeclass('orange-text'); }); } // if.hover-orange });

Example Media Tags in CSS // iphone for styles that work for portait and landscape @media screen and (max-width:500px) { // iphone portrait, Safari and Chrome @media screen and (max-width:460px) and (-webkit-min-device-pixel-ratio:0) { // iphone landscape, Safari and Chrome @media screen and (min-width: 461px) and (max-width:500px) and (-webkitmin-device-pixel-ratio:0) { // media tags for style_union.css @media screen and (min-width: 501px) and (max-width: 600px) { @media screen and (min-width: 601px) and (max-width: 760px) { @media screen and (min-width: 761px) and (max-width: 960px) { @media screen and (min-width: 961px) and (max-width: 992px) { @media screen and (min-width: 993px) and (max-width: 1032px) { @media screen and (min-width: 1033px) and (max-width: 1087px) { @media screen and (min-width: 1088px) and (max-width: 1200px) { @media screen and (min-width: 1201px) and (max-width: 3000px) {

Sample Content from menu_union.css @media (max-width:500px) {.main-nav-wrapper { background-color: #bce3ec; background-image: none; box-shadow: none; }.secondary-right { display: none; }

Example CSS for Safari and Chrome Only IE is supported in Conditional Stylesheets so Safari and Chrome needs the media tag in the CSS file. @media screen and (max-width:500px) and (-webkit-min-device-pixel-ratio:0) {.secondary-menu { width: auto; font-size: 80%; } }.secondary-menu a { /* font-size: 108%; */ font-size: 80%; color: #666666; text-transform: uppercase; text-decoration: none; font-weight: bold; height: 20px; }

Sample Regular Expression in CSS Use regular expressions for style names that are dynamic, such as columnized containers created by jquery.main-nav-columns div[class^=listcontainer] li { background-color: #FFF; background-image: url(../images/bg-navshadow.png); } background-position: 0 13px; background-repeat: repeat-x;

Adaptive UNC Utility Bar Documentation http://dsait.unc.edu/docs/adaptive-uncbar.pptx

Drupal 7 Multi-Site Instance

Drupal 7 Multi-Site Directory Structure docroot modules sites all site1.unc.edu site2.devserver.unc.edu modules themes themes uncsa_base site2_sa studentaffairs union

Drupal 7 Requirements See to http://drupal.org/requirements MySQL 5.0.15 or higher with PDO, PostgreSQL 8.3 or higher with PDO, SQLLite 3.3.7 or higher PHP 5.2.5 or higher (5.3 recommended) 15 MB for base install 60 MB with many contributed modules and themes (not counting db content, media, backups and other files)

Sample Mac OS Apache Config Snippet Virtual Host Consult http://drupal.org for OS specific configuration. You will need a Virtual DNS entry for each site. Example file: /etc/apache2/sites/0011_152.2.216.117_80_accessibility.unc.edu.conf <VirtualHost 152.2.216.117:80> ServerName accessibility.unc.edu:80 ServerAdmin admin@example.com DocumentRoot "/Library/WebServer/Documents/drupal7" DirectoryIndex "index.html" "index.php" #CustomLog "/var/log/apache2/access_log" "%h %l %u %t \"%r\" %>s %b" CustomLog ' /usr/sbin/rotatelogs "/var/log/apache2/accessibility_access_log" 604800-300' "%h %l %u %t \"%r\" %>s %b" ErrorLog ' /usr/sbin/rotatelogs "/var/log/apache2/accessibility error_log" 604800-300' ErrorDocument 404 /error.html

Sample Mac OS Apache Config Snippet Rewrite Rules Example rules needed for Drupal 7. Additional rules for the adaptive module AIS are added here instead of to the.htaccess file In file: /etc/apache2/sites/0011_152.2.216.117_80_accessibility.unc.edu.conf RewriteEngine On RewriteCond %{REQUEST_FILENAME}!-f RewriteCond %{REQUEST_FILENAME}!-d RewriteRule ^(.*)$ index.php?q=$1 [L,QSA] AllowOverride None # AIS: Adaptive Image Style RewriteBase / RewriteCond %{REQUEST_URI} ^(.+)/files/styles/adaptive/(.+)$ RewriteCond %{REQUEST_URI}!/modules/image/sample.png RewriteCond %{HTTP_COOKIE} ais=([a-z0-9-_]+) RewriteRule ^(.+)/files/styles/adaptive/(.+)$ $1/files/styles/%1/$2 [R=302,L]

Drupal Cron Job Cron jobs are needed for all Drupal sites. They can be staggered like this. > crontab -l 0 01 * * * /usr/bin/curl -s --compressed http://accessibility.unc.edu/cron.php 0 02 * * * /usr/bin/curl -s --compressed http://union.pixie.ovcsa.unc.edu/cron.php 0 03 * * * /usr/bin/curl -s --compressed http://dos.pixie.ovcsa.unc.edu/cron.php 0 04 * * * /usr/bin/curl -s --compressed http://lgbtq.pixie.ovcsa.unc.edu/cron.php 0 06 * * * /usr/bin/curl -s --compressed http://test.pixie.ovcsa.unc.edu/cron.php 0 07 * * * /usr/bin/curl -s --compressed http://studentconduct.unc.edu/cron.php

Drupal 7 Multi-site Pros / Cons All Drupal sites require file system access for advanced theming and module development. The Pros and Cons on this page are contrasting a single site vs multi-site instance. Pros One Drupal instance for centralized support Common modules and updates Shared themes Common / smaller backups Cons Requires access to Apache config files vs.htaccess Site folder name must match domain name which requires site directory migration and some internal path name changes for deployment Breaking a common module or themes breaks on all sites so verification of sites are needed after updates.

Contact Information Diana Woodhouse woodhous@email.unc.edu