Customizing the appearance of your group site (for managers)

Hi. Designerman Luke here. 

One of the cooler things you can do with our newest release (3.4) is really get fancy with customizing your group site's branding. There are two ways you can do it, and I'll outline them both here.

APPROACH 1: CHANGE YOUR THEME AND LOGO

This approach has been around, but I thought it would still be useful to walk you through it. There are a few simple steps to changing your theme and logo...

1. Go to your Site settings

This link is only available to site owners and managers.  You can get to the settings from the homepage, or from anywhere in the site using the "Home" drop-down menu in the upper-left.

2. From the settings page, go to "Customize site appearance"

3. Select which theme you'd like to use

Click "Change theme"...

...then select which of the 8 themes you'd like to use. The theme determines the look-and-feel of the site's header and footer.

4. Upload your own logo

Click "Upload a picture from your computer"...

 
...then choose an image file (of type .gif, .jpg, or .png) from your hard-drive to use as a logo.

NOTE:
The logo is optional. It appears in the header of the group site and in emails that come from your group site. It will look its best if you upload a pre-sized image: no taller than 48 pixels, and no wider than 250 pixels. Any larger images will be resized automatically. (This size is a change from the previous version of GroupSwim, so you may wish to resize and re-upload your logo even if you've done it before.)

5. Click "Save Changes" and you're all done.

Hopefully, that was pretty easy. 

However, many of our customers want to go much further with the customization of their site. If you (or someone who you can borrow for a minute) are proficient with HTML, you might benefit from the more advanced "Approach 2".

APPROACH 2: FULLY CUSTOM HTML HEADER

Again, I want to point out that this requires a working knowledge of HTML. If you don't know what the head tag is or aren't familiar with href is, you should probaby stop right here.

This approach creates an iframe containing a document you control. This means you can include your own CSS and JavaScript, and your own markup. To create your own custom header, follow the steps below.

 
1. From the Site settings page, go to "Customize site appearance"

2. Under "Choose your style of header," select "Use custom HTML..."

A form will expand giving you more options, including the width of the header (full window, or inside the main content area), the height of the header (more or less determined by your HTML), and the source code for the header.

 

3. Select (or create) the HTML you wish to use

Let's say I'm making a group site for TiVo. I could either create custom HTML for my site, or pull in the header from the TiVo.com website, to make it match. To use an existing website header, I can open TiVo.com in a different window or browser tab and view the source of the website. I figure out where the top of the page ends, and copy it to my clipboard (including the content of the head tag). Note that it can be tricky to find the edges of the page header (it might be the end of a div or table, or might be right in the middle of things), depending on the website.

 

4. Insert the code 

Insert the code into the "HTML code" text area back on GroupSwim. Select the height and width you'd like the header to be. 

Lastly, you'll probably want to add a base tag to the top of the head of the code. Adding "<base target='_top' />" will ensure that any links from the header open into the main window. In my case, my code contains relative links, so I insert:

<base target='_top' href='http://tivo.com' />

...This makes all links relative to TiVo.com. 

 

5. Save your changes 

   

Once I save, the header from the TiVo website has been placed on top of my group site. It may take some trial and error to get the height or source code exactly right. That's OK; the finished product is well worth the effort. Now you've got a community discussion board gfully integrated with your website

 

-- 

Well that's it. I hope this is clear and helpful. Please don't hesitate to reply with any questions or pointers of your own.