Integrating MagicEdit into an existing CSS template

General web design discussion, including HTML, CSS, and JavaScript

Integrating MagicEdit into an existing CSS template

Postby bizmaven » Wed Apr 13, 2011 8:29 pm

If I purchase an existing templates from one of the many available online providers, is there a cheat sheet on how to update it to work with MagicEdit? or does it just "magically" work? Any CSS considerations I should be concerned about?
bizmaven
 
Posts: 9
Joined: Wed Apr 13, 2011 6:26 pm

Re: Integrating MagicEdit into an existing CSS template

Postby raw10 » Thu Apr 14, 2011 11:20 am

We should probably build a HowTo for this! One of the main problems with templates is that they are often just the home page (no interior pages), and all of the links in the home page are set to href="#".

Look for templates that have more than one kind of page. At least a home page and one interior page. Before adding any MagicEdit tags, go through the site and create all of your pages and link them up from the home page. If you have repeated pages or blocks (news items, services, products, etc.), create one (static) instance of each page, and link it up from your navigation. Make sure that all of the text everywhere makes sense, too. We like to use descriptive things like, "Type the body of your news item here," and "News Item Title" instead of just Lorem Ipsum, but you can use that, too.

Once the site is fully working as a static site (no more href="#" links anywhere), you are ready to start adding your MagicEdit elements.

First identify all of the editable text regions and add <magicedit> tags around them. Then, do the same for images, only you add the magicedit attribute to the image instead of wrapping the image with the tags. You can test out editing and swapping out images at this point.

Once the text and image editing is working, you're ready to add your repeated regions, so find all the links to repeated pages and wrap the links with MagicRepeat tags. Of course, test it out and make sure that you can add, reorder, and delete repeat instances.

Finally, find any forms you want to make "live." In general, the simplest thing to do is just use something like this:

Code: Select all
<form id="theForm" me_email="myEmailAddress@myDomain.com" me_page="thanks.html">
  ... form fields ...
</form>


MagicEdit will create a custom action that hides your email address and sends the user to "thanks.html" when the form is submitted (make sure to create the "thanks.html" page, too!).

That's pretty much it! The site is now ready for real content that can be added from the browser.
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Re: Integrating MagicEdit into an existing CSS template

Postby bizmaven » Wed Apr 20, 2011 7:42 pm

Thanks!! And yes, a how-to would be great!!
bizmaven
 
Posts: 9
Joined: Wed Apr 13, 2011 6:26 pm


Return to Web Design

Who is online

Users browsing this forum: No registered users and 1 guest

cron