Nicolasbottari.com

Decorate your custom field labels in ExpressionEngine


Here's something I noticed that could come in very handy in some situations when building ExpressionEngine sites.

Did you know that you can add some HTML to your custom field labels? For example, in your custom field manager (Admin => Channel Administration => Custom Fields), you can italicize words in your field label like so:

Main text - <em>lower section</em>

In your entry form, your entry field will look like this:

You can also change the color of the label like this:

<span style='color: red'>Important field</span>

...with the following result:

Images can also be used. This can be useful in multilingual sites to show the language of each field. For example, I use the famfamfam country flag icon set, and add the following in the Field label field:

<img src='/img/flags/jp.png' _cke_saved_src='/img/flags/jp.png' /> Body - 日本語

This makes it more obvious that this field should be written in Japanese:

Mix in the great NSM Publish hints addon, and create an instructions field with a logo.

NOTE: Writing double quotes (") in the field label seems to cause problems with certain javascript scripts and may stop some fieldtype addons from working correctly. Single quotes ('), however, seem to have no effect. This seems to be the case for "quoted" words as well, even without any HTML in the field label.

Unfortunately, the field label field has limited space (50 characters), so it's best to keep the HTML code, and field label, short.

Need more space, you say? Well, there's an addon coming soon that should help add more kyara-cters to a number of fields in EE.