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 who were proposed to me didn't work.
I finally could get it sorted out with
crewstyle's help on support-phpBB2.com.
To make sure that other phpBB2 style creators benefit of this tip, I write this tutorial.
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/VotreStyle/VotreStyle.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"> <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> <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> <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> <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>
<!-- BEGIN switch_user_logged_out -->
<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>
<!-- END switch_user_logged_out -->
</span></td>
</tr>
<tr>
<td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <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> <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> <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> </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 BY
<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 BY
<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 BY
<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.
