Essential Tools

While many of the html elements in your Drupal site will be recognizable as standard (body, header, menu-bar, etc.), many more are generated by Drupal that may have id or class names that are incomprehensible (block-block-menu-block, region-page-top, etc.). You will need to determine the names and classes of these elements to write the css rules that will achieve your results.

Two tools used by web developers are listed below. Each reads a selected part of a page and shows the underlying html structure in a separate dashboard. Using both tools can be helpful as they interpret Drupal’s html in a slightly different way. An element you are targeting may be easier to distinguish in one tool or the other.

  1. Firebug for Firefox;
  2. DevTools for Chrome.

Finally, do not despair! Drupal, and MIT’s instance of it, can be baffling and non-intuitive, but keep slogging away and you’ll achieve success!