Personal tools

Managing Content: Editing of the 'Featured' section in Homepage

This guide explains how to edit the content of the 'Featured' section of the Homepage (the one between the navigation bar and the "Recent News" section).

1. Login and go to the Homepage

  • Go to and login with your user and password. If you are redirected to another page after login, return to the Homepage.
  • Click on the "edit" tab
Now you should be in edit mode. The 'Featured' part is the "Body Text". You shouldn't change anything else in this page, only the "body" part.

I recommend to erase all the content instead of just modifying it, unless the changes are minimal. This because the WYSIWYG editor can do tricky thing and mess up all the formating. If you have worked in MS Word, you probably know what I'm talking about.

2. The Title

As specified in the design, the title of this section is a grayish navy stripe with white text. This is controled with stylesheets, apart from the content, so it is not advised to try to make this style with the WYSIWYG editor. It should always be the first thing on the body text of the page. It can read "Featured content", "Features" or anything you want.

To make the title, put the cursor at the beginning of the editing area an click on the selection list above the green buttons (this list is the paragraph style selection); it will probably say "Normal" by default. For the title we will use "Heading 2". Take care not to select "Heading 1" or the title will be hidden.

Now type the text for the title, and then press enter. This should return the text to normal.

Probably the editor will not show the Title in navy background; it's all right, when the page is viewed the colors are fixed by the stylesheets.

3. The Main Feature

Normally just one feature is shown, or if there are more, one is highlighted more than the others. Probably it will be accompanied by an image. The text should be "Normal" and typed just below the main title.

3.a. Inserting an image for the Main Feature

To show an image on the left side of the Main Feature, first we need to upload it to the site and to know its URL (adress). I recommend to open another browser window or tab to do this, so we don't have to get back to the edition back and forth. To do this:
  • In Internet Explorer, press CTRL+N. A new window will open with the same page we were; go to .
  • In Mozilla, press CTRL+T to open a new empty tab (a page inside the current window) or CTRL+N to open a new window, and go to  .
You will be presented with a list of images. To upload a new one:
  • Click on "Add a new item"
  • Click on "Image" from the menu that is displayed. A new page will load.
  • The short name is not required, as it will inherit the name of the image. But if you want to change its name, then you can type a new one here. Remember to type the extension as well (jpg, gif, png, etc.)
  • The Title is an alternative text for the image, in case users don't have images activated, for screen readers and indexing purposes. It is advised to fill it with something descriptive.
  • Finally there's the image field. You can select it by clicking the "Browse" button and select it from your hard drive. Please remember that the image is uploaded in its full size. The recommended dimensions for the 'Featured' image are no wider than 300px, or, it could cause some problems to the accompanying text (that is discussed below). Please do not upload an image wider than 600 px or it could just break the whole page design, with columns falling, etc.
  • Click on "Save" and the image should be uploaded to the site (but not the Home page yet).
  • Once the upload has completed, change the state of the image from "private" to "visible". This can be done from the blue horizontal bar above the main content area, by clicking on the "state:private" button and selecting visible.
The image URL (address) is now[imagename] . We will use this address to link to the image in the 'Feature' page, as we will see now:
  • Back in the page you are using to edit the Home page: put the cursor below the Title, and click the "Image" button of the WYSIWYG editor: . (you will see the text pop up that says "Insert Image" when your mouse is over the button)
  • A window will pop-up asking for the URL of the image. This is the adress we talked about above. Type adress and press enter .
  • If the image exists and the address was correctly typed, you should see now the image you've just added displayed on the Home page.
  • Now click enter once to position the cursor below the image.

3.b. The Main Feature Text

This is the accompanying text for the image, the one that describes the main feature. When viewed from the Homepage, and not in edit mode, this text flows at right of the image (unless the image is too big). Please do not try to simulate this with the editor; this is controlled with style sheets, so it's not needed and even can alter the design.

If the text features some content on the page, you will want to make a link of its title; for this, select the text and press the "Link" button in the editor: (mouse over the button shows text "Insert Link"). You need to know the adress of the destination page and type it or copy/paste it in the window that pops-up. Then click enter and it's ready. Hit enter again for a line break.

4. Other features

You may want to feature more content; to differentiate it from the main feature, we will insert a subtitle and list the features with bulleted list.
  • Put the cursor below the main feature text and in the paragraph style selection list (drop down menu over the green buttons) select "Heading 3". If you choose "Heading 2" it will be shown as a blue stripe with white text, as in the main title. Then type "Other Features" or whatever title you want.
  • Below this, click the "Unordered List" button: . A bullet will appear. Type the first of the other features. For links, please follow the instructions for this on point (3.b).
  • For each feature you want to list, press enter and a new bullet will appear.
  • If you hit enter twice, the list will close. If you want to come back to the list, put the cursor at the end of the last item and hit enter once.

That's it! But as we don't want to experiment with the live site, we can test this beforehand in the development version of the site, at . The proceedings are the same. You can even upload and use images from the live site (, they will display as well.

Any comments or questions please direct them to
Created by cjohnson
Last modified January 13, 2005 04:57 PM

Sign up for CPSR announcements emails


International Chapters -

> Canada
> Japan
> Peru
> Spain

USA Chapters -

> Chicago, IL
> Pittsburgh, PA
> San Francisco Bay Area
> Seattle, WA
Why did you join CPSR?

I especially value the networking events listing and the CPSR annual conference when I get to attend.