Oxfam America

Homepage Variations

How to change the look of the homepage for emergencies; how to add more links to the main feature.

(This documentation assumes that you already know the basics of editing the homepage and applying templates with interfaces. [XXX:links])

Overview

There are currently three different possible templates for the homepage (well, there's a fourth to support the French and Spanish homepages, but you probably won't need to deal with it). The three templates differ only in their treatment of the main feature box.

Here are the current options:

Homepage - normal feature

Standard Layout
The standard home layout is applied with the IHomepage interface. It has a small image (189x110 px) on brown, with the lead feature title to the right. The lighter brown box below has the feature blurb and one or more links.

Homepage - emergency feature

Emergency Layout
The emergency layout is applied with the IHomepageEmergency interface. It has a black title bar at the top and a double-wide image (379xanything px). The blurb box is the same as the normal layout.

Homepage - emergency donate feature

Emergency Donate Layout
The emergency donate layout is applied with the IHomepageEmgDonate interface. It's the same as the emergency layout, with the addition of a red Donate Now link with and arrow, and optional small white text about donations.

How the Feature Links Work

You can have as many feature links as you want (though from a style perspective, more than 6 is probably a bad idea). Here's how they work:

  • If you do nothing, you get an automatic Read More link, which looks like this:

    Homepage feature - Read more link

    This links to the same URL as the feature title.
  • You can manipulate the links by adding additional sidebars in the "Feature" slot (i.e. the same slot as the main feature, above the "Issues" slot in the homepage layout). These sidebars, no matter what kind of content they reference or what viewlet they use, will always show up as a small homepage link.
  • As soon as you add an additional link, the system will assume you know what you're doing, and will no longer put in the Read More link. If you want the Read More link, you'll have to recreate it (using Add Item > New Text).
  • If you only add one link, it will simply replace the Read More link.
  • If you add two links, they'll show up side by side:

    Homepage feature - 2 links
  • If you add three links, they'll be in one column:

    Homepage feature - 3 links
  • If you add four or more links, they'll be in two columns:

    Homepage feature - 4 links

    The columns are formed by breaking the list in the middle - so the order of the sidebars in the above example goes: Story 1, Another Story, Story Number Three, Donate Now.
  • The Emergency Donate template is a little different. In this template, if you have no additional sidebars, the Donate link will go to the main Donate page, and will have no small white text. If you have additional sidebars, the first sidebar is assumed to provide information for the Donate link. The title of this sidebar will define the alternate text for the Donate Now button (i.e. the text you see if you hold your mouse over it), the url will define the target url of the Donate Now button, and the Body Text will define the small white text, if any, next the button. If you don't want any white text, just hit the space key in the Body Text field. Subsequent sidebars define the links as above.

    (I know, this is all a little awkward, but it was the easiest way to add the ability to edit the link without creating a new layout.)

Examples

Situation: You want to have a normal home layout, but you want to add a second link that says Donate Now in the brown box.

Solution:

  1. Make the feature as usual, with the regular homepage layout.
  2. Make another sidebar (Add Item > New Text) in the Feature slot, below your feature, with the Title "Read more" and the Target URL the same as that of the feature (this is your replacement Read More link - you could give it different link text if you wanted).
  3. Now make a third sidebar in the feature slot: give it the Title "Donate Now" and the Target URL of the donation page you want to link to.

You should now have three sidebars in the Feature slot:

  • The main feature, with photo
  • Read More
  • Donate Now


Situation: A new emergency occurs. You want to put up a new look for the homepage, with a large donate button, a big photo, and links to the new emergency section, the latest news on the emergency, and a recent feature story about the emergency.

Solution:

  1. Apply the IHomepageEmgDonate interface, removing the IHomepage interface.
  2. Make a new feature with an Associate Image 379px wide. Give it the title you want to see in the black bar ("West Africa Robot Mayhem") and link it to the emergency section.
  3. Make the donate link information: add a new sidebar with the Title "Donate Now" and the Target URL of the emergency donation page. Fill in the Body Text field with whatever white text you'd like to see next to the Donate button ("Over 90% of funds go directly to fighting robots.")
  4. Make the main link: add a new sidebar linking to the emergency section with a title like "Read more about the robot crisis".
  5. Add additional sidebars linking to Latest News and the feature story ("Bamako Communities Attacked by Robots: Oxfam Partners Respond").

You should now have a total of five sidebars in the Feature slot:

  • The main feature, with photo
  • Donate Now
  • Read More
  • Latest News
  • Some Feature Story