| YahooGroup Home Page
Tricks. (Dressing up your Group's home Page). There are a number of things that can be done to make your Group's Home Page a little more attractive or fancy than simply typing a description and adding a picture. Here are a few. You will need to know very little of the basics of HTML. |
Note: Much of what we could do with our group's home pages are limeted now since Yahoo took away our ability to use Iframes, but there are still some html codes here that can be used and all of them are good for web pages.
1. Adding Sound. (I recommend using Midi's only. Other
formats load too slow.)
2. Adding a Background Image. (To your Description area
only).
3. Using Cascading Style Sheets. (This will place a
background image to the entire page,
not just your Group's Description area. It will also set colors of the text, links,
visited links,
active links...etc).
4. Adding a Counter.
5. Adding an Image to your description. (you can also
use Yahoo's Upload Image Tool.)
6. Getting around the 2000 character limit. (By using an
IFRAME, you can embed a
separate web page directly into your description by using only a small HTML code).
7. Scrolling text in the TaskBar. Visitors will see text scrolling
in their Taskbar.
8. GMT Clock. Add a GMT Clock which runs in real time. Great for
when your group has chat room meeting at certain times.
Members will never have to worry about converting their local time into GMT time.
9. Scrolling Marquee.
10. Vertical Scrolling Message. With this script, you can have messages scrolling
upward with a mouse over to pause the scrolling.
11. Falling Snow.
This script will create the effect of falling snow.
Great for Christmas Holidays. Works in all browsers.
12. Rainbow Scrollbars. This neat script will have your scrollbars
changing colors of the rainbow as you scroll. (Doesn't work in Netscape
Browsers).
1. Adding Sound.
Add the following HTML Tag to the beginning of your Group Description.
<bgsound src="URL LOCATION OF
THE MIDI GOES HERE" loop="-1">
The part that reads " loop=-1"
will play the midi in a continues loop.
To play a certain number of times, replace the -1 to a number of your choice.
Be sure to remove the minus sign (-). Play 2 times will look
like this:
<bgsound src="URL LOCATION OF
THE MIDI GOES HERE" loop="2">
You can also add a small media player to your
description so that visitors have control over the Tune.
But....this will only work if the Tag is added into an IFRAME. It will not work by adding
it directly into
your Group's Description area. I couldn't get this to work right for my Opera Browser for
some reason.
I hope it works for yours.
Here is what it will look
like |
The following tag will work in Netscape Browsers as well as IE. This is for Windows
Media Player.
The script above will tell the
music to start automatically. If you do not want the music to start without
having to press the
play button, change the
part that reads AUTOSTART="true"
to read
AUTOSTART="false"
2. Adding a Background Image.
The standard <body background> tag no longer works
with YahooGroups Home Pages.
Use the following HTML Tag in your Group's Description.
<TABLE background="URL OF
BACKGROUND IMAGE GOES HERE" border="0"
CELLPADDING="6"
width="100%">
<tr>
<td>
<p>
YOUR DESCRIPTION
</p>
</tr>
</td>
</table
3. Using Cascading Style Sheets.
This will place a background image to the entire page, not
just your Group's Description area.
It will also set colors of the text, links, visited links, active links...etc
You will need to Link to an external Cascading Style
Sheet (.CSS).
To do this, add the following HTML Tag to your Group's Description.
<LINK REL=StyleSheet HREF="URL OF .CSS FILE GOES HERE" TYPE="text/css">
The following is an example of an External .CSS File.
A:text { COLOR: #004000; text-decoration: underline }A:link { COLOR: 640000; text-decoration: underline } A:visited { COLOR: 640000; text-decoration: underline } A:active { COLOR: 640000; text-decoration: underline } A:hover { COLOR: blue; background-color:ffcc99 } P { line-height: 100%; } h1 { line-height: 150%; } h2 { line-height: 120%; } h3 { line-height: 110%; } h4 { line-height: 101%; } BODY { background: url('URL OF BACKGROUND IMAGE GOES HERE') fixed; font-weight: bolder; scrollbar-face-color:red; scrollbar-highlight-color:green; scrollbar-3dlight-color:blue; scrollbar-darkshadow-color:black; scrollbar-shadow-color:green; scrollbar-arrow-color:red; scrollbar-track-color:darkgrey; } table {color: 640000; font-weight: bolder;}
In the above script, you can edit the
colors of the Text, Links, Visited Links, Active Links, Hover and add your background
image loaction.
Click HERE
for a Color Chart.
For an example of a Yahoo Group using Cascading Style Sheet, see:
http://ca.groups.yahoo.com/group/Computer_tricks_and_tips/
More about Cascading Style Sheets:
4. Adding a Counter.
There are a number of free counters to choose from. Below
is a list of a few of them.
With all of them, you are required to add a HTML Code to your page.
http://www.digits.com/
http://www.gostats.com/
http://www.sitemeter.com/
http://freelogs.com/
http://www.123counters.com/
5. Adding an Image to your description.
Add the following Tag to your Group's Description.
<IMG SRC="URL OF IMAGE GOES HERE" ALIGN="left">
The part that reads ALIGN="left" will place the image left. You can choose Left, Right, or Center.
You can adjust the size of the Image as well by using the following Tag instead.
Change the number values for the width and height.
Note: The larger you make the Image, the lesser the quality of the Image.
This tag is used mostly to downsize Images that are too large for the Page.
6. Getting around the 2000 character limit.
By using an IFRAME, you can embed an external web page
directly into your description
by adding the following HTML Tag to your Group's Description.
The above Tag will show the External Web Page as being
width = 200 and height = 300.
You will need to adjust the width and height so that your embedded page shows
right.
The above Tag will show the embedded page with a thin Border. Increase the number
value in
frameborder="1" for a
thicker Border. 0 = no Border.
The above tag will place Scroll Bars if
the width or height is not the same as the actual size of the external web page content.
You can remove the Scroll Bars by changing scrolling="yes" to read scrolling="no" Or for Automatic Scrolling change it to read scrolling="auto"
For an example, the window below is an actual external web page embedded into this one.
Here it is again below, but
without the Scroll Bars or border
and using the same background color as this page and sized
to fit all of the external page content.
This way it appears to be part of the main page.
7. Scrolling Text in the TaskBar.
With the following script, people will see a
text message scrolling in their Taskbar. You should see an example in your Taskbar right
now.
You can configure the text to say whatever you wish. This script is quite long so
should be used only if you are using an external web page embedded into your Group's
Description and it should be added to that page. (see above). Doesn't seem to
work for me in my Firefox Browser but does in all the others.
<script language="JavaScript">function
infoscroll(seed,looped){var text1 = "Welcome to the
Group";
var text2 = "We are happy to have
you aboard!";
var msg=text1+text2;var putout = " ";
var c = 1;
if (looped > 10) {
window.status="<Thanks !>";
}
else if (seed > 100)
{
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
putout+=" ";
}
putout+=msg.substring(0,100-seed);
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
window.status=putout;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0)
{
if (-seed < msg.length)
{
putout+=msg.substring(-seed,msg.length);
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
window.status=putout;
timerTwo=window.setTimeout(cmd,100); // 100
}
else {
window.status=" ";
looped += 1;
var cmd = "infoscroll(100," + looped + ")";
timerTwo=window.setTimeout(cmd,75); // 75
}
}
}
// -->
<!--
infoscroll(100,1)
// -->
</script>
In the above script, you can change the text message to
anything you wish it to say.
Or you can go to: http://webdeveloper.earthweb.com/repository/javascripts/2001/09/59291/message_generator.htm
and use a free Taskbar Message Generator. Just type your text
message and it will generate the entire script for you.
How cool is that?
8. GMT Clock.
For some reason, I couldn't get this script to work in the Group's Description area, but it works if added to an external page embeded using the IFRAME script. Add the following script to your external page. Do not configure this script.
<script Language="JavaScript">
<!-- hide from old browsers
function jsClockGMT(){
// Copyright 1999 - 2001 by Ray Stott
// OK to use if this copyright is included
// Script available at http://www.crays.com/jsc
var time = new Date()
var gmtMS = time.getTime() + (time.getTimezoneOffset() * 60000)
var gmtTime = new Date(gmtMS)
var hour = gmtTime.getHours()
var minute = gmtTime.getMinutes()
var second = gmtTime.getSeconds()
var temp = "" + ((hour < 10) ? "0" : "") + hour
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
document.clockFormGMT.digits.value = temp
setTimeout("jsClockGMT()",1000)
}
//-->
</script>
<html>
<head>
<title></title>
</head>
Add the last part of the script (below)
to the area of the page you want the clock to appear.
<body ONLOAD="jsClockGMT()"><form NAME="clockFormGMT">
<font face="Courier New,Courier" size="4"><p><input
TYPE="text" NAME="digits" SIZE="8"
VALUE="Loading"> <strong>GMT</strong>
<strong>TIME</strong></font></p>
</form>
GMT Clock 2.
The following is another GMT Clock which is actually much easier to use.
GMT
<script language="JavaScript">
// Anytime Anywhere Web Page Clock Generator
// Clock Script Generated at
// http://www.rainbow.arch.scriptmania.com/tools/clock
function tS(){ x=new Date(tN().getUTCFullYear(),tN().getUTCMonth(),tN().getUTCDate(),tN().getUTCHours(),tN().getUTCMinutes(),tN().getUTCSeconds()); x.setTime(x.getTime()+0); return x; }
function tN(){ return new Date(); }
function lZ(x){ return (x>9)?x:'0'+x; }
function y2(x){ x=(x<500)?x+1900:x; return String(x).substring(2,4) }
function dT(){ window.status=''+eval(oT)+''; document.title=''+eval(oT)+''; if(fr==0){ fr=1; document.write('<b><font
size=1
face=Arial><b><span id="tP">'+eval(oT)+'</span></b></font>'); } tP.innerText=eval(oT); setTimeout('dT()',1000); }
var dN=new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat'),mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),fr=0,oT="dN[tS().getDay()]+' '+tS().getDate()+' '+mN[tS().getMonth()]+' '+y2(tS().getYear())+' '+':'+':'+' '+lZ(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+' '";
</script>
<!-- Clock Part 1 - Ends Here -->
<!-- Clock Part 2 - This Starts/Displays Your Clock -->
<script language="JavaScript">dT();</script>
<font size="1">
<!-- Clock Part 2 - Ends Here -->GMT</font></td>
</tr>
</table>
In the script above, you can change the size and style of the font being used.
9. Scrolling Marquee.
Add the following script.
<p><font color="#FFFFFF"><strong><marquee border="0" width="500" height="19" bgcolor="#FF0000" scrollamount="10" scrolldelay="100">This is White text scrolling on a Red background.</marquee></strong> </font></p>You can change the color of the text, background, width, height, and speed.
10. Vertical Scrolling Message.
This script will let you create a vertical scrolling text. You can
have different messages separated with optional clickable links.
Place your mouse over the text to stop it from scrolling.
Use the following script.
<script
language="JavaScript1.2">
// Distributed by http://www.hypergurl.com
// Scrollers width here (in pixels)
var scrollerwidth="450px"
// Scrollers height here
var scrollerheight="100px"
// Scrollers speed here (larger is faster 1-10)
var scrollerspeed=3
// Scrollers content goes here! Keep all of the message on the same line!
var scrollercontent='<font face="Tempo
Grunge" color="green"
size="3">Here you can have
your first message.<br> with a link too if you want <a href="LINK LOCATION
GOES HERE" target="_blank">Computer Tricks and Tips</a><br><br><font color="red"> Here you can have your second message, without any links.<br>Pretty
cool huh?<br><br> <font
color="green">Best Regards from our
Home to your Home.<br>David in Nazko, BC Canada.<br><br><font color="red">And so on....<br></b></font>'
var pauseit=1
// Change nothing below!
scrollerspeed=(document.all)? scrollerspeed : Math.max(1, scrollerspeed-1) //slow speed
down by 1 for NS
var copyspeed=scrollerspeed
var iedom=document.all||document.getElementById
var actualheight=''
var cross_scroller, ns_scroller
var pausespeed=(pauseit==0)? copyspeed: 0
function populate(){
if (iedom){
cross_scroller=document.getElementById? document.getElementById("iescroller") :
document.all.iescroller
cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
cross_scroller.innerHTML=scrollercontent
actualheight=cross_scroller.offsetHeight
}
else if (document.layers){
ns_scroller=document.ns_scroller.document.ns_scroller2
ns_scroller.top=parseInt(scrollerheight)+8
ns_scroller.document.write(scrollercontent)
ns_scroller.document.close()
actualheight=ns_scroller.document.height
}
lefttime=setInterval("scrollscroller()",20)
}
window.onload=populate
function scrollscroller(){
if (iedom){
if (parseInt(cross_scroller.style.top)>(actualheight*(-1)+8))
cross_scroller.style.top=parseInt(cross_scroller.style.top)-copyspeed+"px"
else
cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
}
else if (document.layers){
if (ns_scroller.top>(actualheight*(-1)+8))
ns_scroller.top-=copyspeed
else
ns_scroller.top=parseInt(scrollerheight)+8
}
}
if (iedom||document.layers){
with (document){
if (iedom){
write('<div
style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden"
onMouseover="copyspeed=pausespeed"
onMouseout="copyspeed=scrollerspeed">')
write('<div id="iescroller"
style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+scrollerwidth+' height='+scrollerheight+'
name="ns_scroller">')
write('<layer name="ns_scroller2" width='+scrollerwidth+'
height='+scrollerheight+' left=0 top=0 onMouseover="copyspeed=pausespeed"
onMouseout="copyspeed=scrollerspeed"></layer>')
write('</ilayer>')
}
}
}
</script>
Configuring the above script:
The above script is quite configurable.
When typing your messages, you must remember that all of them have to be on the
same line.
To make each message separate from each other, you will notice in the script that I
used a couple breaks
(<br><br>).
This tells the script to place two spaces between each message.
Try not to use a lot of different punctuations or special
characters, this tends to disable the script.
To adjust the speed of the scroll, change the line that reads
// Scrollers speed here (larger is faster
1-10) var scrollerspeed=3
4 is faster, 2 is slower.
To change the text type and size, change the line(s) that read
<font face="Tempo Grunge"
color="green" size="3">
If you want all the messages to be of
the same color and size, use only the first color/size tag and remove the rest.
11. Falling Snow.
With this script you can create the effect of
falling snow. This is a great effect for your group at Christmas time.
Because it doesn't use an image for the snowflake, there's no reason to upload
images to a remote directory and
will work in all browsers because it uses characters as the snowflakes. This
script is rather long so you will need
to add it to an IFRAME page.
Copy and paste the following script into your IFRAME page.
<script
type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
for this script and many more
*/
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=43
// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF")
// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial
Narrow","Times","Comic Sans MS")
// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"
// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=1.5
// Set the maximum-size of your snowflakes
var snowmaxsize=40
// Set the minimal-size of your snowflakes
var snowminsize=8
// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
/*
// * NO CONFIGURATION BELOW HERE *
*/
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var
ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1)
{snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2)
{snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3)
{snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4)
{snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy
if
(snow[i].posy>=marginbottom-2*snow[i].size ||
parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1)
{snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2)
{snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3)
{snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4)
{snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"'
style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}
</script>
With the above script you can configure the following.........
var snowmax=43 Change the amount of snowflakes.
var sinkspeed=1.5 Change the sinkspeed
of the falling snow.
var snowmaxsize=40
Change the speed of the falling snow.
var snowmaxsize=40
Change the maximum size of the
snowflakes.
var snowminsize=8 Change the minimum
size of the snowflakes.
var snowingzone=1 Change
the area where the snow flakes will fall.
Below is an example of what the falling snow looks like.
12. Rainbow Scrollbars.
Add
the following script to have your Scrollbars change colors as you move them.
Does not work with Netscape Browsers.
<!--Simply copy and paste it into The <Body> of Your Document.-->
<script type="text/javascript">
<!--
//Visit http://rainbow.arch.scriptmania.com for this script
var scrollPct, prevStep, nextStep, interStep
steps = new Array();
steps[0] = new Array(128,128,128);
steps[1] = new Array(255,0,0);
steps[2] = new Array(255,255,0);
steps[3] = new Array(0,255,0);
steps[4] = new Array(0,255,255);
steps[5] = new Array(0,0,255);
steps[6] = new Array(255,0,255);
steps[7] = new Array(255,0,0);
function newColor(chan) {
var i=Math.floor(steps[prevStep][chan]+interStep*(steps[nextStep][chan]-steps[prevStep][chan]));
return i;
}
function scrollFunk() {
scrollPct=(steps.length-1)*document.body.scrollTop/(document.body.scrollHeight-document.body.clientHeight);
prevStep=Math.floor(scrollPct);
nextStep=Math.ceil(scrollPct);
interStep=scrollPct-prevStep;
var newRGB="rgb("+newColor(0)+","+newColor(1)+","+newColor(2)+")";
var invRGB="rgb("+(255-newColor(0))+","+(255-newColor(1))+","+(255-newColor(2))+")";
if (document.body.style.scrollbarTrackColor != null) {
document.body.style.scrollbarFaceColor=newRGB;
document.body.style.scrollbarTrackColor=invRGB;
}
}
window.onscroll=scrollFunk;
//-->
</script>
HTML For Beginners Links:
Notes:
David Llewellyn, Nazko, BC Canada
mailto:ctt_group_founder@yahoo.ca
Web Site:http://www.computertricksandtips.com/
Computer Tricks and Tips Yahoo Group: http://ca.groups.yahoo.com/group/Computer_tricks_and_tips/
Web Help Yahoo Group: http://groups.yahoo.com/group/web_help/
Feel free to pass this Page on, but please do not edit any of the content.
This page can be found at:
http://www.computertricksandtips.com/home_page_tricks.htm
