This is a simple task. For whatever theme you use and allow your members to choose from, you need to edit each theme's index.template.php file (/Themes/default/index.template.php). Inside the function "template_main_above()" you'll see all the javascript and <link> tags. Just add your javascript that you posted in there between the <head> tags.
As for the chat button, you just need to edit the function "template_menu" inside the same file and add your link. Depending upon how you want it to look, you can use an image, or just use text.
For example, for SMF v1.1 here's a part of template_main_above():
// The main sub template above the content.
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '><head>
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="description" content="', $context['page_title'], '" />', empty($context['robot_no_index']) ? '' : '
<meta name="robots" content="noindex" />', '
<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js?fin11"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "', $settings['theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
var smf_scripturl = "', $scripturl, '";
var smf_iso_case_folding = ', $context['server']['iso_case_folding'] ? 'true' : 'false', ';
var smf_charset = "', $context['character_set'], '";
// ]]></script>
<title>', $context['page_title'], '</title>';
// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';
/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
Standards compliance mode happens when you use xhtml... */
if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/fonts-compat.css" />';
// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="', $scripturl, '?action=help" target="_blank" />
<link rel="search" href="' . $scripturl . '?action=search" />
<link rel="contents" href="', $scripturl, '" />';
// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']))
echo '
<link rel="alternate" type="application/rss+xml" title="', $context['forum_name'], ' - RSS" href="', $scripturl, '?type=rss;action=.xml" />';
// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=next" />';
// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' . $scripturl . '?board=' . $context['current_board'] . '.0" />';
// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
$options['collapse_header'] = !empty($_COOKIE['upshrink']);
// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'], '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header = ', empty($options['collapse_header']) ? 'false' : 'true', ';
function shrinkHeader(mode)
{';
// Guests don't have theme options!!
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);';
else
echo '
smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "', $context['session_id'], '");';
echo '
document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");
document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";
current_header = mode;
}
// ]]></script>';
// the routine for the info center upshrink
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header_ic = ', empty($options['collapse_header_ic']) ? 'false' : 'true', ';
function shrinkHeaderIC(mode)
{';
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkIC=" + (mode ? 1 : 0);';
else
echo '
smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "', $context['session_id'], '");';
echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");
document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";
current_header_ic = mode;
}
// ]]></script>
<script language="javascript" type="text/javascript"> var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){
LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;
TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;
} if(pos=="center"){
LeftPosition=(screen.width)?(screen.width-w)/2:100;
TopPosition=(screen.height)?(screen.height-h)/2:100;
} else if((pos!="center" && pos!="random") || pos==null){
LeftPosition=0;
TopPosition=20
} settings="width="+w+",height="+h+",top="+TopPosition+",left="+LeftPosition+",scrollbars="+scroll+",location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=yes";
win=window.open(mypage,myname,settings);
}
</script>
</head>
<body>';
Continued in next post...
