Candy Edit example page
Getting started
Let's see if the basics are working
- The example page can be seen here as a normal user would see it.
- Here it is being edited. Password is "secret"
- If the .htaccess protection is working then clicking here should give an error such as Access forbidden!
- You should already have downloaded the Programmer's guide to your local system
About the example
You may want to look at the HTML code. There's nothing complicated, just a few
class=ed additions in suitable places
- Only part of the top basic information can be edited.
This is a <SPAN>.
The ethos of CE is to give the user only enough scope for to We have chosen
to only allow part of the information to be editable.
- Note that an alert message has been hidden class=edx.
Editing this will automatically make it live.
Delete will hide it.
The user could have multiple alerts by adding
- What's on
Maintaining this sort of list is a common requirement.
Delete the 'top' one and add below on the bottom. Job done!
- Editing the league table is straight-forward.
Nesting inside DIVs
As there is no way to clone IMG or A tags by themselves you'd wrap them in DIVs if what you
want is to allow the user to add a variable list of these things.
Notices are <DIV> which have <A>
links to reference documents contained in them.
- News items are <DIV>s that float left. Try adding two or three.
When a DIV is cloned which contains editable content the whole thing is cloned,
but when a pure text DIV is cloned the contents are cleared out automatically.
As with the Notices this contains a sub-item (heading) which is edited
in its own right.
- Photos in this design provision has been made for exactly two photos.
(See the note about wrapping in DIVs above to allow a variable number.)
The images have both got a width=250 hard-coded.
This illustrates a bit of a problem that might happen
when users upload weird photos. Some restrictions are required because
they will typically try to upload pictures straight from a camera which may be
many hundreds of pixels in each dimension. You can't fix or limit both dimensions either
in the HTML or CSS!
- The 'last edited' in the bottom right is a simple <SPAN>
- The final DIV shows a way that the user can make hidden notes.
The procedure is to edit the DIV then 'delete' it which has the effect of hiding it.
This sort of thing is probably too complicated for most users.