html5

Custom theming: Add html5 placeholder attribute to a webform component in theme

You can add an html5 placeholder attribute in your theme using a preprocess hook. Here's an example for an email component:

<?php
function THEMENAME_preprocess_webform_email(&$variables) {
 
$variables['element']['#attributes']['placeholder'] = t('Email Address');
}
?>

SCSS Settings

@TODO

The placeholder page for Zurb Foundation 7.x documentation and will contain general information about SCSS settings.

  • _base.scss
  • _settings.scss
  • app.scss

See:

http://drupal.org/node/1902848

How to Build a Drupal 7 HTML5 Video Subtitling/Closed-captioning System

Overview

Why might you want to close-caption or subtitle video content on your site? Well, one reason for subtitling is to provide fully functional internationalization/localization capabilities. One of the many reasons Drupal is the CMS of choice is because of its robust multilingual support. If you are posting multilingual text content on your site, multilingual support can and should extend to all content, including video, through the use of subtitles.

Many visitors to your site—regardless of whether or not your content is internationalized—may use a screen reader or require the use of text captions where audio is used within video to convey information. It is therefore a reasonable accessibility accommodation in many cases to provide closed captions where video is an essential component of your site.

A third use case involves a site where video is used to demonstrate a process in detail, but where audio description is too expensive, time consuming, or creates significant localization challenges. I have a site where I have hundreds of separate videos, all with stepwise descriptions for completing maintenance or troubleshooting procedures. I needed the non-technical end-user to be able to upload the video and add subtitle text in the node edit page.

Read more

Details

Problem

Pages with a lot of form elements without grouping and hierarchy are confusing and hard to use and get used to. Some form elements are not important enough to see all the time.

Solution

Group related form elements with a detail.
A detail is placed around these form elements. Depending on the browser, a detail will be collapsible.

Use when

  • There are a lot of form elements which need to be grouped logically
  • There are very different form elements on a page
  • There are very similar form elements, but with a distinctive difference

Recommendations

  • Don't put a detail around the main (first) interaction on the page if there is one
  • Keep the label short and concrete
  • detail contents should stay within 1 page scroll
  • Avoid nested details, it disorients the user
  • Position default-collapsed details below expanded ones
  • If a detail is collapsible, the default state should be collapsed (if it's that important to show its content initially, don't make it collapsible)

When to use Fieldsets over Details

  • When they are semantically related like a date field with year, month, day, time.

API

Read more

Omega 3.x

The following pages only apply to the 3.x version of Omega.

The following pages will explain what Omega 3.x is, how it works and outline established best practices for getting started with your own Omega based subtheme. Please start at the beginning as Omega's approach to theming is different than other themes. If you assume too much you may find complications in understanding how to use Omega. Looking for Omega 4.x documentation? Go here.

If you are just getting started using Omega, please do yourself a favor; follow the logical progression of this handbook. Start here means start here. If you skip ahead assuming too much you will likely encounter complications that you could have avoided by understanding the basics from the beginning. Each page below is a distinct concept and they are intentionally ordered in such a way as to walk the user through getting started to being fully informed as quickly and thoroughly as possible.


Drupalize.Me offers a free video overview of Omega 3.x... Omega 3.x Overview

Omega 4.x

Omega 4.x documentation

Please be patient. Documentation for 4.x will be added as development on the 4.x version continues. Join us in IRC #drupal-omega to express your interest in participating. All are welcome.


Be aware that the 4.x version has no final release, yet. Documentation will likely be scarce until we are closer to a stable release.



Should I use 3.x or 4.x?

Q: Are you new to Drupal?
A: If you answered yes, then use 3.x. It has a stable release, is fully documented and there is a ton of community support available to help you if you have issues.

Q: Are you an expert? Q: Do you like experimental code?
A: If you answered yes and you want to play with the new code then go ahead and give 4.x a spin. The assumption here is that you are aware there is no stable 4.x release. With that in mind, go for it and by all means create issues so we can work to make 4.x ready for prime-time.


This issue is a good description of the changes in 4.x

Subscribe with RSS Syndicate content
nobody click here