Inline editing allows your users to simply click a section of the page and start editing which is great, but how do they know where they can click? By default, EditLive! displays a border and a pencil icon when the user mouses over the editable area which is nice if you want to precisely mimic the final view of the page, but we can easily make them more obvious with some simple CSS.

First up, the most important indication that an area is editable is having the cursor change to the I-beam like it does over text fields. The CSS cursor property lets us do that, so let's start by defining a class for our DIVs and added the cursor property:

.editable {
  cursor: text;
}

That's good, but the user still has to actually mouse over the section to discover it's editable. To fix that, let's make the DIV look like a text field by adding a border. The look matches a Windows text field, but it should be generic enough to be recognizable on any platform and subtle enough that it should fit in well with most site designs. Now we have:

.editable {
  cursor: text;
  border-top: 1px solid rgb(171, 173, 179);
  border-left: 1px solid rgb(226, 227, 234);
  border-bottom: 1px solid rgb(227, 233, 239);
  border-right: 1px solid rgb(219, 223, 230);
}

The end result looks and behaves just like a text area:

Since the area now looks editable by default, we'll finish up turn off the default styles that EditLive! adds using the disableObviousEditableSections() function:

editlive.disableObviousEditableSections();

That's all there is to it.

This entry is filed under Inline Editing. You can follow any responses to this entry through the Atom feed. You can leave a response, or trackback from your own site.