New theme for group homepages - plus custom group banners and menus

Hey,

Have a look at how Example Group looks at the moment. We've just rolled out a new theme option for groups. (Those of you who read the Network Updates saw screenshots of the new theme a week ago.)

This new theme comes with the ability to put a custom banner image for your group across the top of the page, and to create a custom drop-down menu, containing whatever items you like. There's a different kind of view for Events, showing file attachments - this will hopefully be useful in situations where you want to attach minutes or an agenda to an event posting for a meeting, for example.

A couple of groups are already using the new theme, notably Sustainable Maleny, who already have a slick banner on their group. Nice!

Want to try it out for your own group? Instructions below.

SWITCHING TO THE NEW GROUP THEME

To start using the new theme, you'll need to edit your group and change the theme from "relocalize" (the sitewide theme for relocalize.net, which your group is using right now) to "group_theme_1". As the "1" suggests, this is just the first of new theme and layout options we'll be creating for group homepages in the future. We're hoping for some feedback from you guys to help us work on that.

  1. Edit your group (click on the "edit" tab at the top of your group homepage)
  2. Scroll down to the "Theme Configuration" section
  3. Click on the radio button to select "group_theme_1"
  4. Scroll down to the bottom of the form, and click "Submit" to save this change.

You'll then see your group homepage wearing a new face. No data will change - the same posts and welcome message from before will be there. If you'd like to switch back to the old theme, the process is the same - just edit your group, and switch the theme back to "relocalize".

CHANGES YOU'LL SEE

You'll notice the following changes:

  1. The name of your group will occupy the "banner" area at the top of the page. If you add a group banner (instructions below), this area is where that banner will show up.
  2. Among the tabs at the top of the page, such as "edit" and "email", you'll see a new one: "activate group menu". This does just what it sounds like: it's how you get started creating a custom top menu for your group.
  3. The Location will be in a blue block near the top of the page, and include a link to search for nearby groups.
  4. Posts, such as blog entries, forum posts, and events, will be displayed differently, in a set of blocks. We've tried to arrange these to save some space, so people don't have to scroll so far down the page to see them all.
  5. The sidebar blocks have changed. There are links both to view and create content of each type (blog, forum, news, event, page, poll, and directory listing). The usual links, such as "my subscription", are still there, just rearranged a little to save space.
  6. There are RSS feed links on the group homepage and in the sidebar - a feed for the whole group, and separate feeds for the different content types.

ADDING A GROUP BANNER

The group banner has a size limit - it should be between 50 and 150 pixels tall, and between 1000 and 1600 pixels wide. So people can clearly see where they are, it should probably have the name of your group on it, clear and prominent.

You'll see your group banner wherever you go in your group. Clicking on it will always take you back to the group homepage.

To add a banner:

  1. Edit your group (click on the "edit" tab at the top of your group homepage)
  2. Go to the "Group Banner" section (which is right at the top)
  3. Click on the "Browse" button, find the banner image you want on your computer, and click "Open"
  4. Click on the "Update" button on the form to upload the image
  5. Scroll down to the bottom of the form, and click "Submit" to save this change.

Now you'll see your banner image appear at the top of your group.

USING THE GROUP MENU

When you click on the new "activate group menu" tab, or the "activate group menu" link in the sidebar (both do the same thing), your group menu will appear with a few pre-set items in it: a link to your group homepage ("Group Home"), and to content in your group ("Blogs", "Forum", "News", "Events", "Pages", "Polls", and "Directory"). You can customize or get rid of any of these.

Once you've activated the group menu, that tab will change to read simply: menu. It will take you to the menu configuring area. There, you'll see all the items in your group menu, and have the option of editing them.

This will be a dropdown menu. It can have any number of items or sub-menus you want, arranged however you want. For example, you could create a new menu item that says "Posts from members", and move "Blogs" and "Forums" under there; or you could create a menu link for a page in your group, or even an important event; or you could create a link to an external site. Just bear in mind that if you add lots of items all in a row, they might have trouble fitting on screen. If you have more than ten or so items, you might want to start structuring your menu into a nicely organized tree.

Something to remember is that a menu item is a different thing from a post. If you delete a menu item, the thing it points to won't be erased; likewise, if you delete a post, any menu items that point to it won't disappear.

To REMOVE a menu item: click on the "delete" link beside it.
To EDIT a menu item: click on the "edit" link beside it. From here, you'll be able to change the following:

  • Title - this is what it says on the menu item; eg, "Group Home".
  • Path - this is where the menu item will take you. You can put an internal link - a link to somewhere on relocalize.net - by entering the URL with " http://www.relocalize.net/" removed. For example, "node/1", or "groups/example". Or, you can put a full URL; for example, "http://www.richardheinberg.com/museletter " or "http://www.relocalize.net/node/1/forums".
  • Sort - this is the sort-order of this menu item. If you want it to be first in its group, you would give it a really low Sort, like -10.
  • Parent item - this controls where this item will appear in the menu. If the Parent Item is your group menu, then this item will appear in the green bar, and always be visible. Or you can make this item a child of any other item in the menu.

To ADD a menu item: click on the "add menu item" link at the top of the menu configuring page. The form to fill out to add a menu item is just like the form for when you're editing a menu item, as above.

NOTE - there is no "undo" when editing the group menu.

HAVE FUN!

This is a new thing we're trying, so we're expecting to adapt it to your needs as we go. Anytime you need help, please get in touch with me or Tim - that's what we're here for.

grahamia's picture

Noodle bar dododle

This is the eyesore on the opening page of NoodleBar:
$og_result = db_query('SELECT COUNT(*) AS ogcount FROM {node} WHERE type="content_group"');
while ($og_node = db_fetch_object($og_result)) {
echo $og_node->ogcount;
}
?>

grahamia's picture

Email this page bug

From the recent post you put up about themes, I tried to email the page, and I got linked to a Search tool. Is that the way it's supposed to work?
Ian

grahamia's picture

New community format template

Hi,
I'm trying out the new format, generally I like it.
- we need as FEEDBACK and REPORT BUGS email link located very prominently, pls.
- I'm still befuddled by what functionality I gain with a Forum and a Community Blog?
- In the classical format, there was a personal blog tool, yes? it has been suppressed on the new template?
- When you go to Activate Group menu, up pops the Coordinator Noodle Bar. if that is what is supposed to come up, perhaps the tool title should say that instead of 'activate Group menu'.

In the right hand upper corner, not aligned wiht the frame appears this:

Submitted by Charles on Mon, 2006-09-25 01:30.
From: unknown
How do we rethink the way we plan our cities or built environments? What are the alternatives to demolition and new buildings? Some examples include retrofitting, green/sustainable building and edible landscaping.
This forum topic is a local version of the same forum topic (for the entire site) which you can access at http://www.relocalize.net/forum/60

admin's picture

Wow. How did you get all

Wow. How did you get all that to happen? It sounds like there are multiple bugs - but when I tried changing Sustainable Burlington over to group_theme_1 just for a second to check, I saw none of that - no out-of-frame comment from someone named Charles, no unexpected link to the Coordinator Noodle Bar.

Can you give me more information? Exactly, precisely what steps did you take? Was it Sustainable Burlington you were working on? When you say the Coordinator Noodle Bar popped up, do you mean in a new window or something?

grahamia's picture

User group template

In the User Group Banner template mode (accessed only via My Account, ie from Sustainable Burlington main page)
1. When I clik Edit Group Homepage I get http://www.relocalize.net/node3977/edit
2. When I clik Activate Group Menu, I get www.relocalize.net/node/3977/og/menu
These pages display as I explained in my last post and you replied to.
Neither make any sense.

What's more, the template only applies to the user, not the whole membership of that group. I was boostering the new look to my group this week, had the sign projected on a big screen via digital projector/wireless to show them, They went home to check it and couldn't find it, nor could find how to change their settings. I wonder if you should give permission to set the template setting only to the group manager? One big reason for this is that if a user is trying to coach a newbie through the site, to find something on the screen real estate, if it looks different for each person, they will be totally unable to talk sense.

3. When trying to edit personal bio on My Account, there is no link to open that text box. It's not active.

4. There is no immediate on hand way to send you an email like this to report a bug. THERE are LOTS of bugs. YOU need US to get them fixed because we users will tell you when we find them. So please give us a link on every page so we can get the info back to you.

5. If a page is beta, maybe reduce user expectations by marking it so, like the bank teller badge "in training".

Shelby Tay's picture

yay new group themes!

Hey Zoe!
Thanks for putting together all this help text. You're a star!

shelby