Facebook Pixel

Better Template Editing in ExpressionEngine

Here at BlackBeltDesigns, we almost solely use ExpressionEngine (EE). EE is a great CMS built on top of CodeIgniter with much of the foundation already built for you in regards to security, template usage, re-usability, etc.. Another great aspect of EE is the community of developers and contributors to the tools available.

By default, the template editing from within EE’s control panel lacks a little in the form of readability. Most developers have their own preferences when it comes to editors and IDE’s, (Integrated Development Environment), and there are a few options when it comes to EE on how you can achieve your desired look and feel to be more comfortable and efficient while creating and editing templates. If you would prefer to save your templates as files somewhere on your server, this is an option that EE provides. If you do this, you will need to create a location on your server and set the path in the Global Template Preferences under ‘Server path to site’s templates’. You will also need to make sure you keep your template files in sync with your files on the server since you will be editing locally and using some form of FTP (File Transfer Protocol) to maintain these files. For those who wish to bypass this process, there are a few tools available to make creating and editing template files inside EE’s control panel easier.

One of these tools is ThEEditorCodeMirror by Anthony W. Rainer. Anthony provides this add-on free of charge. ThEEditorCodeMirror uses CodeMirror for better visibility and syntax highlighting and allows you to load pre-existing themes which are packaged with it. See the difference in the images below. The first is the default template editing environment, and the second is the same environment using ThEEditorCodeMirror and a Rubyblue theme.

Default template environment.
ThEEditorCodeMirror with Rubyblue theme.

But what if I don’t see a theme in the list that suits me?

If you don’t find a theme to your liking in the list, take a look at the entire list of available themes for CodeMirror here. (You can download the CSS files from the repo located here.)

You will need to make a slight modification to the theme CSS in order to use it with ThEEditorCodeMirror. To illustrate what you need to do, we will use Blackboard. Most themes will have a line like the following which will specify the CodeMirror window:

.cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; }

In order to use the other themes such as Blackboard, you must remove the secondary class specification of ‘.CodeMirror’ on the combined class styles. This would make the above line as follows:

.cm-s-blackboard { background: #0C1021; color: #F8F8F8; }

This theme is now capable of being loaded in ThEEditorCodeMirror and used in the EE control panel. You just need to copy the file into your themes folder for CodeMirror. This folder is located inside the assets folder you add when installing ThEEditorCodeMirror. From your root folder it will be: ‘\assets\codemirror\theme\’. Once placed in the proper location, you will see the theme in your drop down list for themes.

How can I make my own themes?

If you still aren’t satisfied with that, you can always copy a working theme out, rename it, and edit to your heart’s desire. However, if you would like to make that easy as well, check out our great tool on CodePen. Just copy the CSS, save it as BBD.css, and drop it in your theme folder as mentioned above. You can also modify the CSS directly on that page and play with your own theme.

Share this post

Comments

comments powered by Disqus