Ishimaru-Design > Home > Tutorials > phpBB2 > MOD-free multilingual image-only navbar !

[phpBB2] MOD-free multilingual image-only navbar !

  • Author : Ishimaru Chiaki
  • Posted on : 2013-10-24 05:46:43
  • Updated on : 2013-11-13 02:31:36
  • Comments : 0
  • Type : Styles
  • Level : Newbie

For a long time, when I wanted to use a navbar without plain text, I couldn't make it multilingual without using eXtremeStyle, and all XS-free solutions which were proposed to me didn't work.

I finally could get it sorted out with the help of an ex-colleague of a phpbb2 support forum that doesn't exist anymore, I finally got sorted out.

To make sure that other phpBB2 style creators benefit of this tip, I write this tutorial.

Summary

  1. How to make your style multilingual

How to make your style multilingual

IMPORTANT : You must have cloned your subSilver, so you can work on a copi without altering the original copy.  If you don't know how to clone your subSilver, read this tutorial

Once your subSilver cloned, you'll have to place your navigation buttons in the corresponding language folders inside /images/ folder.
Then, follow these directions as if you were installing a MOD.

OPEN

templates/YourStyle/YourStyle.cfg

FIND

?>

BEFORE, ADD

// Global variables
global $userdata, $board_config;

// Useful variables
$language_used = 'lang_' . ((empty($userdata['user_lang'])) ? $board_config['default_lang'] : $userdata['user_lang']);
$current_template_images_lang = $current_template_images . '/' . $language_used;

// Header images
$images['header_index'] = $current_template_images_lang . '/icon_mini_index.png';
$images['header_faq'] = $current_template_images_lang . '/icon_mini_faq.png';
$images['header_search'] = $current_template_images_lang . '/icon_mini_search.png';
$images['header_memberlist'] = $current_template_images_lang . '/icon_mini_members.png';
$images['header_usergroups'] = $current_template_images_lang . '/icon_mini_groups.png';
$images['header_editprofile'] = $current_template_images_lang . '/icon_mini_profile.png';
$images['header_register'] = $current_template_images_lang . '/icon_mini_register.png';
$images['header_login'] = $current_template_images_lang . '/icon_mini_login.png';
$images['header_logout'] = $current_template_images_lang . '/icon_mini_logout.png';

// constants
$template->assign_vars(array(
   'I_HEADER_INDEX' => $images['header_index'],
   'I_HEADER_FAQ' => $images['header_faq'],
   'I_HEADER_SEARCH' => $images['header_search'],
   'I_HEADER_MEMBERLIST' => $images['header_memberlist'],
   'I_HEADER_USERGROUPS' => $images['header_usergroups'],
   'I_HEADER_EDITPROFILE' => $images['header_editprofile'],
   'I_HEADER_REGISTER' => $images['header_register'],
   'I_HEADER_LOGIN' => $images['header_login'],
   'I_HEADER_LOGOUT' => $images['header_logout']
));

Note : If your buttons are under a different format or if they have a different name, don't forget to modify the images' URL in the code shown above.


OPEN

templates/YourStyle/overall_header.tpl

FIND

                <table cellspacing="0" cellpadding="2" border="0">
                    <tr> 
                        <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_faq.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a>&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_search.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_members.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_groups.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp; 
                        <!-- BEGIN switch_user_logged_out -->
                        &nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_register.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a>&nbsp;
                        <!-- END switch_user_logged_out -->
                        </span></td>
                    </tr>
                    <tr>
                        <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_profile.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_message.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_login.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
                    </tr>
                </table></td>

then, it goes according to your case

Case #1 : If "Members", "Groups", "Profile", "PM" and "Log out" are hidden to guests, and if "Register" and "Log in" are hidden to registered users.

REPLACE WITH

                <table cellspacing="0" cellpadding="0" border="0">
                    <tr> 
                        <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="{I_HEADER_INDEX}" border="0" alt="{L_INDEX}" /></a><a href="{U_FAQ}" class="mainmenu"><img src="{I_HEADER_FAQ}" border="0" alt="{L_FAQ}" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="{I_HEADER_SEARCH}" border="0" alt="{L_SEARCH}" hspace="0" /></a></span></td>
<!-- BEGIN switch_user_logged_in -->
<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_MEMBERLIST}" class="mainmenu"><img src="{I_HEADER_MEMBERLIST}" border="0" alt="{L_MEMBERLIST}" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="{I_HEADER_USERGROUPS}" border="0" alt="{L_USERGROUPS}" hspace="0" /></a><a href="{U_PROFILE}" class="mainmenu"><img src="{I_HEADER_EDITPROFILE}" border="0" alt="{L_PROFILE}" /></a><a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="{PRIVMSG_IMG}" border="0" alt="{PRIVATE_MESSAGE_INFO}" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="{I_HEADER_LOGOUT}" border="0" alt="{L_LOGIN_LOGOUT}" /></a></span></td>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_REGISTER}" class="mainmenu"><img src="{I_HEADER_REGISTER}" border="0" alt="{L_REGISTER}" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="{I_HEADER_LOGIN}" border="0" alt="{L_LOGIN_LOGOUT}" /></a></span></td>
<!-- END switch_user_logged_out -->
                    </tr>
                </table></td>

Case #2 : If you keep "Members", "Groups", "Profile" and "PM" visible to guests, but use a different button for "Log in" and "Log out"

REPLACE WITH

                <table cellspacing="0" cellpadding="0" border="0">
                    <tr> 
                        <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="{I_HEADER_INDEX}" border="0" alt="{L_INDEX}" /></a><a href="{U_FAQ}" class="mainmenu"><img src="{I_HEADER_FAQ}" border="0" alt="{L_FAQ}" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="{I_HEADER_SEARCH}" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_MEMBERLIST}" class="mainmenu"><img src="{I_HEADER_MEMBERLIST}" border="0" alt="{L_MEMBERLIST}" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="{I_HEADER_USERGROUPS}" border="0" alt="{L_USERGROUPS}" hspace="0" /></a><a href="{U_PROFILE}" class="mainmenu"><img src="{I_HEADER_EDITPROFILE}" border="0" alt="{L_PROFILE}" /></a><a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="{PRIVMSG_IMG}" border="0" alt="{PRIVATE_MESSAGE_INFO}" /></a></span></td>
<!-- BEGIN switch_user_logged_in -->
<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="{I_HEADER_LOGOUT}" border="0" alt="{L_LOGIN_LOGOUT}" /></a></span></td>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_REGISTER}" class="mainmenu"><img src="{I_HEADER_REGISTER}" border="0" alt="{L_REGISTER}" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="{I_HEADER_LOGIN}" border="0" alt="{L_LOGIN_LOGOUT}" /></a></span></td>
<!-- END switch_user_logged_out -->
                    </tr>
                </table></td>

Case #3 : If "Members", "Groups, "Profile", "PM" and "PM" are visible to guests, and you use the same button for "Log in" and "Log out"

REPLACE WITH

                <table cellspacing="0" cellpadding="0" border="0">
                    <tr> 
                        <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="{I_HEADER_INDEX}" border="0" alt="{L_INDEX}" /></a><a href="{U_FAQ}" class="mainmenu"><img src="{I_HEADER_FAQ}" border="0" alt="{L_FAQ}" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="{I_HEADER_SEARCH}" border="0" alt="{L_SEARCH}" hspace="0" /></a></span></td>
<!-- BEGIN switch_user_logged_in -->
<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_MEMBERLIST}" class="mainmenu"><img src="{I_HEADER_MEMBERLIST}" border="0" alt="{L_MEMBERLIST}" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="{I_HEADER_USERGROUPS}" border="0" alt="{L_USERGROUPS}" hspace="0" /></a><a href="{U_PROFILE}" class="mainmenu"><img src="{I_HEADER_EDITPROFILE}" border="0" alt="{L_PROFILE}" /></a><a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="{PRIVMSG_IMG}" border="0" alt="{PRIVATE_MESSAGE_INFO}" /></a></span></td>
<!-- BEGIN switch_user_logged_out -->
<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_REGISTER}" class="mainmenu"><img src="{I_HEADER_REGISTER}" border="0" alt="{L_REGISTER}" /></a></span></td>
<!-- END switch_user_logged_out -->
<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="{I_HEADER_LOGIN}" border="0" alt="{L_LOGIN_LOGOUT}" /></a></span></td>
                    </tr>
                </table></td>

SAVE AND CLOSE FILES

But why do I have to use several table cells for my navbar ?

The reason is simple : When I insert a switch to hide buttons to guests or registered users, I have to use a line-break, so each comment line is on a separate line.  Otherwise, this crashes the navbar's display.  But, if I separate these comment lines, this creates spaces between buttons where switches are inserted.  For this reason, I separate the bar into table cells, so the switches will be inserted outside table cells and then, this will avoid this space issue.  More, the subSilver's table default cellpadding is set to 2, so it must be modified as well, to change it to 0, so it will finish to suppress spaces between buttons by removing the padding.

After these modifications, test your style and you should normally see your buttons.

0 comments