Welcome, you're not connected. ( Log in - Register )

Ishimaru-Design > Tutorials, ressources and support > phpBB2 > Tutorials & Tips > Multilingual images-only navbar without eXtremeStyle !

RSS >  Multilingual images-only navbar without eXtremeStyle !
Ishimaru Chiaki #1 06/11/2008 - 21h10

Class : ID Admin
Posts : 1045
Registered on : 12/11/2007
Age : 25
Sex : Female

Offline Mail Www

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">&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 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.
Back to my Ubuntu, RIP Hardy, welcome Jaunty !
My portfolio (only available in French for now)
Posted Image
Posted Image
Posted Image

 >  Fast reply

Message

Ishimaru-Design > Tutorials, ressources and support > phpBB2 > Tutorials & Tips > Multilingual images-only navbar without eXtremeStyle !

 >  Stats

1 user(s) connected during the last 10 minutes (0 member(s) and 1 guest(s)).