Template Menu Editting

[Pezguy]

The Home, Help, Logout, etc buttons have a space between them. How can I get rid of the space? I made my menu buttons so that they SHOULD appear as a solid bar, but the template keeps forcing a space between the buttons. How can I get rid of the space so the bar is defaulted to look solid?

THANKS AHEAD OF TIME!!!!!!

[Tomer]

Open index.template.php

Find this part:

Code Select Expand



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

// Show the [home] and [help] buttons.
echo '
<a href="', $scripturl, '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" style="margin: 2px 0;" border="0" />' : $txt[103]), '</a>', $context['menu_separator'], '
<a href="', $scripturl, '?action=help" target="_blank">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" style="margin: 2px 0;" border="0" />' : $txt[119]), '</a>', $context['menu_separator'];

// How about the [search] button?
if ($context['allow_search'])
echo '
<a href="', $scripturl, '?action=search">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/search.gif" alt="' . $txt[182] . '" style="margin: 2px 0;" border="0" />' : $txt[182]), '</a>', $context['menu_separator'];

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
<a href="', $scripturl, '?action=admin">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" style="margin: 2px 0;" border="0" />' : $txt[2]), '</a>', $context['menu_separator'];

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '
<a href="', $scripturl, '?action=profile">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/profile.gif" alt="' . $txt[79] . '" style="margin: 2px 0;" border="0" />' : $txt[467]), '</a>', $context['menu_separator'];

// The [calendar]!
if ($context['allow_calendar'])
echo '
<a href="', $scripturl, '?action=calendar">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/calendar.gif" alt="' . $txt['calendar24'] . '" style="margin: 2px 0;" border="0" />' : $txt['calendar24']), '</a>', $context['menu_separator'];

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '
<a href="', $scripturl, '?action=login">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/login.gif" alt="' . $txt[34] . '" style="margin: 2px 0;" border="0" />' : $txt[34]), '</a>', $context['menu_separator'], '
<a href="', $scripturl, '?action=register">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/register.gif" alt="' . $txt[97] . '" style="margin: 2px 0;" border="0" />' : $txt[97]), '</a>';
}

// How about the [gallery] button?

echo '
<a href="http://www.coventryphish.com/gallery/">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/gallery.gif" alt="gallery" border="0" style="margin: 2px 0;" border="0" />' : $txt[801]), '</a>', $context['menu_separator'];

// Otherwise, they might want to [logout]...
echo '
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/logout.gif" alt="' . $txt[108] . '" style="margin: 2px 0;" border="0" />' : $txt[108]), '</a>';
}


Try taking out all the ', $context['menu_separator'], ' parts at the end of each block, if that dones't work, try making the margin 0 pix instead of 2.

[Alisha]

Funny thing, I was just working on this myself. I added a Gallery & Chat room to my forums. Now the menu flows over to the next line on 640x480. I am not really understanding how to arrange them in a customized mannor. Maybe two even rows? I guess I am thinking too much Html and not enough PHP. Is there a easy way to explain how to alter the rows even or other lay out?

[Tomer]

It would only jump to another row if it is too long or there is a <br /> somewhere.

[Alisha]

thats the thing, its too long for 800x600 & 640x480.  When I rolls over to the "next" line it dosn't look that good in my opinion.

[Pezguy]

Here is the complete template file thus far. Still has those ugly spaces... the website is under development, but it is at eq.jklug.net [nofollow]. Its a forum for a guild once eq2 releases. Keep in mind I just started working the graphics on it and everything will be redone

Code Select Expand


<?php
// Version: 1.0 Beta 5 Public; index

// 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, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';
}

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

// Show right to left and the character set for ease of translating.
echo '<html', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js"></script>
<script language="JavaScript" type="text/javascript"><!--
var smf_theme_url = "', $settings['theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
// --></script>
' . $context['html_headers'] . '
<title>
' . $context['page_title'] . '
</title>
<style type="text/css">
<!--
A:link        {text-decoration: none; color: #FFB903;}
A:visited     {text-decoration: none; color: #FFB903;}
A:hover       {text-decoration: none; color: #DDDDDD; font-style: normal; text-decoration: underline

overline}}
BODY          {scrollbar-face-color: #272A2F;
               scrollbar-shadow-color: #1B1E25;
               scrollbar-highlight-color: #cccccc;
              scrollbar-3dlight-color: #272A2F;
               scrollbar-darkshadow-color: #1B1E25;
               scrollbar-track-color: #000000;
              scrollbar-arrow-color: #ffb903; font-family: Verdana}
.nav          {text-decoration: none; color: #FFFFFF;}
.nav:link     {text-decoration: none; color: #FFFFFF;}
.nav:visited  {text-decoration: none; color: #FFFFFF;}
.nav:hover    {text-decoration: none; color: #FFB903; font-style: normal; text-decoration: underline}
.windowbg     {background-color: #272A2F;; border-color: #6B6B6B #252525 #252525 #6B6B6B; padding-top: 2px;
padding-right: 2px; padding-bottom: 2px; padding-left: 2px; border-style: outset; border-top-width: 1px;

border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.windowbg2    {background-color: #444444;; border-color: #999999 #414141 #414141 #999999; border-style:

outset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.windowbg3    {background-color: #606060;; border-color: #FFFF99 #CC9900 #CC9900 #FFFF99; border-style:

outset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.titlebg    {background-color: #606060; border-color: #FFFFFF #000000 #000000 #FFFFFF; border-style: outset;

border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.catbg    {background-color: #40454C; border-color: #999999 #414141 #414141 #999999; border-style: outset; border-top-width:

1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

.text1        {font-style: normal; font-weight: bold; font-size: 13px; color: #000000;}


.oldcatbg        {background-color: #40454C; color: #EEEEEE; font-weight: bold; font-size: 13px;; border: 1px

#666666 solid}
.bordercolor  {background-color: #000000;}
.quote        {font-size: 10px; font-family: Arial; color: #FFFFFF; background-color: dimgray;; border:

#666666; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.code         {font-size: 12px; font-family: "Courier New", Courier, mono; color: #000000; background-color:


#FFB920;}
TD            {font-family: Verdana; color: #FFFFFF}
input         {background-color: #333333; font-family: Verdana; font-size: 10pt; color: #FFFFFF;}
textarea      {background-color: #333333; font-family: Verdana; font-size: 10pt; color: #FFFFFF;}
select        {background-color: #333333; font-family: Verdana; font-size: 7pt; color: #FFFFFF;}
.poll        {font-size: 10px; font-family: Arial; background-color: dimgray; color: red;}
-->
</style>

</head>
<script>
function OpenAdsDetail(FileName,WindowName)
{

WindowFeature="Resizable=No,ScrollBars=Yes,MenuBar=No,Directories=No,ToolBar=No,Location=No,Status=No,Width=660,Height=550,Sc

reenX=0,ScreenY=0,Top=0,Left=0"

newWindow=open(FileName,WindowName,WindowFeature);
if (newWindow.opener == null) { newWindow.opener = self; }
if (newWindow.focus) { newWindow.focus(); }
}
</script>

<body text="#FFFFFF" bgcolor="000000" bottomMargin="0" leftMargin="0" rightMargin="0" topMargin="0" MARGINWIDTH="0"

MARGINHEIGHT="0">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="CENTER" bgcolor="#000000">
 <tr bgcolor="#272A2F">
   <td>
   <table border="0" width="100%" cellpadding="1" cellspacing="0" class="windowbg">
     <tr>
       <td valign="middle" align="LEFT">
       <img src="YaBBImages/ea8.gif">

       </td>
       <td>
       <font color="#FFFFFF" size="4"><b>' . $context['forum_name'] . '</b></font> <font size="1">
       <BR>  <font size="2">« ' . $context['page_title'] . ' »</font>
       <BR><font size="2" color="#ffffff">
       ';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
', $txt[247], ' <b>', $context['user']['name'], '</b>, ';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '<br />
', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'],

' <a href="', $scripturl, '?action=regcenter">', $context['unapproved_members'] == 1 ? $txt['approve_member'] :

$context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'];

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '<br />
<b>', $txt[616], '</b>';
}
// Otherwise they're a guest - so politely ask them to register or login.
else
echo '
', $txt['welcome_guest'];

echo ' ';
if ($context['user']['is_logged'] && $context['allow_pm'])
echo $txt[152], ' <a href="', $scripturl, '?action=pm">', $context['user']['messages'], ' ',

($context['user']['messages'] != 1 ? $txt[153] : $txt[471]), '</a>', $txt['newmessages4'], '  ',

$context['user']['unread_messages'], ' ', ($context['user']['unread_messages'] == 1 ? $txt['newmessages0'] :

$txt['newmessages1']), '.';
echo '
       <BR>' . $context['current_time'] . '
       </font><BR><BR>
       </td>
     </tr>
   </table>
   </td>
 </tr><tr align="center" valign="middle" bgcolor="#444444" class="windowbg2">
   <td class="windowbg2"><font size="2">
   ';

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

echo '
   </font></td>
 </tr>
</table>
<table width="90%" cellspacing="0" cellpadding="2" align="center">
 <tr>
   <td valign="TOP" width="100%" height="100%">
   <font size="1"><BR><BR>
   ';
}

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

echo '
   </font></td>
 </tr><tr>
   <td align="CENTER" valign="BOTTOM">
   <font face="Verdana, Arial" size="1"><BR><BR>
   ', theme_copyright(), '
   <BR><BR>
   </font>
   </td>
 </tr>
</table>
';

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

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;

// Folder style or inline?  Inline has a smaller font.
echo '<span class="nav"', $settings['linktree_inline'] ? ' style="font-size: smaller;"' : '', '>';

// Each tree item has a URL and name.  Some may have extra_before and extra_after.
foreach ($context['linktree'] as $k => $tree)
{
// Show the | | |-[] Folders.
if (!$settings['linktree_inline'])
{
if ($k > 0)
echo str_repeat('<img src="' . $settings['images_url'] . '/icons/linktree_main.gif" alt="| "

border="0" />', $k - 1), '<img src="' . $settings['images_url'] . '/icons/linktree_side.gif" alt="|-" border="0" />';
echo '<img src="' . $settings['images_url'] . '/icons/folder_open.gif" alt="+" border="0" />&nbsp; ';
}

if (isset($tree['extra_before']))
echo $tree['extra_before'];
echo '<b>', $settings['linktree_link'] && isset($tree['url']) ? '<a href="' . $tree['url'] . '" class="nav">'

. $tree['name'] . '</a>' : $tree['name'], '</b>';
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($k != count($context['linktree']) - 1)
echo $settings['linktree_inline'] ? ' &nbsp;|&nbsp; ' : '<br />';
}

echo '</span>';
}

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

// Show the [home] and [help] buttons.
echo '
<a href="', $scripturl, '">', ($settings['use_image_buttons'] ? '<img src="' .

$settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" border="0" />' :

$txt[103]), '</a>', '
<a href="', $scripturl, '?action=help" target="_blank">', ($settings['use_image_buttons'] ?

'<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" border="0"

/>' : $txt[119]), '</a>';

// How about the [search] button?
if ($context['allow_search'])
echo '
<a href="', $scripturl, '?action=search">', ($settings['use_image_buttons'] ? '<img src="' .

$settings['images_url'] . '/' . $context['user']['language'] . '/search.gif" alt="' . $txt[182] . '" border="0" />' :

$txt[182]), '</a>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
<a href="', $scripturl, '?action=admin">', ($settings['use_image_buttons'] ? '<img src="' .

$settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" border="0" />' : $txt[2]),

'</a>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '
<a href="', $scripturl, '?action=profile">', ($settings['use_image_buttons'] ? '<img src="' .

$settings['images_url'] . '/' . $context['user']['language'] . '/profile.gif" alt="' . $txt[79] . '" border="0" />' :

$txt[467]), '</a>';

// The [calendar]!
if ($context['allow_calendar'])
echo '
<a href="', $scripturl, '?action=calendar">', ($settings['use_image_buttons'] ? '<img src="'

. $settings['images_url'] . '/' . $context['user']['language'] . '/calendar.gif" alt="' . $txt['calendar24'] . '" border="0"

/>' : $txt['calendar24']), '</a>';

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '
<a href="', $scripturl, '?action=login">', ($settings['use_image_buttons'] ? '<img src="' .

$settings['images_url'] . '/' . $context['user']['language'] . '/login.gif" alt="' . $txt[34] . '" border="0" />' :

$txt[34]), '</a>', '
<a href="', $scripturl, '?action=register">', ($settings['use_image_buttons'] ? '<img src="'

. $settings['images_url'] . '/' . $context['user']['language'] . '/register.gif" alt="' . $txt[97] . '" border="0" />' :

$txt[97]), '</a>';
}
// Otherwise, they might want to [logout]...
else
echo '
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">',

($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/logout.gif"

alt="' . $txt[108] . '" border="0" />' : $txt[108]), '</a>';
}

?>

[Oldiesmann]

What's with the extra font tag at the top?

Code Select Expand

<font size="1"> <---- what's this for?
        <BR>  <font size="2">« ' . $context['page_title'] . ' »</font>

[Pezguy]

When i get off work tomorrow Ill have tiem to tinker. The ONLY changes I made were converting from yabbse and removing the tags mentioned above. I am starting to think the images may be in a table, if so tables can add buffers on the sides.

[Pezguy]

It appears the code puts the buttons in tables thus the extra padding is automatically added on the left and the right. I am still parsing through the code to find and eliminate the table

[Pezguy]

WOOT I r0x0rz!! I had to clean up the code a bit it seems it had a forced space since the code had spaces and a carriage return. Here is the function I changed.

Code Select Expand


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

// Show the [home] and [help] buttons.
echo '<a href="', $scripturl, '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" border="0" />' : $txt[103]), '</a>', '<a ref="',  $scripturl, '?action=help" target="_blank">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" border="0" />' : $txt[119]), '</a>';

// How about the [search] button?
if ($context['allow_search'])
echo '<a href="', $scripturl, '?action=search">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/search.gif" alt="' . $txt[182] . '" border="0" />' : $txt[182]), '</a>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<a href="', $scripturl, '?action=admin">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" border="0" />' : $txt[2]), '</a>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<a href="', $scripturl, '?action=profile">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/profile.gif" alt="' . $txt[79] . '" border="0" />' : $txt[467]), '</a>';

// The [calendar]!
if ($context['allow_calendar'])
echo '<a href="', $scripturl, '?action=calendar">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/calendar.gif" alt="' . $txt['calendar24'] . '" border="0" />' : $txt['calendar24']), '</a>';

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '<a href="', $scripturl, '?action=login">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/login.gif" alt="' . $txt[34] . '" border="0" />' : $txt[34]), '</a>', '<a href="', $scripturl, '?action=register">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/register.gif" alt="' . $txt[97] . '" border="0" />' : $txt[97]), '</a>';
}
// Otherwise, they might want to [logout]...
else
echo '<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/logout.gif" alt="' . $txt[108] . '" border="0" />' : $txt[108]), '</a>';
}


[Tomer]

Good job, but please when posting code use the special code brackets.

[Pezguy]

Oops sorry I forgot. To think I yell at people on boards who do the same thing I went and changed my old posts to use the tags.