XHTML/CSS Prototypes are a professional approach to solve client side display issues apart from content and application logic. This can be normally done by using static files. Since creating static files first and then converting the prototype into a Drupal Theme might work as well, it can make sense to integrate both steps with each other. This HowTo shows some settings and hints on how XHTML/CSS prototyping can be done directly in Drupal.

In general you need to enter XHTML content unfiltered for doing prototyping while using a CSS based theme like ZEN-CSS. In the standard setup Drupal filters output by adding additional XHTML Elements and removing others. This is unwanted in our case so that Drupal has to be configured to allow the user to input XHTML unfiltered.

Adding the AS-IS HTML Input format

This can be achieved by adding an Input format. This is how you can create a new Input Format named AS-IS HTML that will not filter the output any longer:

  1. Log in your site as administrator
  2. Navigate to Administer › Site configuration › Input formats
  3. Press Add input format
  4. You are now on a page entitled Add input format
  5. Enter AS-IS HTML in the Name textfield.
  6. Ensure that any checkbox remains unchecked in both frames Roles and Filters.
  7. Submit the Form by pressing the Save configuration Button.

Now a new Input Format should have been created. You should be redirected to the page Input format and in the new name should be listed.

Using unfiltered XHTML in Themes

This input format can now be used to output XHTML as needed through Drupal so that it can be used while creating a theme. You can use it with many content types and you can use it while adding blocks. The only thing you need to do is to allow the user which is doing the theme-work to use this filter.

Any User who is allowed to administer filters can use all filters directly, so therefore the administrator can directly. If you create a user only for XHTML/CSS-prototyping you should add this permission to the role.

Do the prototyping

Now the user who is doing the prototyping can create content and blocks with this filter and do the theming work. This should lead to a faster theme development while keeping things apart from development. Additionally this shortcut will help developers and themers to understand shortcomings.