Top Banner

[Bobn]

Hello,

I would like to install a rotating banner image at the top of my forum. Do I do this in the css or the template? I have several images of our town and run them through a script.

[mirahalo]

there are a few mods that can help:


http://custom.simplemachines.org/mods/index.php?mod=2610

http://custom.simplemachines.org/mods/index.php?mod=2847

[Bobn]

Actually,, I want to add a script t0p rotate the big image at the top of this cloned template with several images: http://martinsvilleforums.com/index.php

[mirahalo]

there are plenty of both php or javascript scripts, search in google, pick one that suits your needs then attach your index.template here and post a link of paste the code you found.

[Bobn]

Ok, 

Code Select Expand

<script type="text/javascript">
var imgs3 = new Array("http://www.martinsvilleforums.com/Themes/bob/images/_97R2097_flipped.jpg","http://www.martinsvilleforums.com/Themes/bob/images/_97R2149.jpg","http://www.martinsvilleforums.com/Themes/bob/images/_97R2327_cropped1.jpg");
var alt3 = new Array();
var currentAd3 = 0;
var imgCt3 = 3;
function cycle3() {
  if (currentAd3 == imgCt3) {
    currentAd3 = 0;
  }
var banner3 = document.getElementById('adBanner3');
var link3 = document.getElementById('adLink3');
  banner3.src=imgs3[currentAd3]
  banner3.alt=alt3[currentAd3]
  currentAd3++;
}
  window.setInterval("cycle3()",5000);
</script>
<img src="http://www.martinsvilleforums.com/Themes/bob/images/_97R2097_flipped.jpg" id="adBanner3" border="0" width="941" height="286"></a>


Code Select Expand

<?php
// Version: 2.0 RC3; index

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context, $settings, $options, $txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '2.0 RC3';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as opposed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status separate from topic icons? */
$settings['separate_sticky_lock'] = true;

/* Does this theme use the strict doctype? */
$settings['strict_doctype'] = false;

/* Does this theme use post previews on the message index? */
$settings['message_index_preview'] = false;

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = true;
}

// The main sub template above the content.
function template_html_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_html_safe'], '" />', !empty($context['meta_keywords']) ? '
<meta name="keywords" content="' . $context['meta_keywords'] . '" />' : '', '
<title>', $context['page_title_html_safe'], '</title>';

// Please don't index these Mr Robot.
if (!empty($context['robot_no_index']))
echo '
<meta name="robots" content="noindex" />';

// Present a canonical url for search engines to prevent duplicate content in their indices.
if (!empty($context['canonical_url']))
echo '
<link rel="canonical" href="', $context['canonical_url'], '" />';

// The ?rc3 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'], '/css/index', $context['theme_variant'], '.css?rc3" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/print.css?rc3" media="print" />';

// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="', $scripturl, '?action=help" />
<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']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']))
echo '
<link rel="alternate" type="application/rss+xml" title="', $context['forum_name_html_safe'], ' - ', $txt['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" />';

// Some browsers need an extra stylesheet due to bugs/compatibility issues.
foreach (array('ie7', 'ie6', 'webkit') as $cssfix)
if ($context['browser']['is_' . $cssfix])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/', $cssfix, '.css" />';

// RTL languages require an additional stylesheet.
if ($context['right_to_left'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';

echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?rc3"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?rc3"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "', $settings['theme_url'], '";
var smf_default_theme_url = "', $settings['default_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'], '";', $context['show_pm_popup'] ? '
var fPmPopup = function ()
{
if (confirm("' . $txt['show_personal_messages'] . '"))
window.open(smf_prepareScriptUrl(smf_scripturl) + "action=pm");
}
addLoadEvent(fPmPopup);' : '', '
var ajax_notification_text = "', $txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
// ]]></script>';

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '
</head>
<body>';
}

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<div id="body-top">
<div id="top-banner">
<div id="userarea" class="smalltext">
<span class="time">' , $context['current_time'], '</span><br />';
if($context['user']['is_logged'])
{
echo $txt['hello_member_ndt'] , ' <strong>' , $context['user']['name'] , '</strong><br />';

// Only tell them about their messages if they can read their messages!
if ($context['allow_pm'])
echo '&nbsp;&nbsp;[<a href="', $scripturl, '?action=pm">', $context['user']['messages'], '/<strong>', $context['user']['unread_messages'] , '</strong></a> ', $txt['pm'], ']';

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '[<strong>', $txt['maintenance'], '</strong>]';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '[<a href="', $scripturl, '?action=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] , '', $txt['approve'], '</a> ]';

echo '
<a href="', $scripturl, '?action=unread">', $txt['unread'], '</a> |
<a href="', $scripturl, '?action=unreadreplies">', $txt['replies'], '</a>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo '
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<input class="loginput" type="text" name="user" size="10" />
<input class="loginput" type="password" name="passwrd" size="10" /><br />
<input class="logbutton" type="submit" value="', $txt['login'], '" />
<input type="hidden" name="hash_passwrd" value="" />
</form>';
}
echo '
</div>
<div id="logo"/>
</div>
</div>
<div id="mainbody">
<div class="wrapper">
<div id="toolbar">
',template_menu(),'
</div>
<div class="clr"/>
<div id="bodyarea">';

// Show the navigation tree.
theme_linktree();
}

function template_body_below()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
</div>
</div>
</div>';

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
<div id="footer">
<div id="copywrte">
<span class="smalltext">', theme_copyright(), '<br />
<strong>X-Mas</strong> design by <a href="http://www.dzinerstudio.com" target="_blank">DzinerStudio</a></span>';

// Show the load time?
if ($context['show_load_time'])
echo '<br />
<span class="smalltext">', $txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</span>';

echo '
</div>
</div>';
}

function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
</body></html>';
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="navigate_section">
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
<li', ($link_num == count($context['linktree']) - 1) ? ' class="last"' : '', '>';

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] . '</span>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo ' &#38;#187;';

echo '
</li>';
}
echo '
</ul>
</div>';

$shown_linktree = true;
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="topmenu">
<ul>';

foreach ($context['menu_buttons'] as $act => $button)
echo '<li><a ', $button['active_button'] ? ' class="current"' : '' , ' href="', $button['href'], '"><span>', $button['title'], '</span></a></li>';

echo '
</ul>
</div>';
}

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $strip_options = array())
{
global $settings, $context, $txt, $scripturl;

if (!is_array($strip_options))
$strip_options = array();

// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '
<li><a' . (isset($value['id']) ? ' id="button_strip_' . $value['id'] . '"' : '') . ' class="button_strip_' . $key . '' . (isset($value['active']) ? ' active' : '') . '" href="' . $value['url'] . '"' . (isset($value['custom']) ? ' ' . $value['custom'] : '') . '><span>' . $txt[$value['text']] . '</span></a></li>';
}

// No buttons? No button strip either.
if (empty($buttons))
return;

// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>', '<span class="last">', $buttons[count($buttons) - 1]);

echo '
<div class="buttonlist', !empty($direction) ? ' align_' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>',
implode('', $buttons), '
</ul>
</div>';
}

?>

[Bobn]

Can we make that work?

[mirahalo]

can you wait?  usually  there's a 24 hour period before you can actually bump your topic again, remember, all people in here are volunteers.

[Bobn]

can you wait?  usually  there's a 24 hour period before you can actually bump your topic again, remember, all people in here are volunteers.

Yes sir,, sorry about that

[mirahalo]

ok, you use css to load the image:

Code (css) Select Expand


#top-banner {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://martinsvilleforums.com/Themes/bob/images/custom/top-banner.jpg");
background-origin: padding-box;
background-position: 50% 0px;
background-repeat: no-repeat;
background-size: auto;
height: 305px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
position: relative;
width: 970px;
}


in that case, it will be much easier if you use a php script rather than a javascript one,   heres a basic script:

Code (php) Select Expand


<?php
header("Content-type: image/gif");
die(file_get_contents(mt_rand(1,6) . '.gif'));
?>



1,6   where  6 is the number of  files you want to display, if you wnt to use jpg or png instead of gif  change the .gif   here  image/gif  and here .gif

save it as index.php.  and uploaded in a custom folder,   mysite.com/banners/  for example, then upload all the images you need to display in the same folder named it 1.gif,  2.gif, 3.gif, etc   if you prefer use a .jpg change it in the script.

then, in you css  call the index.php file:


background-image: url("http://martinsvilleforums.com/banners/index.php");

and thats it.

[Bobn]

Very Cool!  Quick Question though,, Could I have a rotating image scrip without page refresh?

[Matthew K.]

You can accomplish this with some simple jQuery. Eventually, I may write a mod for this...we'll see.

Very Cool!  Quick Question though,, Could I have a rotating image scrip without page refresh?

[Bobn]

You can accomplish this with some simple jQuery. Eventually, I may write a mod for this...we'll see.

Very Cool!  Quick Question though,, Could I have a rotating image scrip without page refresh?

Jqurery? Not familiar with that. The images dont have to be linked to anything

[Bobn]

Anyone know a simple way to do this? I found many java scripts to do it but I cant get it to work:

http://martinsvilleforums.com/acfree/index.php