This tutorial is a supplement to our larger tutorial “How to Make a Pagelime Site with SiteGrinder 3, you can see the full tutorial here. However, this tutorial is not SiteGrinder specific and can be used by anyone who wants to learn how to manually add editable classes through Pagelime.

Ok, so you’ve just published a really SWEET website from Photoshop using SiteGrinder and you REALLY want to manage it with Pagelime, BUT, you forgot to add the CSS “editable” class tag to a region, in this case, an image, and you want to be able to edit this image using Pagelime. Have no fear, for Pagelime can solve all of your problems (as usual). Let’s take a look at how this can be done in just a couple of steps.

Our sweet page, sadly, the image isn't editable!

1. Navigate to the page with the region you want to make editable within PageLime.
2. Open the “Page Tools” drop down menu on the top right of the Pagelime navigation/edit bar. Click on “edit code.” This will take you to a new page, showing the raw HTML of your site.
   

   Click the "Page Tools" drop down to get to "edit code"

3. In the box with your colored HTML, scroll down to the location of the image (or other tag) you want to change from un-editable to editable.
4. Inside the <img> tag (or other tag, <p> <span> <div> etc…), if it does not already have a class= section, create a new section for class= and add editable as a class tag. (If the element already has a class tag with a class defined, simply put a space after the defined class and then add in editable.) Make sure the element you’ve added the editable class too, also has a unique id. This is important because Pagelime needs to be able to identify which area it’s editing. If you do not see an id="IDNAMEHERE" then add an id tag with a unique name. The id name should not be used as an id name anywhere else on the page, and cannot have any spaces. Your final mark-up should look something like this:<img id=”myImage” class=”editable” src=www.pagelime.com/myImage.gif alt=”imagedescriptionGoesHere” />

   

5. Once you’ve done that, click “upload page” and the once uneditable area now becomes editable!

To get started with SiteGrinder, download the demo today!
This tutorial was brought to you by the Pagelime team in conjunction with the really cool dudes over at SiteGrinder/Media Lab. This article was co-authored by Adam Dexter and Awesome-Intern Tyler Shambora.

Tags: cms-editable, css, sitegrinder, sitegrinder 3

This entry was posted on Monday, May 3rd, 2010 at 9:00 am and is filed under Pagelime 101. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.