Bringing Ideas to Life

Improving the appearance of a Yahoo Group home page

To change the appearance of a Yahoo Group home page, begin by logging into Yahoo using your owner ID. Click next on the link to Yahoo Groups, and then the group which you wish to change. Once in your group, click on the Management link located in the left-hand column near the bottom. Under the Group Settings section on the right, you want to click on the link for Description & Appearance. Toward the bottom of this section is the Colors and Photo area, which is where you alter the overall color. Yahoo provides several 'theme' combinations of colors to pick from, along with a 'custom' setting for defining your own color values. Click on the edit link to make changes. Yahoo provides an easy to use pop-up window to change color values, including input of RGB or Hex value codes. 

Other changes can be made by altering the Description area (click on the edit link). Keep in mind that Yahoo is expecting this area to be written in HTML and can include CSS styles to alter the appearance of text as well as contain links to images. Images must be stored on a web server of some type where you can include the web address to it within the HTML.

In so far as JavaScript, this a subject not recommended for novice web programmers. While there have been limited reports of some success in getting scripts of this kind to work, most do not. Figuring out what will work takes a great deal of trial and error testing, and it may stop working at any time as Yahoo makes changes to their system.

As to what tags one can use in your Description, it is always best to keep things as simple as possible. When planning what to include in the Description, be aware that Yahoo has set a 2,000-character limit. This must include not only your written content but all coding to apply changes for fonts, color, size, etc. If a paragraph style is to be repeated frequently, setting up a CSS class descriptor may save character space. Assuming a limited number of headings and paragraphs will be used, setting your CSS attributes inline will make more sense.

As to the process of creating that content, I would start by writing whatever I wanted it to say inside a word processor or text editor that has a spell checker. (Grammar checkers are also helpful!) Hopefully the one you are using will also have a word count function, so you can see exactly how many characters you are using for your text. Leave at least a couple of hundred characters free for the HTML code you will add next. Save your written text as a plain-text file.

I do nearly all of my HTML coding by hand, using a specially designed tool called a source code editor. For those getting started in this area, there is a great open source one I can recommend called Notepad++. I like using this program as it highlights the HTML tags themselves in blue, with the parameters for tags in red. Spotting errors within the code becomes much easier, such as a missing closing tag, or improper construction of tables or lists. (Have you notice any of the minor coding errors showing in the screen shot?)Notepad++ in action

One thing this program does not do, sadly, is create a new properly structured HTML document. Matthew James Taylor has been providing several different highly optimized basic web page layouts on his site for years.  Choose the one most appropriate for your situation, save and edit to your heart's delight! Yahoo is now using the XHTML strict standard, so that is the one I would use as a starting point. Open a copy of that file inside an editor and then save it under a different file name. Copy and paste your written text into the body section of the document, and proceed with adding whatever HTML and/or CSS code you wish. Preview your page as you work on it in whatever browser you normally use. Click on File in the menu, Open or Open File and then locate your work in progress. Save your work after each change and then refresh the page in the browser to see the affect of your changes. 

The TextFX menu section deserves special mention as it contains a number of handy tools for HTML writing. For example, special characters such as quote marks, greater-than or less-than symbols, copyright symbol, and the like require different coding within HTML. Simply select the character and use the encoding tool under TextFX Convert to change it. A handy word-count function under TextFX Tools will help ensure you stay within that 2,000-character limit.

There are a number of ways to include images within the Description area. Some time ago Yahoo began providing a mechanism to store a "logo" file for the group on their own site. This removed the need to host the image at another location and has greatly simplified the process of including one. Even better is how Yahoo will resize the uploaded image used for this purpose as needed in its directories, search functions, etc. In general, an image file sized to 320 pixels by 200 pixels has been found to work well. Keep in mind that the image should not be so complicated that becomes hard to read or recognize when reduced by 50% or more.

Precise control over where the image file appears on the home page, however, do not exist. Yahoo will place it where they want it to appear and in the size they want. CSS positioning statements to place an image file in an absolute or relative location are not allowed. The "old" method of storing an image file elsewhere and using the HTML <img> tag is still an option. However, those files will not be re-used within Yahoo system. Yahoo will also block the display of an image if important attributes, such as the image dimensions and the <alt> statement are omitted.

Creative Commons License


Submitted by Anonymous (not verified) on

(This comment was posted on 11/25/08) I was searching for a good web design for yahoo groups. I have never worked in HTML but reading your message, it seems, i have some chance at making the site pleasing. thank you

Submitted by Erlie (not verified) on

Is there some tutorial on this?  Ive never been working with html!

Ive got interests on it... Please i need assistance!