Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Marcus Forsberg on June 21, 2009, 10:48:45 AM

Title: [TIP] Loadingscreen
Post by: Marcus Forsberg on June 21, 2009, 10:48:45 AM
So, the sun's shining, the birds are singing, everybody's outside...
Wait, who cares? Summer holidays are great for coding.  ;D

So, I stumbled upon this topic (http://www.simplemachines.org/community/index.php?topic=319172.0) and started to think about it.
What I came up with isn't really what was requested there, but I hope you'll all find this useful.. Fun.. Entertaining.. Sexy.. Yeah, you know.

So, I'll stop talking and start showing you what I'm doing.

What I made is shown on the below screenshot of my heavily modded testforum (May it rest in pieces peace when it's time is over).


(http://forentadatorerna.se/loadingscreen.png) (http://forentadatorerna.se/loadingscreen.png)
See that tiny box in the middle? No? Then click on the image.

Pretty nice, eh? Now I'll show you what I did.

What you'll need




So let's get started
Start off by opening ./Themes/{your_theme}/style.css.
Add the below piece of code to the very bottom of that file.

/* Loadingscreen while actually loading :P */
.loadingscreen
{
    display: block;
    position: absolute;
    top: 40%;
    left: 45%;
width: 150px;
    text-align: center;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px dashed #cccccc;
padding: 20px;
    background: #fff;
    _background: none; /*this line removes the background in IE*/
    opacity: .75;
}
/* Loadingscreen while invisible */
.loadingscreen_hidden
{
    display:none;
}


That'll make our loadingscreen actually look like.. Like something.




Moving on
Moving on to  ./Themes/{your_theme}/index.template.php.
This is where we add the actual box and gives it life.
Find this:

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


And replace it with this:

Code (Replace with) Select

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

echo'
<div id="loading" class="loadingscreen">
  <p><img src="', $settings['images_url'], '/loading.gif" alt="', $txt['loading'], '" /><br /></p>
</div>
<script type="text/javascript">
  document.getElementById("loading").className = "loadingscreen";
  var finishLoading = function(){document.getElementById("loading").className = "loadingscreen_hidden";};
  var oldLoad = window.onload;
  var newLoad = oldLoad ? function(){finishLoading.call(this);oldLoad.call(this);} : finishLoading;
  window.onload = newLoad;
</script>';





The last file we're going to edit is ./Themes/{your_theme}/languages/Modifications.{language}.php. (Note: If your theme does not have any file like that, go to the default theme instead, ./Themes/default/languages/Modifications.{language}.php).
Add this single line to the end of that file (before ?>):

$txt['loading'] = 'Loading...';




And we're done
That should be it.
Have a look at your forum. If everything works correctly, you'll see the loadingscreen while each page is loading.
But wait...
On my preview we see a tiny blue bar, don't we?
Ah, yes we do.
You'll need to download the image which I have attached to this post and upload it to ./Themes/{your_theme}/images/.
(The image was generated at Ajaxload (http://www.ajaxload.info/). Thanks goes to them)

Refresh your forum (F5) and enjoy.


Marcus "Nas" Forsberg
Title: Re: [TIP] Loadingscreen
Post by: Dzonny on June 21, 2009, 11:29:08 AM
Thank you for this tip, it's very good... :)
Title: Re: [TIP] Loadingscreen
Post by: Paracelsus on June 21, 2009, 01:39:07 PM
I'm wondering if this is going to appear in every page... can it be limited just to the homepage, like www.yoursite.com (and not www.yoursite.com/index.php)?

Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on June 21, 2009, 01:41:58 PM
Sure can. Try this:

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

if(empty($_REQUEST['action']))
   echo'
   <div id="loading" class="loadingscreen">
  <p><img src="', $settings['images_url'], '/loading.gif" alt="', $txt['loading'], '" /><br /></p>
</div>
<script type="text/javascript">
  document.getElementById("loading").className = "loadingscreen";
  var finishLoading = function(){document.getElementById("loading").className = "loadingscreen_hidden";};
  var oldLoad = window.onload;
  var newLoad = oldLoad ? function(){finishLoading.call(this);oldLoad.call(this);} : finishLoading;
  window.onload = newLoad;
</script>';


Title: Re: [TIP] Loadingscreen
Post by: _Anthony_ on June 22, 2009, 03:21:41 AM
Mind if I package this?
Title: Re: [TIP] Loadingscreen
Post by: sAce on June 22, 2009, 03:38:33 AM
cool trick nas, but the rounded corner is not so smooth and looks a bit odd, it theere a way to make like wp ( wordpress ) loading , the full bar and backgrnd fade out
Title: Re: [TIP] Loadingscreen
Post by: Hell Raiser on June 22, 2009, 05:04:07 AM
If there any way then post na dont sit and wait for anyone else Mr.S-ACE  :P :P
Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on June 22, 2009, 05:39:29 AM
Quote from: _Anthony_ on June 22, 2009, 03:21:41 AM
Mind if I package this?

Feel free to, aslong as you leave me my beloved credits. :P

Quote from: S-Ace on June 22, 2009, 03:38:33 AM
cool trick nas, but the rounded corner is not so smooth and looks a bit odd, it theere a way to make like wp ( wordpress ) loading , the full bar and backgrnd fade out

Just play around with the CSS and xHTML till you find something you like. ;)
Background fade out? Then you'd need more javascript.

Title: Re: [TIP] Loadingscreen
Post by: _Anthony_ on June 22, 2009, 05:41:24 AM
Quote from: Nas on June 22, 2009, 05:39:29 AM
Quote from: _Anthony_ on June 22, 2009, 03:21:41 AM
Mind if I package this?

Feel free to, aslong as you leave me my beloved credits. :P
Cool, I'll package it tomorrow.(Later today seeing as its 2:30 AM.....)
Title: Re: [TIP] Loadingscreen
Post by: Paracelsus on June 22, 2009, 06:26:55 AM
Quote from: Nas on June 22, 2009, 05:39:29 AM
Background fade out? Then you'd need more javascript.

Such as?... ;D
Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on June 22, 2009, 06:31:45 AM
Quote from: Paracelsus on June 22, 2009, 06:26:55 AM
Quote from: Nas on June 22, 2009, 05:39:29 AM
Background fade out? Then you'd need more javascript.

Such as?... ;D

Working on it. :P

Btw, did my fix work? Does it show on the boardindex only now?
Title: Re: [TIP] Loadingscreen
Post by: Paracelsus on June 22, 2009, 06:50:51 AM
Quote from: Nas on June 22, 2009, 06:31:45 AM
Quote from: Paracelsus on June 22, 2009, 06:26:55 AM
Quote from: Nas on June 22, 2009, 05:39:29 AM
Background fade out? Then you'd need more javascript.

Such as?... ;D

Working on it. :P

Btw, did my fix work? Does it show on the boardindex only now?

It works flawlessly on my test forum.

Still, it shows up in www.mydomain.index.php page, how to make it appear just when it's www.mydomain.com without index.php on it? (forget it if it's too complicated). The idea is that the loadingscreen appears to users just once when they visit the forum and direct links and backlinks are usually without the index.php... but then again, maybe after the login would be probably be wiser. :-\
Title: Re: [TIP] Loadingscreen
Post by: ttuu on June 22, 2009, 06:56:08 AM
in 1.1.x
open index.template.php
Find:

<body>';

Replace with:

<body>';

echo'
<div id="loading" class="loadingscreen">
  <p><img src="', $settings['images_url'], '/loading.gif" alt="', $txt['loading'], '" /><br /></p>
</div>
<script type="text/javascript">
  document.getElementById("loading").className = "loadingscreen";
  var finishLoading = function(){document.getElementById("loading").className = "loadingscreen_hidden";};
  var oldLoad = window.onload;
  var newLoad = oldLoad ? function(){finishLoading.call(this);oldLoad.call(this);} : finishLoading;
  window.onload = newLoad;
</script>';
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 22, 2009, 01:02:36 PM
Hi Nas

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

echo'
<div id="loading" class="loadingscreen">
  <p><img src="', $settings['images_url'], '/loading.gif" alt="', $txt['loading'], '" /><br /></p>
</div>
<script type="text/javascript">
  document.getElementById("loading").className = "loadingscreen";
  var finishLoading = function(){document.getElementById("loading").className = "loadingscreen_hidden";};
  var oldLoad = window.onload;
  var newLoad = oldLoad ? function(){finishLoading.call(this);oldLoad.call(this);} : finishLoading;
  window.onload = newLoad;
</script>';
  Clicked save. Went back to my forum but it says:

Unable to load the 'main_above' template.

My index.template.php is here -

<?php
// Version: 1.1.5; 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'] = '1.1';

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

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

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;
}

// The main sub template above the content.
function template_body_above()
{
  global
$context, $settings, $options, $scripturl, $txt, $modSettings;

echo'
<div id="loading" class="loadingscreen">
 <p><img src="'
, $settings['images_url'], '/loading.gif" alt="', $txt['loading'], '" /><br /></p>
</div>
<script type="text/javascript">
 document.getElementById("loading").className = "loadingscreen";
 var finishLoading = function(){document.getElementById("loading").className = "loadingscreen_hidden";};
 var oldLoad = window.onload;
 var newLoad = oldLoad ? function(){finishLoading.call(this);oldLoad.call(this);} : finishLoading;
 window.onload = newLoad;
</script>'
;

// 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']);
$options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
}

// 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>
</head>
<body>'
;

echo '
<div class="tborder" '
, $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' : '', '>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">'
;

if (empty($settings['header_logo_url']))
echo '
<span style="font-family: Verdana, sans-serif; font-size: 140%; ">'
, $context['forum_name'], '</span>';
else
echo '
<img src="'
, $settings['header_logo_url'], '" style="margin: 4px;" alt="', $context['forum_name'], '" />';

echo '
</td>
<td align="right" class="catbg">
<img src="'
, $settings['images_url'], '/smflogo.gif" style="margin: 2px;" alt="" />
</td>
</tr>
</table>'
;


// display user name
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>'
;

if($context['user']['is_logged'])
echo '
<td class="titlebg2" height="32">
<span style="font-size: 130%;"> '
, $txt['hello_member_ndt'], ' <b>', $context['user']['name'] , '</b></span>
</td>'
;

// display the time
echo '
<td class="titlebg2" height="32" align="right">
<span class="smalltext">'
, $context['current_time'], '</span>';

// this is the upshrink button for the user info section
echo '
<a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="'
, $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" align="bottom" style="margin: 0 1ex;" /></a>
</td>
</tr>
<tr id="upshrinkHeader"'
, empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<td valign="top" colspan="2">
<table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
<tr>'
;

if (!empty($context['user']['avatar']))
echo '
<td class="windowbg" valign="middle">'
, $context['user']['avatar']['image'], '</td>';

echo '
<td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext">'
;

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
<a href="'
, $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a> <br />
<a href="'
, $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a><br />';

}
// Otherwise they're a guest - send them a lovely greeting...
else
echo $txt['welcome_guest'];

// Now, onto our second set of info, are they logged in again?
if ($context['user']['is_logged'])
{
// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<b>'
, $txt[616], '</b><br />';

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

// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))
{
echo '
'
, $txt['totalTimeLogged1'];

// If days is just zero, don't bother to show it.
if ($context['user']['total_time_logged_in']['days'] > 0)
echo $context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

// Same with hours - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['hours'] > 0)
echo $context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

// But, let's always show minutes - Time wasted here: 0 minutes ;).
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
}
echo ' </span>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo ' </span>
<script language="JavaScript" type="text/javascript" src="'
, $settings['default_theme_url'], '/sha1.js"></script>

<form action="'
, $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" class="middletext" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">'
, $txt['smf53'], '</option>
<option value="1440">'
, $txt['smf47'], '</option>
<option value="10080">'
, $txt['smf48'], '</option>
<option value="43200">'
, $txt['smf49'], '</option>
<option value="-1" selected="selected">'
, $txt['smf50'], '</option>
</select>
<input type="submit" value="'
, $txt[34], '" /><br />
<span class="middletext">'
, $txt['smf52'], '</span>
<input type="hidden" name="hash_passwrd" value="" />
</form>'
;
}

echo '
</td>
</tr>
</table>
</td>
</tr>
</table>'
;

echo '
<table id="upshrinkHeader2"'
, empty($options['collapse_header']) ? '' : ' style="display: none;"', ' width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>'
;

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<td width="90%" class="titlebg2">
<span class="smalltext"><b>'
, $txt[102], '</b>: ', $context['random_news_line'], '</span>
</td>'
;
echo '
<td class="titlebg2" align="right" nowrap="nowrap" valign="top">
<form action="'
, $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '" style="margin: 0;">
<a href="'
, $scripturl, '?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0 1ex;" alt="" /></a>
<input type="text" name="search" value="" style="width: 190px;" />&nbsp;
<input type="submit" name="submit" value="'
, $txt[182], '" style="width: 11ex;" />
<input type="hidden" name="advanced" value="0" />'
;

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="'
, $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd['
, $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>
</td>
</tr>
</table>
</div>'
;


// Show the menu here, according to the menu sub template.
template_menu();


// The main content should go here.
echo '
<div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">'
;
}

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

echo '
</div>'
;

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '

<div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
, $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' : '', '">
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function smfFooterHighlight(element, value)
{
element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
}
// ]]></script>
<table cellspacing="0" cellpadding="2" border="0" align="center" width="100%">
<tr>
<td width="70%" valign="top" align="left">
'
, !empty($settings['footer_links_l']) ? '<span class="smalltext">'. parse_bbc($settings['footer_links_l']). '</span>' : '', '
</td>
<td width="30%" valign="top" align="right">
'
, !empty($settings['footer_links_r']) ? '<span class="smalltext">'. parse_bbc($settings['footer_links_r']). '</span>' : '', '
</td></tr>
<tr><td width="70%" valign="top" align="left">
'
, theme_copyright(), '
</td>
<td width="30%" valign="top" align="right">
'
, !empty($settings['custom_copyright_single_line']) ? '<span class="smalltext">'. parse_bbc($settings['custom_copyright_single_line']). '</span>' : '', '
</td>
</tr>
</table>'
;

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

// This is an interesting bug in Internet Explorer AND Safari. Rather annoying, it makes overflows just not tall enough.
if (($context['browser']['is_ie'] && !$context['browser']['is_ie4']) || $context['browser']['is_mac_ie'] || $context['browser']['is_safari'] || $context['browser']['is_firefox'])
{
// The purpose of this code is to fix the height of overflow: auto div blocks, because IE can't figure it out for itself.
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA['
;

// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
if ($context['browser']['is_safari'])
echo '
window.addEventListener("load", smf_codeFix, false);

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
}
}'
;
elseif ($context['browser']['is_firefox'])
echo '
window.addEventListener("load", smf_codeFix, false);
function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
codeFix[i].style.overflow = "scroll";
}
}'
;
else
echo '
var window_oldOnload = window.onload;
window.onload = smf_codeFix;

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = codeFix.length - 1; i > 0; i--)
{
if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
}

if (window_oldOnload)
{
window_oldOnload();
window_oldOnload = null;
}
}'
;

echo '
// ]]></script>'
;
}

echo '
</div>'
;

// The following will be used to let the user know that some AJAX process is running
echo '
<div id="ajax_in_progress" style="display: none;'
, $context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' : '', '">', $txt['ajax_in_progress'], '</div>
</body></html>'
;
}

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

echo '<div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// 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 '<b>', $settings['linktree_link'] && isset($tree['url']) ? '<a href="' . $tree['url'] . '" class="nav">' . $tree['name'] . '</a>' : $tree['name'], '</b>';

// 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 '&nbsp;>&nbsp;';
}

echo '</div>';
}

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

// Work out where we currently are.
$current_action = 'home';
       if (isset(
$_GET['dl']))
       
$current_action='downloads';
if (in_array($context['current_action'], array('admin', 'ban', 'boardrecount', 'cleanperms', 'detailedversion', 'dumpdb', 'featuresettings', 'featuresettings2', 'findmember', 'maintain', 'manageattachments', 'manageboards', 'managecalendar', 'managesearch', 'membergroups', 'modlog', 'news', 'optimizetables', 'packageget', 'packages', 'permissions', 'pgdownload', 'postsettings', 'regcenter', 'repairboards', 'reports', 'serversettings', 'serversettings2', 'smileys', 'viewErrorLog', 'viewmembers', 'downloads')))
$current_action = 'admin';
if (in_array($context['current_action'], array('search', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm', 'forum', 'tpadmin')))
$current_action = $context['current_action'];
if ($context['current_action'] == 'search2')
$current_action = 'search';

if (isset($_GET['dl']))
$current_action = 'dlmanager';

if (isset($_GET['board']) || isset($_GET['topic']) || $context['current_action']=='forum')
$current_action = 'forum';

if ($context['current_action']=='tpadmin')
$current_action = 'admin';

if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' ? 'profile' : 'admin';

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first = 'last';
$last = 'first';
}
else
{
$first = 'first';
$last = 'last';
}

// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="maintab_'
, $first , '">&nbsp;</td>';

// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'home' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '">' , $txt[103] , '</a>
</td>'
, $current_action == 'home' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

if(
$settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo ($current_action=='forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_first">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action=='forum' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=forum">'.$txt['tp-forum'].'</a>
</td>'
, $current_action=='forum' ? '<td class="maintab_active_last">&nbsp;</td>' : '';
// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'help' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=help">' , $txt[119] , '</a>
</td>'
, $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'search' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=search">' , $txt[182] , '</a>
</td>'
, $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'admin' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>'
, $current_action == 'admin' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'profile' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>'
, $current_action == 'profile' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Show the [downloads] button.
echo ($current_action == 'dlmanager' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'dlmanager' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=tpmod;dl">' , $txt[downloads] , '</a>
</td>'
, $current_action == 'dlmanager' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'pm' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
</td>'
, $current_action == 'pm' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'calendar' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>'
, $current_action == 'calendar' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'mlist' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>'
, $current_action == 'mlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'login' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=login">' , $txt[34] , '</a>
</td>'
, $current_action == 'login' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=register">' , $txt[97] , '</a>
</td>'
, $current_action == 'register' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'logout' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>'
, $current_action == 'logout' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The end of tab section.
echo '
<td class="maintab_'
, $last , '">&nbsp;</td>
'
;
// TinyPortal
if($context['TPortal']['leftbar'])
            echo
'<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderLeftbar(!current_leftbar); return false;"><img id="upshrinkLeftbar" src="', $settings['images_url'], '/', empty($options['collapse_leftbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempLeftbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
        if(
$context['TPortal']['rightbar'])
            echo
'<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderRightbar(!current_rightbar); return false;"><img id="upshrinkRightbar" src="', $settings['images_url'], '/', empty($options['collapse_rightbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempRightbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
// TinyPortal end
echo '
</tr>
</table>'
;

}

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

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="'
, $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '">&nbsp;</td>
<td class="'
, $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode(' &nbsp;|&nbsp; ', $button_strip) , '</td>
<td class="'
, $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '">&nbsp;</td>';
}

?>





Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on June 22, 2009, 01:06:47 PM
Are you using SMF 1.1.x? If so, use the code posted by ttuu above.
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 22, 2009, 01:11:14 PM
Quote from: Nas on June 22, 2009, 01:06:47 PM
Are you using SMF 1.1.x? If so, use the code posted by ttuu above.

Can't find <body>';

Looked everywhere!


Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on June 22, 2009, 01:12:14 PM
It is there.

</head>
<body>';
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 22, 2009, 01:15:37 PM
Quote from: Nas on June 22, 2009, 01:12:14 PM
It is there.

</head>
<body>';


Ok. Took out the smf 2x you said not to use. And added tutuu thing.

Just says: Unable to load the 'main_above' template.
Title: Re: [TIP] Loadingscreen
Post by: Dzonny on June 22, 2009, 02:02:54 PM
Quote from: Nas on June 21, 2009, 10:48:45 AM
Moving on to  ./Themes/{your_theme}/index.template.php.
This is where we add the actual box and gives it life.
Find this:

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


If you dont have that code in your index,template, you could also search for this one:
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 23, 2009, 02:59:02 PM
Okay. I added in one tutuu added.

There is a blank image at the top of my forum and nothing shows up when the forum goes to different pages. I added the loading.gif


Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on June 23, 2009, 03:15:59 PM
Did you add everything to style.css?
Title: Re: [TIP] Loadingscreen
Post by: Dzonny on June 24, 2009, 05:29:37 AM
Think that you didn't add code at right place in index.template.php..... :)
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 24, 2009, 12:40:49 PM
Quote from: Nas on June 23, 2009, 03:15:59 PM
Did you add everything to style.css?

Yes

I added it at the end of the file
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 24, 2009, 01:19:02 PM
Quote from: Joe N on June 24, 2009, 12:40:49 PM
Quote from: Nas on June 23, 2009, 03:15:59 PM
Did you add everything to style.css?

Yes

I added it at the end of the file

Here is my style.css

/* Normal, standard links. */
a:link
{
color: #476C8E;
text-decoration: none;
}
a:visited
{
color: #476C8E;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
color: #cc3333;
text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body
{
background-color: #E5E5E8;
margin: 0px;
padding: 12px 30px 4px 30px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
color: #000000;
font-family: verdana, sans-serif;
}
input, button
{
font-size: 90%;
}

textarea
{
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 90%;
font-weight: normal;
color: #000000;
font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}

/* No image should have a border when linked */
a img
{
border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #D7DAEC;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
color: #000000;
background-color: #ECEDF3;
}
.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}
.windowbg3
{
color: #000000;
background-color: #E0E1E8;
}
/* the today container in calendar */
.calendar_today
{
background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: black;
font-style: normal;
background: url(images/titlebg.jpg) #E9F0F6 repeat-x;
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}

.titlebg a:hover
{
color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
color: black;
font-style: normal;
text-decoration: underline;
}

.titlebg2 a:hover
{
text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background: url(images/catbg.jpg) #88A6C0 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #375576;
}
.catbg, .catbg2
{
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
font-size: 95%;
color: white;
text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
color: #e0e0ff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #ADADAD;
padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #696969;
background-color: #FFFFFF;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: verdana, sans-serif;
}
.middletext
{
font-size: 90%;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error
{
color: red;
}


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background: url(images/maintab_first.gif) left bottom no-repeat;
width: 10px;
}
.maintab_back
{
background: url(images/maintab_back.gif) left bottom repeat-x;
}
.maintab_last
{
background: url(images/maintab_last.gif) left bottom no-repeat;
width: 8px;
}
.maintab_active_first
{
background: url(images/maintab_active_first.gif) left bottom no-repeat;
width: 6px;
}
.maintab_active_back
{
background: url(images/maintab_active_back.gif) left bottom repeat-x;
}
.maintab_active_last
{
background: url(images/maintab_active_last.gif) left bottom no-repeat;
width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background: url(images/mirrortab_first.gif) no-repeat;
width: 10px;
}
.mirrortab_back
{
background: url(images/mirrortab_back.gif) repeat-x;
}
.mirrortab_last
{
background: url(images/mirrortab_last.gif) no-repeat;
width: 6px;
}
.mirrortab_active_first
{
background: url(images/mirrortab_active_first.gif) no-repeat;
width: 6px;
}
.mirrortab_active_back
{
background: url(images/mirrortab_active_back.gif) repeat-x;
}
.mirrortab_active_last
{
background: url(images/mirrortab_active_last.gif) no-repeat;
width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}

/* The AJAX notifier */
#ajax_in_progress
{
background: #32CD32;
color: white;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 3px;
width: 100%;
position: fixed;
top: 0;
left: 0;

/* Loadingscreen while actually loading :P */
.loadingscreen
{
    display: block;
    position: absolute;
    top: 40%;
    left: 45%;
width: 150px;
    text-align: center;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px dashed #cccccc;
padding: 20px;
    background: #fff;
    _background: none; /*this line removes the background in IE*/
    opacity: .75;
}
/* Loadingscreen while invisible */
.loadingscreen_hidden
{
    display:none;
}
?>
Title: Re: [TIP] Loadingscreen
Post by: Dzonny on June 24, 2009, 01:57:31 PM
Have you edited index,template.php?
Pls attach that file here to see it...
Title: Re: [TIP] Loadingscreen
Post by: Sevgiformu.com on June 24, 2009, 03:12:12 PM
hi nas very nice

doing this is more elegant and accurate if we

./Themes/{your thema}/index.template.php.

find.

// Show the menu here, according to the menu sub template.
template_menu();


add to the gold



echo'
<div id="loading" class="loadingscreen">
  <p><img src="', $settings['images_url'], '/loading.gif" alt="', $txt['loading'], '" /><br /></p>
</div>
<script type="text/javascript">
  document.getElementById("loading").className = "loadingscreen";
  var finishLoading = function(){document.getElementById("loading").className = "loadingscreen_hidden";};
  var oldLoad = window.onload;
  var newLoad = oldLoad ? function(){finishLoading.call(this);oldLoad.call(this);} : finishLoading;
  window.onload = newLoad;
</script>';



(http://www.images.gen.tr/pfiles/5779/ads%FDz.JPG)
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 25, 2009, 12:35:12 PM
Quote from: Dzonny on June 24, 2009, 01:57:31 PM
Have you edited index,template.php?
Pls attach that file here to see it...

Can't attach my index.template.php (Won't let me)

I am using smf 1.1.9 so I used ttuu's guide

<?php
// Version: 1.1.5; 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'] = '1.1';

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

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

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;
}

// 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']);
$options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
}

// 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 pm informer
echo '
<script language="JavaScript" type="text/javascript"><!-- // -->'
;

echo chr(60) . chr(33) . chr(91) . chr(67) . chr(68) . chr(65) . chr(84) . chr(65) . chr(91);

echo '
var current_header_pmi = '
, empty($options['collapse_header_pmi']) ? 'false' : 'true', ';

function shrinkHeaderPMI(mode)
{'
;

if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkPMI=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header_pmi", mode ? 1 : 0, null, "'
, $context['session_id'], '");';

echo '
document.getElementById("upshrink_pmi").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderPMI").style.display = mode ? "none" : "";

current_header_pmi = mode;
}
// '
;

echo chr(93) . chr(93) . chr(62);
echo '
</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>
</head>
<body>'
;

echo
'
<div id="loading" class="loadingscreen">
 <p><img src="'
, $settings['images_url'], '/loading.gif" alt="', $txt['loading'], '" /><br /></p>
</div>
<script type="text/javascript">
 document.getElementById("loading").className = "loadingscreen";
 var finishLoading = function(){document.getElementById("loading").className = "loadingscreen_hidden";};
 var oldLoad = window.onload;
 var newLoad = oldLoad ? function(){finishLoading.call(this);oldLoad.call(this);} : finishLoading;
 window.onload = newLoad;
</script>'
;

echo '
<div class="tborder" '
, $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' : '', '>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">'
;

if (empty($settings['header_logo_url']))
echo '
<span style="font-family: Verdana, sans-serif; font-size: 140%; ">'
, $context['forum_name'], '</span>';
else
echo '
<img src="'
, $settings['header_logo_url'], '" style="margin: 4px;" alt="', $context['forum_name'], '" />';

echo '
</td>
<td align="right" class="catbg">
<img src="'
, $settings['images_url'], '/smflogo.gif" style="margin: 2px;" alt="" />
</td>
</tr>
</table>'
;


// display user name
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>'
;

if($context['user']['is_logged'])
echo '
<td class="titlebg2" height="32">
<span style="font-size: 130%;"> '
, $txt['hello_member_ndt'], ' <b>', $context['user']['name'] , '</b></span>
</td>'
;

// display the time
echo '
<td class="titlebg2" height="32" align="right">
<span class="smalltext">'
, $context['current_time'], '</span>';

// this is the upshrink button for the user info section
echo '
<a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="'
, $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" align="bottom" style="margin: 0 1ex;" /></a>
</td>
</tr>
<tr id="upshrinkHeader"'
, empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<td valign="top" colspan="2">
<table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
<tr>'
;

if (!empty($context['user']['avatar']))
echo '
<td class="windowbg" valign="middle">'
, $context['user']['avatar']['image'], '</td>';

echo '
<td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext">'
;

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
<a href="'
, $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a> <br />
<a href="'
, $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a><br />';

}
// Otherwise they're a guest - send them a lovely greeting...
else
echo $txt['welcome_guest'];

// Now, onto our second set of info, are they logged in again?
if ($context['user']['is_logged'])
{
// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<b>'
, $txt[616], '</b><br />';

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

// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))
{
echo '
'
, $txt['totalTimeLogged1'];

// If days is just zero, don't bother to show it.
if ($context['user']['total_time_logged_in']['days'] > 0)
echo $context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

// Same with hours - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['hours'] > 0)
echo $context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

// But, let's always show minutes - Time wasted here: 0 minutes ;).
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
}
echo ' </span>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo ' </span>
<script language="JavaScript" type="text/javascript" src="'
, $settings['default_theme_url'], '/sha1.js"></script>

<form action="'
, $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" class="middletext" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">'
, $txt['smf53'], '</option>
<option value="1440">'
, $txt['smf47'], '</option>
<option value="10080">'
, $txt['smf48'], '</option>
<option value="43200">'
, $txt['smf49'], '</option>
<option value="-1" selected="selected">'
, $txt['smf50'], '</option>
</select>
<input type="submit" value="'
, $txt[34], '" /><br />
<span class="middletext">'
, $txt['smf52'], '</span>
<input type="hidden" name="hash_passwrd" value="" />
</form>'
;
}

echo '
</td>
</tr>
</table>
</td>
</tr>
</table>'
;

echo '
<table id="upshrinkHeader2"'
, empty($options['collapse_header']) ? '' : ' style="display: none;"', ' width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>'
;

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<td width="90%" class="titlebg2">
<span class="smalltext"><b>'
, $txt[102], '</b>: ', $context['random_news_line'], '</span>
</td>'
;
echo '
<td class="titlebg2" align="right" nowrap="nowrap" valign="top">
<form action="'
, $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '" style="margin: 0;">
<a href="'
, $scripturl, '?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0 1ex;" alt="" /></a>
<input type="text" name="search" value="" style="width: 190px;" />&nbsp;
<input type="submit" name="submit" value="'
, $txt[182], '" style="width: 11ex;" />
<input type="hidden" name="advanced" value="0" />'
;

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="'
, $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd['
, $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>
</td>
</tr>
</table>
</div>'
;


// Show the menu here, according to the menu sub template.
template_menu();

//The PM Informer is closed by default.
$options['collapse_header_pmi'] = 1;

//Do we have some new pms? Show the newest.
if(!empty($context['user']['unread_messages'])) {
echo '
<table align="center" width="500px">
<tr>
<td>
<div style="padding: 6px; vertical-align: middle; text-align: center; '
,!empty($modSettings['pmi_style']) ? $modSettings['pmi_style'] : $txt['pmi_style_standard'],'">
<a href="#" onclick="shrinkHeaderPMI(!current_header_pmi); return false;"><img id="upshrink_pmi" src="'
, $settings['images_url'], '/', empty($options['collapse_header_pmi']) ? 'collapse.gif' : 'expand.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin-right: 2ex;" align="right" /></a>';
printf($txt['pmi_title'], $context['user']['unread_messages']);
echo '
</div>
<div id="upshrinkHeaderPMI"'
, empty($options['collapse_header_pmi']) ? '' : ' style="display: none;"', '>
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="windowbg">
<td>
<b>'
, $txt[318], ':</b> <a href="' . $scripturl . '?action=profile;u=', $context['pm_informer']['from'], '">', $context['pm_informer']['sender'], '</a><br />
<b>'
, $txt[319], ':</b> ', $context['pm_informer']['subject'], '<br />
<b>'
, $txt[317], ':</b> ', $context['pm_informer']['msgtime'], '<br />
<b>'
, $txt[72], ':</b> ', $context['pm_informer']['body'], '<br /><br />
<div align="right"><a href="'
. $scripturl . '?action=pm"><span class="smalltext">', $txt['pmi_view_all'], '</span></a></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>'
;
}


// The main content should go here.
echo '
<div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">'
;
}

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

echo '
</div>'
;

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '

<div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
, $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' : '', '">
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function smfFooterHighlight(element, value)
{
element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
}
// ]]></script>
<table cellspacing="0" cellpadding="2" border="0" align="center" width="100%">
<tr>
<td width="70%" valign="top" align="left">
'
, !empty($settings['footer_links_l']) ? '<span class="smalltext">'. parse_bbc($settings['footer_links_l']). '</span>' : '', '
</td>
<td width="30%" valign="top" align="right">
'
, !empty($settings['footer_links_r']) ? '<span class="smalltext">'. parse_bbc($settings['footer_links_r']). '</span>' : '', '
</td></tr>
<tr><td width="70%" valign="top" align="left">
'
, theme_copyright(), '
</td>
<td width="30%" valign="top" align="right">
'
, !empty($settings['custom_copyright_single_line']) ? '<span class="smalltext">'. parse_bbc($settings['custom_copyright_single_line']). '</span>' : '', '
</td>
</tr>
</table>'
;

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

// This is an interesting bug in Internet Explorer AND Safari. Rather annoying, it makes overflows just not tall enough.
if (($context['browser']['is_ie'] && !$context['browser']['is_ie4']) || $context['browser']['is_mac_ie'] || $context['browser']['is_safari'] || $context['browser']['is_firefox'])
{
// The purpose of this code is to fix the height of overflow: auto div blocks, because IE can't figure it out for itself.
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA['
;

// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
if ($context['browser']['is_safari'])
echo '
window.addEventListener("load", smf_codeFix, false);

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
}
}'
;
elseif ($context['browser']['is_firefox'])
echo '
window.addEventListener("load", smf_codeFix, false);
function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
codeFix[i].style.overflow = "scroll";
}
}'
;
else
echo '
var window_oldOnload = window.onload;
window.onload = smf_codeFix;

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = codeFix.length - 1; i > 0; i--)
{
if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
}

if (window_oldOnload)
{
window_oldOnload();
window_oldOnload = null;
}
}'
;

echo '
// ]]></script>'
;
}

echo '
</div>'
;

// The following will be used to let the user know that some AJAX process is running
echo '
<div id="ajax_in_progress" style="display: none;'
, $context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' : '', '">', $txt['ajax_in_progress'], '</div>
</body></html>'
;
}

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

echo '<div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// 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 '<b>', $settings['linktree_link'] && isset($tree['url']) ? '<a href="' . $tree['url'] . '" class="nav">' . $tree['name'] . '</a>' : $tree['name'], '</b>';

// 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 '&nbsp;>&nbsp;';
}

echo '</div>';
}

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

// Work out where we currently are.
$current_action = 'home';
       if (isset(
$_GET['dl']))
       
$current_action='downloads';
if (in_array($context['current_action'], array('admin', 'ban', 'boardrecount', 'cleanperms', 'detailedversion', 'dumpdb', 'featuresettings', 'featuresettings2', 'findmember', 'maintain', 'manageattachments', 'manageboards', 'managecalendar', 'managesearch', 'membergroups', 'modlog', 'news', 'optimizetables', 'packageget', 'packages', 'permissions', 'pgdownload', 'postsettings', 'regcenter', 'repairboards', 'reports', 'serversettings', 'serversettings2', 'smileys', 'viewErrorLog', 'viewmembers', 'downloads')))
$current_action = 'admin';
if (in_array($context['current_action'], array('search', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm', 'forum', 'tpadmin')))
$current_action = $context['current_action'];
if ($context['current_action'] == 'search2')
$current_action = 'search';

if (isset($_GET['dl']))
$current_action = 'dlmanager';

if (isset($_GET['board']) || isset($_GET['topic']) || $context['current_action']=='forum')
$current_action = 'forum';

if ($context['current_action']=='tpadmin')
$current_action = 'admin';

if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' ? 'profile' : 'admin';

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first = 'last';
$last = 'first';
}
else
{
$first = 'first';
$last = 'last';
}

// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="maintab_'
, $first , '">&nbsp;</td>';

// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'home' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '">' , $txt[103] , '</a>
</td>'
, $current_action == 'home' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

if(
$settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo ($current_action=='forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_first">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action=='forum' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=forum">'.$txt['tp-forum'].'</a>
</td>'
, $current_action=='forum' ? '<td class="maintab_active_last">&nbsp;</td>' : '';
// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'help' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=help">' , $txt[119] , '</a>
</td>'
, $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'search' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=search">' , $txt[182] , '</a>
</td>'
, $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'admin' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>'
, $current_action == 'admin' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'profile' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>'
, $current_action == 'profile' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Show the [downloads] button.
echo ($current_action == 'dlmanager' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'dlmanager' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=tpmod;dl">' , $txt[downloads] , '</a>
</td>'
, $current_action == 'dlmanager' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'pm' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
</td>'
, $current_action == 'pm' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'calendar' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>'
, $current_action == 'calendar' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'mlist' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>'
, $current_action == 'mlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'login' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=login">' , $txt[34] , '</a>
</td>'
, $current_action == 'login' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=register">' , $txt[97] , '</a>
</td>'
, $current_action == 'register' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_'
, $current_action == 'logout' ? 'active_back' : 'back' , '">
<a href="'
, $scripturl, '?action=logout;sesc=', $context['session_id'], '" onclick="return confirm(\'', $txt['logout_pop_up'], '?\');">' , $txt[108] , '</a>
</td>'
, $current_action == 'logout' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The end of tab section.
echo '
<td class="maintab_'
, $last , '">&nbsp;</td>
'
;
// TinyPortal
if($context['TPortal']['leftbar'])
            echo
'<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderLeftbar(!current_leftbar); return false;"><img id="upshrinkLeftbar" src="', $settings['images_url'], '/', empty($options['collapse_leftbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempLeftbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
        if(
$context['TPortal']['rightbar'])
            echo
'<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderRightbar(!current_rightbar); return false;"><img id="upshrinkRightbar" src="', $settings['images_url'], '/', empty($options['collapse_rightbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempRightbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
// TinyPortal end
echo '
</tr>
</table>'
;

}

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

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="'
, $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '">&nbsp;</td>
<td class="'
, $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode(' &nbsp;|&nbsp; ', $button_strip) , '</td>
<td class="'
, $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '">&nbsp;</td>';
}

?>
Title: Re: [TIP] Loadingscreen
Post by: Dzonny on June 25, 2009, 12:47:41 PM
Try thisone...

http://rapidshare.com/files/248564447/index.template.php.html

Khmz, i cant add Attachments too?!  ???
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 26, 2009, 12:24:47 PM
Quote from: Dzonny on June 25, 2009, 12:47:41 PM
Try thisone...

http://rapidshare.com/files/248564447/index.template.php.html

Khmz, i cant add Attachments too?!  ???

Added it. The image has removed at the top but it still doesn't show

using smf 1.1.9
Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on June 28, 2009, 05:13:20 AM
It doesn't work as the code is placed in the wrong function, before the xHTML starts. This have to be inside of the <body> tag.
Try the attached file. This should work.
Title: Re: [TIP] Loadingscreen
Post by: Joe N on June 28, 2009, 05:19:38 AM
Quote from: Nas on June 28, 2009, 05:13:20 AM
It doesn't work as the code is placed in the wrong function, before the xHTML starts. This have to be inside of the <body> tag.
Try the attached file. This should work.

No. It doesn't

Shows the loading image at the top like before

see: http://thechill.icr38.net/smf
Title: Re: [TIP] Loadingscreen
Post by: Sabre™ on June 28, 2009, 06:19:06 AM
Works flawless!!
Easy to add your own animation etc..

Cheers :)
Title: Re: [TIP] Loadingscreen
Post by: SPerroud on July 04, 2009, 01:39:23 PM
Thanks.
For all themes¿?
Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on July 04, 2009, 01:52:28 PM
Yes, all themes,
Title: Re: [TIP] Loadingscreen
Post by: Nibogo on July 06, 2009, 07:37:07 PM
pretty nice Nas really elegant :)
Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on July 07, 2009, 12:05:06 AM
Thanks, NIBOGO. :)
Title: Re: [TIP] Loadingscreen
Post by: rune-coders on July 17, 2009, 05:43:26 PM
Thanks :)
Title: Re: [TIP] Loadingscreen
Post by: Liam. on July 21, 2009, 04:46:14 PM
I've packaged this, if you don't mind, but before I release it, it's having quite some issues as the others above have explained. I did get it working, but then I messed it up again I'll PM you a download link to see if you can fix it...
Title: Re: [TIP] Loadingscreen
Post by: kat on July 21, 2009, 05:00:05 PM
Quote from: Nas on June 21, 2009, 10:48:45 AMSee that tiny box in the middle? No? Then click on the image.

I did.

QuoteNot Found
The requested URL /loadingscreen.png was not found on this server.

:(
Title: Re: [TIP] Loadingscreen
Post by: Marcus Forsberg on July 25, 2009, 11:55:24 AM
Quote from: iKorp on July 21, 2009, 04:46:14 PM
I've packaged this, if you don't mind, but before I release it, it's having quite some issues as the others above have explained. I did get it working, but then I messed it up again I'll PM you a download link to see if you can fix it...

I'm afraid this has already been done.

Quote from: Kat on July 21, 2009, 05:00:05 PM
Quote from: Nas on June 21, 2009, 10:48:45 AMSee that tiny box in the middle? No? Then click on the image.

I did.

QuoteNot Found
The requested URL /loadingscreen.png was not found on this server.

:(

I'll fix that soon.
Title: Re: [TIP] Loadingscreen
Post by: kat on July 25, 2009, 12:01:53 PM
Ta, mate!
Title: Re: [TIP] Loadingscreen
Post by: CultureGlue on December 26, 2009, 03:14:33 PM
Can somebody tell me how to make this work for smf 1.1.10
Or make a mod of it?

Thanks
Title: Re: [TIP] Loadingscreen
Post by: Joker™ on December 27, 2009, 01:06:21 AM
i tried to implement it on SMF 2.0 RC2 , but nothing happens....

any idea how it will work on it
Title: Re: [TIP] Loadingscreen
Post by: CultureGlue on December 27, 2009, 05:13:17 AM
this is good/nice for a slower working web host.. If it works
Title: Re: [TIP] Loadingscreen
Post by: Chair on March 04, 2010, 02:21:17 PM
Great tip, just one problem, I'm using SMF 2.0RC2, and the loading image does not disappear when the page finishes loading. How can I fix this?

EDIT: The loading image works absolutely fine, sorry about that. It does however remain visible on my homepage, but I suppose thats because I have some javascript there in a custom html block? is there a way to not have the loading image on there?
Title: Re: [TIP] Loadingscreen
Post by: MultiformeIngegno on March 05, 2010, 09:29:58 AM
Nice tip! ;)