The Theme Editor contributed module enables the administrator to edit the basic themes for the web site, delete a theme from the theme storage directory, rename a theme, and re-configure the storage directory.

Theme editor has a list, new, and configure tab. The list tab allows for editing, deletion, and renaming. The new tab allows for a theme to be copied to the theme storage directory for editing. The configure tab creates a sub-directory where theme files will be stored.

You can:

  1. administer theme editor at administer >> theme editor.
  2. add a new theme to the theme storage directory from administer >> theme editor >> new theme editor.
  3. file issues, read about known bugs, and download the latest version from the theme editor project page.

Drupal 7.x

Currently the -dev version has a combination of misleading UI and wrong documentation... This documentation section can be updated once the following issue is implemented:

"Theme Editor (D7) not working at all (unless you follow THESE steps)": http://drupal.org/node/1172232

Drupal 6.x

Coming very soon.

Drupal 4.x and 5.x

Installation

The installation is easy. There are two files that must be copied into the appropriate locations.

  1. Copy the theme_editor.module into the Drupal modules directory.
  2. Create a directory called "theme_editor" under the Drupal themes/engines/ directory.
  3. Copy the theme_editor_engine.engine file into the directory themes/engines/theme_editor.
  4. Activate the theme editor module from the modules list in: administer -> settings -> modules.
  5. Create, edit and delete themes under: administer -> theme editor.
  6. Set your theme editor path under the configure tab but the default works fine.

Theme Management

There are three tabs located under administer -> theme editor:

  1. List - This lists all of the themes you have created using the theme editor module. Initially, this will be empty.
  2. New - This is where you begin each theme. You choose one of the existing themes and the editor will copy required files to the theme editor directory.
  3. Configure - This is the theme editor storage directory, relative to the files directory.

Editing Themes

Under the list tab is where the actual editing of a theme begins. Each theme created will have three options:

  1. Edit - This will take you to the theme files list where you may edit each individual file, upload images, and create new files.
  2. Delete - This removes the selected theme. This can't be undone.
  3. Rename - By default, the themes you create will start with the theme name and append "_customized". Providing a new name is recommended.

Note

XTemplate: a patch is available for xtemplate.engine and is included with the theme editor module download. The patch corrects some minor issues with XTemplate.

Comments

hedinfoto’s picture

hedinfoto commented

This module is awesome! thank you, I have it on all the sites I manage now. The convenience of being able to just admin menu over and adjust or add a style is a huge convenience.

If you want the look of a black text editor add: "#edit-file-editor-wrapper .resizable-textarea #edit-file-editor { background: #000; color: #fff;}" to your css. This helps a lot on sites with white page backgrounds.

Vc Developer’s picture

Vc Developer commented

Just download your version 6. mod and I don't see this file "theme_editor_engine.engine"?

NeoPrince’s picture

NeoPrince commented

"Copy the theme_editor_engine.engine file into the directory themes/engines/theme_editor.

I just downloaded the module. The theme_editor_engine.engine is missing from the .tar. Can you please have look at it again??

NeoPrince’s picture

NeoPrince commented

The module can be installed and activated like any other custom module. Following are the steps.

1. Copy the files into sites/all/modules/theme_editor folder

2. Activate the module from Administer > Modules

Cheers.

rrrt’s picture

rrrt commented

It is written in section for Drupal 4.x and 5 : "This will take you to the theme files list where you may edit each individual file, upload images, and create new files. ", but I cannot find image upload tool in version for 6.x. Is it planed to add this feature for 6.x?

rrrt’s picture

rrrt commented

This module is a great help, but it's a pity that I could not upload images.

So I implemented "quick and dirty" solution.
1) added form for image upload
2) upload images in fixed subfolder 'images' of theme's root folder
3) in the list of images display all images, including images from subfolders of theme's root folder
4) display image path as "title" attribute and make images clickable to open an image in new window.

Here is diff result for file theme_editor/theme_editor.inc:

@@ -75,7 +75,8 @@ function theme_editor_editor($theme) {
 	$edit_form='<div class="theme_editor_form_wrap">'.$tabs.'<div id="theme_editor_file_editor_form" class="theme_editor_file_editor_form form_wrap">'.drupal_get_form('theme_editor_editor_form', $dir,$file).'</div><div class="theme_editor_file_backup_form form_wrap" id="theme_editor_file_backup_form">'.drupal_get_form('theme_editor_backup_form', $dir,$file).'</div></div>';
 	$newfile=(!user_access('Add New Files to themes') ? '':'<div id="new_file_form_wrap">'.drupal_get_form('theme_editor_new_file_form',$dir,$theme,$file).'</div>');
 	$delete = (!user_access('Delete files from themes') ? '' : '<div id="theme_editor_delete_form_wrap">'.drupal_get_form('theme_editor_delete_files_form',$dir,$file,$theme).'</div>');
-	$out = $head.$edit_form.'<div class="theme_editor_files_links"><div id="theme_editor_filelist_wrap">'.$out.'</div>'.$newfile.$delete.'</div>';
+	$newimg = (!user_access('Add New Image to themes') ? '':'<div id="new_img_form_wrap">'.drupal_get_form('theme_editor_new_image',$dir,$theme,$file).'</div>');
+	$out = $head.$edit_form.'<div class="theme_editor_files_links"><div id="theme_editor_filelist_wrap">'.$out.'</div>'.$newfile.$delete.$newimg.'</div>';
 	return $out;
 }
 
@@ -183,6 +184,79 @@ function theme_editor_new_file_form($for
 
 
 /**
+ *Form for adding images .
+ */
+function theme_editor_new_image($form_state, $directory, $theme, $file=NULL) {
+
+	$form['new_image']=array(
+	'#type' => 'fieldset',
+	  '#title' => t('Add New Image'),
+	  '#weight' => 5,
+	  '#collapsible' => TRUE,
+	  '#collapsed' => TRUE,
+	  '#tree' => FALSE,
+	);
+	
+	$form['new_image']['folder']=array(
+	'#type' => 'textfield',
+	  '#title' => t('Folder'),
+	  '#value' => 'images',
+	  '#maxlength' => 32,
+	  '#size' => 15,
+	  '#required'=>TRUE,
+	);
+	
+	$form['new_image']['imfile']=array(
+	    '#type' => 'file',
+	    '#title' => t('Image'),
+	    '#size' => 18,
+	    '#description' => t('Click "Browse..." to select an image to upload.')
+	);
+
+	$form['new_image']['create'] = array(
+	    '#type' => 'submit',
+	    '#value' => t('add image')
+	);
+
+	$form['#validate'][] = 'theme_editor_validate_picture';
+	$form['#attributes']['enctype'] = 'multipart/form-data';
+
+	$form['theme'] = array(
+	    '#type' => 'value',
+	    '#value' => $theme,
+	);
+	$form['dir'] = array(
+	    '#type'=>'value',
+	    '#value'=>$directory,
+	);
+
+	return $form;
+}
+
+function theme_editor_validate_picture(&$form, &$form_state) {
+	$validators = array(
+		'file_validate_is_image' => array(),
+		'file_validate_image_resolution' => array('250x250'),//TODO : change it
+		'file_validate_size' => array(30*1024),//TODO : change it
+	);
+	if ($file = file_save_upload('imfile', $validators)) {
+		error_log('Remove the old picture.');
+		$path='images';//TODO : subfolder of theme folder to store images to
+		$rpath=$_SERVER['DOCUMENT_ROOT'];
+		$source=$rpath.'/'.$file->filepath;
+		$dest=$rpath.'/'.$form_state['values']['dir'].'/'.$path.'/'.$file->filename;
+		if(@copy($source, $dest)){
+		    file_delete($file->filepath);
+		    drupal_set_message('File saved : '.$form_state['values']['dir'].'/'.$path.'/'.$file->filename);
+		}else{
+		    form_set_error('imfile','error uploading file');
+		}
+	}else{
+	    form_set_error('imfile','no file was uploaded');
+	}
+}
+
+/**
  * Theme Editor Form for Editing the files
  * 
  **/
@@ -629,7 +703,7 @@ if (!in_array('info',$excl) && user_acce
 	$files['Basic'] = file_scan_directory($dir,'\.((txt)|(htm)|(html))$',array('.', '..', 'CVS'), 0, false, 'filename', 0);
 	}
 	if (!in_array('img',$excl)) {
-	$files['Image'] = file_scan_directory($dir,'\.((png)|(jpg)|(jpeg)|(gif))$',array('.', '..', 'CVS'), 0, false, 'filename', 0);
+	$files['Image'] = file_scan_directory($dir,'\.((png)|(jpg)|(jpeg)|(gif))$',array('.', '..', 'CVS'), 0, true, 'filename', 0);
 	}
 	return $files;
 }
@@ -682,7 +756,9 @@ function theme_editor_build_file_tree($d
 	
 			$file_type=end(explode('.',$val->basename));
 			if ($key=='Other' || $key=='Image') {
-						$li ='<li class="theme_editor_filename unwriteable" ref="'.$type.'"><span class="'.$file_img[$file_type].'">'.$val->basename.'<br /><span class="file_ne">(Not Editable)</span></span></li>';
+			 $li ='<li class="theme_editor_filename unwriteable" ref="'.$type.'">'.
+			 '<a href="/'.$val->filename.'" title="'.$val->filename.'" target="_blank">'.$val->basename.'</a>'.
+			 '</li>';
 			}
 			else {
 				$file_type=end(explode('.',$val->basename));
sorrento123’s picture

sorrento123 commented

Hi,

Is there a screencast available of how this module works?

Alternatively are there any screenshots of the module in action?

The docs refer to the ability to delete a theme, can this be permission managed so that only authorised users can delete a theme?

Thanks!