Start Some Needed Content Changes

Wow, that was a lot of CSS in a short space of time. Let's take a few minutes to look at our progress and to check what we have done so far against the design sketch.

1. Click here to see the full screen version of the design sketch we stated with.
2. Click here to see a full sized screenshot of what the changes made to this point should look like.
3. Compare 1 and 2 above. Let's list what remains to finish below:

• The tabs and the left menu are supposed to show only 4 items (content): Home, About, News, and Reports. We need to change or add the content so that those are there.

• We need to center the portal tabs, changing the colors and text.
• Put a lighter blue highlight area behind the tabs, spanning the width of the site.
• Move the site actions from the top down to just above the footer and alter "contact us".
• Alter the footer text.
• Get rid of the Login Portlet.
• Activate the News Portlet so it is second in the left column.
• Create a static Portlet about some content (Reports of some kind).
• Change Portlet header background color to a medium blue.

So before we get back to any CSS, let's change the actual site content the way our site needs to be organized.

Content and Organization

To make sure the following four items appear and function on our site, lets look at what each does on the site:

Home

This is the root object (think of it as a folder) of your website. Not the ZMI, but the root of the Plone site itself. Clicking on home (or the logo) takes you straight to the root object, which may be a folder view or a page document. This is the so called home page of your site.

We do not have to modify anything to get this object on the tabs or menu.

About

There is no built-in "about" object in a default Plone website, so we will construct this commonly found page using a Plone page document.

Here are the steps to follow:

• Log into the Plone Website itself (remember to click on login in the personaltools, and use your userid and password).
• On the green menu bar that appears over the content of the home page, click on the Add to Folder, select the Page item from the pull-down list.
• For Title, type "About".
• For Description, type "Information About This New Website".
• For Body Text, type "This is a website developed for the InSmallSteps.com lessons on Plone. Plone is an outstanding, open source CMS."
• Click save.
• Now click on the little down arrow on the pull down menu after the State section of the green menu bar, and select Publish.

You have now created a Plone page and published it, and it should look like this:

Notice the green content menu that shows you have editing rights.

Also I circled the About entry in the left menu, but the top tabs still don't show any change.

News

Plone comes with a really nice site news system, allow you to add content called news items.

Before we do anything else, let's publish the news object itself. Did you notice in the left navigation menu that the text on the word news is green? That means it is public draft. We are going to need to publish for a later step for filtering what gets shown on the menus. For now just do the following:

• Click on the news object in the menu. There are no news items published, so a blank content area will appear, but you should have a green content menu on it.
• Right of the State: click the Public Draft, and from the pull-down menu select Publish.

Now the news object should appear in blue text.

The news object appears in the default Plone installation; however, there is no news item content by default. Let's add a news item and see what happens.

• On the personaltools menu you should see the my folder link. Every member to a Plone site, by default, will have their own user folder created for them automatically. Now you should see that there is nothing in your user folder.
• Click the Add Item on the green content menu, select news item from the pull-down list.
• For Title, type "Learning can be fun".
• For Description, type "It is easy to learn to use Plone"
• For Body Text, type "Using www.InSmallSteps.com is a great way to learn to customize a Plone website."
• Under the Image area, click on browse. Find and select that copy of the JPEG of the lessons logo we uploaded to the logo.jpg earlier.
• For Image Caption, type "our site logo" - this is what shows up when you hover over the image and it is also handy for visually impaired visitors.
• Click on save.
• Now click on the little down arrow on the pull down menu after the State section of the green menu bar, and select Publish.

You have now created your first news item and published it, and it should look like this:

Note that you saved the news item in your folder, not in some special news folder. The news object you see in the menus is not a folder, it is a special object that collects any published news item from anywhere on the site. Handy.

Also note that if you click news object in the menu or tab, you will see a summary of your item listed (along with a cool RSS button - read about that in the FAQ).

Now don't stop here, keep going on the next step to complete the content changes...