News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

[Tip] Drop Down Menu Tutorial (..for all themes)

Started by Hoochie Coochie Man, August 05, 2008, 05:37:39 AM

Previous topic - Next topic

genusis

How would you do this for the Babylon theme for version 2 beta 4? thank you for who ever helps me.
hello I am Genusis
this is my site
http://spirean.com

Antechinus

That's an interesting question actually. Anyone care to tackle a 2b4 theme that uses image buttons?

genusis

yes please can anyone please tackle the Babylon theme for me, i would much appreciate it, and if its not much though but i would add an affiliate to my forum going to your site. ^^ thank you for your help whom ever. 
hello I am Genusis
this is my site
http://spirean.com

Antechinus

K, it's raining and I'm bored. I'll have a crack at it.

Antechinus

Quote from: genusis on November 01, 2008, 10:23:31 AM
yes please can anyone please tackle the Babylon theme for me, i would much appreciate it, and if its not much though but i would add an affiliate to my forum going to your site. ^^ thank you for your help whom ever.

Sorted. Only slight complication is that I had to put the header upshrink at the right end of the menu instead of at the left. It was the quickest and easiest way to get it stable. Shouldn't bother you too much.

The first code block is a custom javascript to preload the drop menu images so they will display with no delay for rendering when the theme is first loaded. The other code blocks are just my normal drop menu codes, slightly altered for Babylon.

Everyone else note that this is for 2b4, not  for 1.1.6.

For index.template.php find:

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



Add before:

echo '
    <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var PreloadImages = new Array(
         "/images/submenu_top.png",
         "/images/submenu_bg.png",
         "/images/submenu_bottom.png"
      );

      var myImages = new Array();
      for(var i = 0; i < PreloadImages.length; i++)
      {
         myImages[i] = new Image();
         myImages[i].src = "'. $settings['theme_url'] .'" + PreloadImages[i];
      }
    // ]]></script>';



Find:

</table>

<a href="javascript:void(0);" onclick="mainHeader.toggle(); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 2ex 2px 0;" border="0" /></a>';

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

echo '
</div>';



Replace with:

</table>

        <div id="toolbar">';

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

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



Find:

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

// We aren't showing all the buttons in this theme.
$hide_buttons = array('pm', 'mlist');

foreach ($context['menu_buttons'] as $act => $button)
if (in_array($act, $hide_buttons))
continue;
else
echo '
<a href="', $button['href'], '">', $settings['use_image_buttons'] ? '<img src="' . $settings['lang_images_url'] . '/' . $act . '.gif" alt="' . $button['title'] . '" border="0" />' : $button['title'], '</a>', !empty($button['is_last']) ? '' : $context['menu_separator'];
}



Replace with:

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

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

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li><a href="', $button['href'], '"><span class="menu"><img src="' . $settings['lang_images_url'] . '/' . $act . '.gif" alt="' . $button['title'] . '" border="0" /></span></a>';

  //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
                             <div class="sub">
<ul>';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li><a href="', $sub_button['href'], '">' , $sub_button['title'] , '</a></li>';
            echo '
                                 </ul>
<div class="btm-bg"></div>
</div>';      
         }

echo'
        </li>';
}
echo '

         <li><a href="javascript:void(0);" onclick="mainHeader.toggle(); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 0 2ex 2px 0;" border="0" /></a></li>

</ul>
</div>';
}



For style.css, add this to the end of the file:

/*Drop menu codes*/

#toolbar {
    margin: 4px 0 0 0;
    padding: 0;
    height: 16px;
    background: none;
}

.tabs {
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: none;
font-family: tahoma, sans-serif;
text-transform: uppercase;
font-size: 9px;
}

.tabs a:link{
cursor: pointer;
}

.tabs a:visited { }

.tabs ul {
height: 16px;
float: left;
margin: 0;
padding: 0;
list-style: none;
}

.tabs ul li a.current { }

.tabs li {
float: left;
padding: 0;
position: relative;
z-index: 1;
background: none;
}

.tabs li:hover {
z-index:2;
}

.tabs li a {
display: block;
line-height: 16px;
overflow: hidden;
float: left;
}

a .menu {
width: auto;
height: 16px;
line-height: 16px;
display: block;
float: left;
     padding: 0 4px 0 0;
}

.tabs li a:hover .menu,
.tabs li:hover a .menu { }

.tabs ul li a.current .menu { }

.tabs li a:hover,
.tabs li.hover a,
.tabs li:hover a { }

.tabs li:hover .sub,
.tabs li.hover .sub {
display: block;
}

.tabs li .sub {
display: none;
position: absolute;
top: 16px;
left: -16px;
height: 16px;
width: 186px;
padding-top: 16px;
background: url(images/submenu_top.png) no-repeat;
}

.tabs li ul {
width: 186px;
height: auto;
margin: 0 0 0 0;
padding: 4px 0 4px 14px;
list-style: none;
font-size: 9px;
background: url(images/submenu_bg.png) repeat-y;
}

.tabs li:hover li,
.tabs li.current li {
width: 100%;
padding: 0;
background: none;
}

.tabs li:hover li a,
.tabs li.current li a {
color: #3F617F;
background: none !important;
text-decoration: none;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
line-height: 15px;
width: 144px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
     color: #FFFFFF;
background: #6B8EAE !important;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
}

/*IE*/
.tabs li li a:hover {
color: #FFFFFF;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
background:  #6B8EAE;
}
/**/

.tabs .btm-bg {
width: 186px;
height: 9px;
clear: both;
background: url(images/submenu_bottom.png) no-repeat;
}

/* End of drop menu codes. */


Add these three images to your images folder. The result will look like the screenshot.











genusis

thank you so very much antechinus. =]. the dropdown menu buttons work really good. thank you lots  :D
hello I am Genusis
this is my site
http://spirean.com


Sudhakar Arjunan

Hi Antechinus,

Am using Energy theme @ http://discuss.itacumens.com

http://custom.simplemachines.org/themes/index.php?lemma=974

I will be reading your Reply # 205.

If you have any suggestion, then you could add to me for this particular theme.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

yoeri

#209
Demo at
Eeeusers.nl Asus Eee pc discussie forum
http://www.eeeusers.nl

Antechinus

I'll have a look at these over the weekend but frankly this is starting to get a bit silly. You see Hoochie has provided one version of drop menus for themes in general, along with specific tutorials for some individual themes.

I've provided specific examples and tutorials for several themes using different drop menu codes. The thing is that whichever one you use they all rely on similar edits. The same basic principles apply to all themes.

All you are doing is replacing the existing tabs section in your theme with the new one, and then replacing the menu code in your style.css with the new one. After that you're only left with tweaking colours and images to your liking, along with some minor padding adjustments. It really isn't that big a deal as long as you copy the structures set out in this thread or the related threads.

I'll do these last two at the weekend but after that I think I'll pull the pin on this. There are so many existing examples that I think people should be able to have a go themselves with a test copy of their preferred theme. Just pick an example of a theme that has already been done and has a similar look to what you want, then grab the code for that and try it.

Antechinus

A. SK and yoeri: I can do these themes but you'll have to settle for having the tabs a fixed distance apart. Trying to get a variable spacing for different screen resolutions is a pain in the backside.

Also yoeri: do you have written permission from Yagiz to remove his copyright? If you've cut a deal with him that's fine. If not, no dice. 

Sudhakar Arjunan

Quote from: antechinus on November 10, 2008, 04:58:57 AM
A. SK and yoeri: I can do these themes but you'll have to settle for having the tabs a fixed distance apart. Trying to get a variable spacing for different screen resolutions is a pain in the backside. 

First of all , thanks for trying to help us.
Give me a fixed distances between tabs. you fix accordingly to your taste.
But the text should not be swapped to next line.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Antechinus

A.SK, got it sorted. Grab the three images from the Babylon example on this page. Also use the same javascript preload code in the same place if you want faster initial rendering. As for the rest........

Index.template.php:

Find:

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
echo '</td></tr><tr><td colspan="3">';
//ìåíþøêà
template_menu();
echo '</td></tr></table>';


Replace with:

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
echo '</td></tr><tr><td colspan="3">

<div id="toolbar">
',template_menu(),'
</div>';
echo '</td></tr></table>';


Find:

// Show the start of the tab section.
echo '

<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="maintab_' , $first , '"></td>';

foreach ($context['menu_buttons'] as $act => $button)
echo ($button['active_button'] || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '"></td>' : '' , ' <td valign="top" class="maintab_', $button['active_button'] ? 'active_back' : 'back', '">
<a href="', $button['href'], '">', $button['title'], '</a>
</td>', $button['active_button'] ? '<td class="maintab_active_' . $last . '"></td>' : '';

// The end of tab section.
echo '
<td class="maintab_' , $last , '">&nbsp;</td>
</tr>
</table>';

}


Replace with:

// Show the start of the tab section.
echo '

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

          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
                             <div class="sub">
<ul>';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li><a href="', $sub_button['href'], '">' , $sub_button['title'] , '</a></li>';
            echo '
                                 </ul>
<div class="btm-bg"></div>
</div>';     
         }

echo' </li>';

}

echo '
</ul>
</div>
<div class="tabsright"><img src="', $settings['images_url'], '/maintab_last.gif" alt="" border="0" /></div>';

}


Style.css add to the end of the file:

#toolbar {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height: 47px;
    background: url(images/maintab_back.gif) repeat-x;
}

.tabsright{
    float: right;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
width: 20px;
    background: url(images/maintab_last.gif);
}

/*Drop menu codes*/

.tabs {
float: left;
margin: 0 0 0 0;
font-size: 11px;
font-weight: bold;
list-style: none;
background: url(images/maintab_first.gif) 0 0 no-repeat;
color: #FFFFFF;
     font-family: tahoma, sans-serif;
text-decoration: none;
text-transform: uppercase;
padding: 0 0 5px 30px;
}

.tabs a:link{
     color: #FFFFFF;
cursor: pointer;
}

.tabs a:visited {
     color: #FFFFFF;
}

.tabs ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}

.tabs ul li a.current {
     color: #EAF9C5;
}

.tabs li {
float: left;
padding: 0;
position: relative;
z-index: 1;
background: none;
}

.tabs li:hover {
z-index:2;
}

.tabs li a {
display: block;
overflow: hidden;
float: left;
}

a .menu-right {
width: auto;
height: 47px;
line-height: 47px;
display: block;
float: left;  
margin-right: 2px;
     padding: 0 21px 0 21px;
     background: none;
     text-decoration: none;
}

.tabs li a:hover .menu-right,
.tabs li:hover a .menu-right {
background: none;
color: #EAF9C5;
text-decoration: none;
}

.tabs ul li a.current .menu-right {
     background: none;
}

.tabs li a:hover,
.tabs li.hover a,
.tabs li:hover a {
     color: #FFFFFF;
text-decoration: none;
}

.tabs li:hover .sub,
.tabs li.hover .sub {
display: block;
}

.tabs li .sub {
display: none;
position: absolute;
top: 40px;
left: 0px;
height: 16px;
width: 186px;
padding-top: 16px;
background: url(images/submenu_top.png) no-repeat;
}

.tabs li ul {
width: 186px;
height: auto;
margin: 0 0 0 0;
padding: 4px 0 4px 14px;
list-style: none;
font-size: 11px;
background: url(images/submenu_bg.png) repeat-y;
}

.tabs li:hover li,
.tabs li.current li {
width: 100%;
padding: 0;
background: none;
}

.tabs li:hover li a,
.tabs li.current li a {
color: #7B8795;
text-decoration: none;
background: none;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
line-height: 15px;
width: 144px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
     color: #FFFFFF;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
background: url(images/deepblue.jpg) repeat-x;
}

/*IE*/
.tabs li li a:hover {
color: #FFFFFF;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
background: url(images/deepblue.jpg) repeat-x;
}
/**/

.tabs .btm-bg {
width: 186px;
height: 9px;
clear: both;
background: url(images/submenu_bottom.png) no-repeat;
}

/* End of drop menu codes. */


I don't know how many links you have in your toolbar but this is set for the standard menu on a 1024 screen. You can adjust the spacing in the css here:

a .menu-right {
width: auto;
height: 47px;
line-height: 47px;
display: block;
float: left;  
margin-right: 2px;
     padding: 0 21px 0 21px;
     background: none;
     text-decoration: none;
}


Change the 21px left and right padding to suit.

Sudhakar Arjunan

Thanks a lot antechinus,

I have noted the update before 2 days.

I will workout today night.

Thanks a lot for your care and help.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Antechinus

K. Get back to me if you have any trouble with it.

Jakki

#216
Okay followed the instructions, I did before with no problems but when I did it this time, I get this.

Template Parse Error!
There was a problem loading the /Themes/tday2/index.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme.

Parse error: syntax error, unexpected $end in .../Themes/tday2/index.template.php on line 658

649: if (empty($button_strip))
650: return '<td> </td>';
651:
652: echo '
653: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '"> </td>
654: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode('  |  ', $button_strip) , '</td>
655: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '"> </td>';
656: }
657:

658: ?>



Can anyone tell me what is wrong?


NM: I figured it out...LOL

Sudhakar Arjunan

Quote from: antechinus on November 15, 2008, 03:18:49 AM
K. Get back to me if you have any trouble with it.

Hi Antechinus,

I have placed all the three image files under themes image folder.

Did the modification and found the menu, was not loaded properly for long time on all browsers.

http://www.itacumens.com/discuss/Themes/ds-natural_20b4/images/ITA%20Menu%20Tested%20-%2015%20Nov%2008.JPG
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Antechinus

Can you post you index.template in code tags please? I think you may have made a mistake somewhere.

Sudhakar Arjunan

Quote from: antechinus on November 15, 2008, 03:44:02 PM
Can you post you index.template in code tags please? I think you may have made a mistake somewhere.

Yes I may have did some unusual errors.

<?php
// Version: 2.0 Beta 4 Public; 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 Beta 3 Public';

/* 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 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;
}

// 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'], '" />
<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'], '/scripts/script.js?b21"></script>
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/scripts/theme.js?b21"></script>
<script language="JavaScript" 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'] ? '
if (confirm("' 
$txt['show_personal_messages'] . '"))
window.open("' 
$scripturl '?action=pm");' '''
var ajax_notification_text = "'
$txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "'
$txt['modify_cancel'], '";
// ]]></script>
<title>'
$context['page_title'], '</title>';

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

// The ?b21 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?b21" />
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/css/print.css?b21" 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'], '/css/fonts-compat.css" />';

// 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']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['forum_name'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';

// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
$options['collapse_header'] = !empty($_COOKIE['upshrink']);

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

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// Create the main header object.
var mainHeader = new smfToggle("upshrink", '
, empty($options['collapse_header']) ? 'false' 'true'');
mainHeader.useCookie('
$context['user']['is_guest'] ? 0');
mainHeader.setOptions("collapse_header", "'
$context['session_id'], '");
mainHeader.addToggleImage("upshrink", "/upshrink.gif", "/upshrink2.gif");
mainHeader.addTogglePanel("upshrinkHeader");
mainHeader.addTogglePanel("upshrinkHeader2");
// ]]></script>'
;

echo '
</head>
<body>'
;

//Hopefully this message will encourage the guests to register
if ($context['user']['is_guest'] && !empty($modSettings['enable_mfg_mod']))
        echo '
               <div class="windowbg2" style="margin:0 auto;text-align:center">'
,!empty($modSettings['mf_guests']) ? $modSettings['mf_guests'] : $txt['default_message'],'</div>';
//Display ads on the top of the page
if (function_exists("show_topofpageAds"))
{
$ads show_topofpageAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);
}
 
 
echo 
'<script language="JavaScript" type="text/javascript" src="'$settings['default_theme_url'], '/scripts/sha1.js"></script>';


function 
template_body_above()
{
global $context$settings$options$scripturl$txt$modSettings;
 
// òàáëèöà1 Íà÷èíàåòñÿ âåðõíÿÿ òàáëèöà.
echo '<table width="100%" cellpadding="0" cellspacing="0">';

//Äåëàåì àêêóðàòíóþ ëåâóþ êà¸ìêó :)
echo '<tr><td class="lefthightable">&nbsp;</td>';

//Äåëàåì öåíòðàëüíóþ ÷àñòü òàáëèöû. Èìåííî çäåñü áóäåò íàõîäèòñÿ logo è âõîä (ïðàêòè÷åñêè âñ¸ ñàìîå êðàñèâîå â òåìå :))
echo '<td class="hightable">';

// òàáëèöà2 Òåïåðü âñòàâëÿåì â ýòó êîëîíêó åù¸ òàáëèöó, â êîòîðîé áóäóò íàõîäèòñÿ íåïîñðåäñòâåííî ÿ÷åéêè ñ ëîãî è âõîäîì.
echo '<table width="100%" cellspacing="0" cellpadding="1" style="vertical-align: top;"><tr>';

//Âñòàâëÿåì èçîáðàæåíèå logosmf.jpg.
echo '<td><a title="Discussion Home" target="_self" href="/" ><img src="'$settings['images_url'], '/logo.gif" style="margin: 7px;" alt="IT Acumens Discussion" /></a></td>';

//òàáëèöà3 Îòêðûâàåì åù¸ îäíó ÿ÷åéêó.
//Ïåðâàÿ ÿ÷åéêà - ïóñòûøêà.
echo '<td><table><tr><td width="100%">&nbsp;</td>';

//òàáëèöà 4 Òåïåðü íåïîðåäñòâåííî òàáëèöà, ãäå áóäåò âõîä ïîèñê.
echo '<td><table width="100%" cellpadding="0" cellspacing="0"><tr>';

// òàáëèöà5 ñîçäàåì ñòðîêó äëÿ âõîäà.
echo ' <td><table width="250"  cellpadding="0" cellspacing="0"><tr>';

//òàáëèöà6 òóò âñÿ èíôîðìàöèÿ.
echo ' <td><table width="100%" style="height: 162px;" cellpadding="0" cellspacing="0"><tr><td class="leftlogin">&nbsp;</td><td class="centerlogin">';

//òàáëèöà7 äåëèò ïðèâåòñòâèå è âõîä
echo '<table width="100%"><tr style="height: 28px; vertical-align: top;">
 <td bgcolor="#3970b8" align="center" style="vertical-align: middle;">'
;
 //Åñëè ïîëüçîâàòåëü, òî ïðèâåòñòâóåì åãî :)
if($context['user']['is_logged'])
echo '<span style="font-size: 10px; color: #ffffff;"> '$txt['hello_member_ndt'], ' <b>'$context['user']['name'] , '</b></span>';
Else
echo '<span style="font-size: 10px ; color: #ffffff;"> '$txt['quick_login_dec'], '</span>';
  
//çàêðûâàåì ïðâåòñâèå, íà÷èíàåì âõîä èëè àâàòàð.
 echo '</td></tr><tr>';
 if (!empty($context['user']['avatar']))
 echo '<td align="center" valign="middle">'$context['user']['avatar']['image'], '</td></tr>';
//åñëè íåò ëîãèíà ïîêàæåì âõîä.
if($context['user']['is_logged'])
echo '';
Else
{
echo '<td><form action="'$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" class="middletext" style="margin:27px 0px 27px 0px;" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
<input type="text" name="user" size="10" />&nbsp;<input type="password" name="passwrd" size="10" /><br />
<select name="cookielength" style="margin-top: 4px;">
<option value="60">'
$txt['one_hour'], '</option>
<option value="1440">'
$txt['one_day'], '</option>
<option value="10080">'
$txt['one_week'], '</option>
<option value="43200">'
$txt['one_month'], '</option>
<option value="-1" selected="selected">'
$txt['forever'], '</option>
</select>
<input type="submit" value="'
$txt['login'], '" /><br />';
if (!empty($modSettings['enableOpenID']))
echo'<br />
<input type="text" name="openid_url" id="openid_url" size="25" class="openid_login" />'
;

echo '
<input type="hidden" name="hash_passwrd" value="" />
</form></td></tr>'
;
}

//çàêðûâàåì òàáëèöó 7 
echo '</table>';
//çàêðûâàåì êà¸ìêó è òàáëèöó6.
echo '</td><td class="rightlogin">&nbsp;</td></tr></table></td>';

//çàêðûâàåì ñòðîêó äëÿ âõîäà è îòêðûâàåì äëÿ ïîèñêà.
echo '</tr><tr>';
echo '<td  width="100%" height="27" align="center" valign="middle" style="margin-left: 3px;"><table width="100%" style="height: 28px;" cellpadding="0" cellspacing="0"><tr><td>&nbsp;</td><td bgcolor="#8895a4" align="center" style="border: 1px solid #d2e1f1;">
<form action="'
$scripturl'?action=search2" method="post" accept-charset="'$context['character_set'], '" style="margin: 0;">
<input type="text" name="search" value="" style="width: 120px; height: 14px;" />&nbsp;
<input type="submit" name="submit" value="'
$txt['search'], '" style="width: 11ex; height: 18px;" />
<input type="hidden" name="advanced" value="0" /></form></td><td>&nbsp;</td></tr></table></td>'
;

//çàêðûâàåì òàáëèöó5
echo '</tr></table></td>';

//çàêðûâàåì òàáëèöó4
echo '</tr></table>';

//çàêðûâàåì òàáëèöà3 è ÿ÷åéêó. êîíåö âõîäà
echo '</td></tr></table></td>';

//çàêðûâàåì òàáëèöó2
echo '</tr></table>';

//Òåïåðü çàêðûâàåì öåíòðàëüíóþ ÷àñòü òàáëèöû è îòêðûâàåì ïðàâóþ êà¸ìêó
echo '</td><td class="righthightable">&nbsp;';

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
echo '</td></tr><tr><td colspan="3">

<div id="toolbar">
'
,template_menu(),'
</div>'
;
//Below the menu ads
if (function_exists("show_indexAds") && function_exists("show_towerleftAds") && function_exists("show_towerrightAds"))
{
$ads show_indexAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);
 
//Tower left Ads
$ads show_towerleftAds();
if(!empty($ads))
echo '<table><tr><td valign="top">'$ads['type']==$ads['content'] : eval($ads['content']) ,'</td><td width="100%" valign="top">';
 
unset($ads);
//Tower Right Ads
$ads show_towerrightAds();
if(!empty($ads))
echo '<table><tr><td width="100%" valign="top">';
unset($ads);
}
 
 
echo '</td></tr></table>';

 //Çàêîí÷åíà øàïêà è ìåíþ. Òåïåðü íà÷èíàåì èíôîðìàöèîííîå òàáëî ñ ëèíêîì íà ñàéò, íîâîñòÿìè è íåïðî÷èòàííûìè ñîîáùåíèÿìè.
echo '<table cellpadding="0" cellspacing="0"><tr style="height: 3px;"><td>&nbsp;</td></tr></table>';
echo '<table cellpadding="5" cellspacing="0" width="100%" class="newsborder">
 <tr>'
;

// êíîïêà íà ñàéò (åñëè íàñòðîåíî)
if (empty($settings['url_link']))
echo '';
else
echo ' <td class="newsboxprev">&nbsp;</td><td class="sitelink"><table><tr><td><img src="'.$settings['images_url'].'/site.gif"  alt="" /></td><td><a href="'$settings['url_link'], '" >'$settings['url_text'], '</a></td></tr></table></td>';

echo ' <td class="newsboxprev">&nbsp;</td><td class="newsbox" width="30%">
  <span class="smalltext"><b>'
$txt['news'], '</b>: '$context['random_news_line'], '</span>
  </td>'
;
//âñòàâëÿåì íåïðî÷èòàííûå ñîîáùåíèÿ, åñëè íå þçåð, òî ïðèâåòñâèå.   
echo '<td class="newsboxprev">&nbsp;</td><td class="newsbox">';

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 />';
}
Else
echo sprintf($txt['welcome_guest'], $txt['guest_title']);

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




//Do we have some new pms? Show the newest.
if(!empty($context['user']['unread_messages'])) {

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

// PMI collapse object.
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 '
// And create the info center object.
var pmInformer = new smfToggle("upshrinkPMI", '
, empty($options['collapse_header_pmi']) ? 'false' 'true'');
pmInformer.useCookie('
$context['user']['is_guest'] ? 0');
pmInformer.setOptions("collapse_header_pmi", "'
$context['session_id'], '");
pmInformer.addToggleImage("upshrink_pmi", "/collapse.gif", "/expand.gif");
pmInformer.addTogglePanel("upshrinkHeaderPMI");
//'
;
echo chr(93) . chr(93) . chr(62);
echo '
</script>'
;

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="pmInformer.toggle(); 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['from'], ':</b> <a href="' $scripturl '?action=profile;u='$context['pm_informer']['from'], '">'$context['pm_informer']['sender'], '</a><br />
<b>'
$txt['subject'], ':</b> '$context['pm_informer']['subject'], '<br />
<b>'
$txt['date'], ':</b> '$context['pm_informer']['msgtime'], '<br />
<b>'
$txt['message'], ':</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: 2em 0px 2em 0px;">'
;
}

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

echo '
</div>'
;


//Close table for towerright ads
if (function_exists("show_towerrightAds") && function_exists("show_towerleftAds") && function_exists("show_bottomAds"))
{
$ads show_towerrightAds();
if(!empty($ads))
echo '</td><td valign="top">'$ads['type']==$ads['content'] : eval($ads['content']) ,'</td></tr></table>'
 
unset($ads);
//Close table for towerleft ads
$ads show_towerleftAds();
if(!empty($ads))
echo '</td></tr></table>';
unset($ads);
 
//Show ads on the bottom of the page
$ads show_bottomAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);
}
 
// 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%;' '''">
<table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
<tr>
<td valign="middle" align="center" style="white-space: nowrap; color">
<table cellpadding="1" cellspacing="1" class="copy"><tr><td class="contacts">
'
theme_copyright(), '
</td></tr></table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
                  <tr>
                    <td width="33%" align="center">
                    <script type="text/javascript" src="//counter.goingup.com/js/tracker.js?st=bnfe536&amp;b=23"></script><noscript><a href="http://www.goingup.com" title="web analysis"><img src="//counter.goingup.com/default.php?st=bnfe536&amp;b=23" border="0" alt="web analysis" /></a></noscript>
                    </td>
                    <td width="33%" align="center"><font size="1"> EnerGy Skin by</font> <a href="mailto: [email protected]">[cer]</a>
</td>
                    <td width="34%" align="center">
<!-- Begin W3Counter Tracking Code -->
<script type="text/javascript" src="http://www.w3counter.com/tracker.js"></script>
<script type="text/javascript">
w3counter(17432);
</script>
<noscript>
<div><a href="http://www.w3counter.com"><img src="http://www.w3counter.com/tracker.php?id=17432" style="border: 0" alt="W3Counter" /></a></div>
</noscript>
<!-- End W3Counter Tracking Code-->
                    </td>
                  </tr>
                </table>
</td>
</tr>
</table>'
;

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

echo '
</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()
{
global $context$settings$options;

echo '<div class="nav" style="font-size: smaller; margin-bottom: 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;

// 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 '

<div class="tabs">
<ul>'
;
foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '   <li><a '$button['active_button'] ? ' class="current"' '' ' href="'$button['href'], '">          
 <span class="menu-right">' 
$button['title'] , '</span></a>';
 
//    Does this button have any subbuttons?
        
if(!empty($button['sub_buttons']))
        {
            echo 
'
                             <div class="sub">
 <ul>'
;
            foreach(
$button['sub_buttons'] as $sub_button)
                    echo 
'
                <li><a href="'
$sub_button['href'], '">' $sub_button['title'] , '</a></li>';
            echo 
'
                                 </ul>
 <div class="btm-bg"></div>    
 </div>'
;      
         }
 
 echo' </li>';
 
 }
 
echo '
</ul>
</div>
<div class="tabsright"><img src="'
$settings['images_url'], '/maintab_last.gif" alt="" border="0" /></div>';

}

// 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)
{
if ($value['url'] === '{SUBMIT}')
$buttons[$key] = '<input type="submit" value="' . (isset($value['custom']) ? $value['custom'] : '') . $txt[$value['text']] . '" class="button_strip_submit" />';
else
$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>';
}

?>

Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Advertisement: