You can also use this code to reformat existing content items so they have a blue header with a faded background, similar to what you see on the IAAP Web Community home page.
But first, let's demonstrate exactly how this code is used when creating a NEW content item:
For this example, we will be adding a new content item called "Custom Content 2" within our "Home" folder, which will display the new content item on our home page.
Start by accessing your Navigation controls and highlighting the Home folder. You should see a list of content items to the right which outlines what content is currently available on your home page.
To create the new content item, select "New" under the "Content" side of the page.
You will then be taken to the "Enter/Edit Content" screen. Type in the title of the content item (whatever helps you identify it best) but uncheck the "Show?" option because we will actually be displaying the title within the HTML code. You can also choose which section of the page you'd like the content item to appear (See the Page Layout tutorial if you're unsure how to manipulate where content items appear on a page.)
Scroll to the bottom of the page editor. By default, the "Design" view is selected. We need to change to HTML.
After you have switched to HTML mode, copy the code at the top of this page and paste it into the content area:
Switch back to "Design" mode and you will see the new container and the dummy text within it.
You can now edit the title of the content item and the text within it using the normal editing options. You can insert photos, graphics, text, etc. as you normally would. Save the content item to finish.
Reformatting a content item that already exists
If you want to place content that already exists on your site in a custom container, you will need to do a little more with HTML, but it mostly involves cutting and pasting.
First, open the content item you would like to place in a container.
You should see your current content in the page editor.
Switch to HTML mode as we did above so that we can see our current HTML code. For a simple block of text like this, you may only see a few <p> and </p> tags. For a more complex content item, you may see a lot of confusing HTML code that doesn't make any sense. Don't worry.
Before you go any further, copy all of your original HTML code and paste it into a text editor like Notepad. This will save you major headaches if you mess up and need to simply restore the original content. Do NOT use Microsoft Word or any similar word processing program. You want a plain text editor that will not add any unwanted formatting.
Once you've copied the original code to a text document, paste the NEW custom container code ABOVE the code that is already there. It will look like this:
The next step is to cut and paste the old HTML code within the <div class="HLContainer"> and the first of the three closing </div> tags.
Highlight and cut all of the old HTML (CTRL-X or right-click and choose "Cut").
Once you've cut the old HTML, highlight all three of the dummy paragraphs including the <p> and </p> tags.
Paste the HTML code we cut earlier by pressing CTRL-V or by right clicking and choosing "Paste."
Your old HTML code has now been placed inside the new container. When you switch to "Design" mode again, you should see the new container with your old content inside of it.
Don't forget you'll need to change the "Custom Content Module" header to whatever you want to call that content item. You may also need to UNcheck the "Show" option for that content item. So that the title is not displayed twice.
What if I mess it up?
If you feel you've made a mistake and need to start over, simply hit the "Back" button on your browser if you did not save your changes. This will take you back to the Navigation controls where you can simply start over.
If you did save it and then realize something is wrong, reopen the content item and switch to HTML mode. Highlight ALL of the HTML code, open your HTML backup file that we created earlier and paste the original HTML back onto the page. When you switch back to Design mode, you should see the original look of the content item. You can then start over.
If you have a content item with a LOT of extra formatting that seems to be causing problems, you might also consider creating a brand new content item to replace the old one. That will cut down on unnecessary HTML code, which can build up if a content item has been edited many times. This is especially true if you have pasted text from Microsoft Word, which will usually carry with it a ton of unnecessary formatting.
