Theme Drupal via Zen theme & CSS Injector w/ image support via IMCE

We want to be able to, at least during development, allow an artist/designer/user to develop the theme CSS for a site as well as upload images for use with the CSS. Via a Zen sub theme with the CSS Injector and IMCE module we allow a designer or other user to theme a Drupal site without having other upload capabilities outside of Drupal. When the theming is done we wrap both the CSS from CSS injector and the images uploaded via IMCE into a final Zen sub theme.

The set up:

  • Set up a new Zen sub theme
  • Install and enable CSS Injector module Other >> CSS injector
  • Install and enable IMCE module Other >> IMCE
  • @ admin/user/roles add a new role: Site Editor
  • @ admin/settings/imce
    • under Directory creation tool @ settings/imce/subdirectory create a css directory. Do NOT call it "css".
    • under Configuration profiles:
      • set upload sizes etc
      • edit “sample profile” rename it to "Site Editor Profile"
      • set the Directories to css, all options and NO subdirectories
    • under Role-profile assignments: Site Editor select Site Editor Profile
  • @ admin/build/block
    • added a block: an HTML link to IMCE for use w/ CSS Injector

      >> CSS image browser << Note: images for use with CSS are inside the ./imce_css/ directory relative to the css file & are addressed as css/image.jpg.

      • Role specific visibility settings: only Site Editor
      • Page specific visibility settings: only on admin/settings/css_injector
  • @ admin/user/permissions Edit permissions for Site Editor
    • admin_menu module: access administration menu
    • css_injector module: administer css injection
    • node module: access content
    • system module: access administration page
    • system module: select different theme

After CSS styling is complete:

  • integrate theme elements into the theme file
    • move the the entire from css directory into your theme directory
    • copy the css from the CSS Injector module into the theme style sheet
  • disable CSS Injector module
  • disable IMCE module (if not used elsewhere)
  • remove Site Editor role from users

Notable Notes:

  • Do not call your IMCE directories "css" or "html" as these are reserved names in the /sites/example-url/file directories. Not really documented, I found it by experience.

Comments

ref: Internet Explorer 6 issues IE6

http://crownedup.com/using_Zen_theme_How-To_Drupal#comment-19

Post new comment

  • Allowed HTML tags: <a> <em> <i> <u> <b> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options