Using big buttons in the menu bar
Now, with my modified
overall_header.html file from the two posts above and
this appearance, I'll show you how to have big buttons instead of having small icons next to each link.
The method that I'll show you will allow multilingual support for these buttons and so, your buttons language will correspond to the visitor's language choice, if your board has several languages or if you want to make a multilingual style that's destined to be downloaded freely.
While on phpBB2, we needed to do extra coding in the template's configuration file to enable multilingual support in the navbar, it's now much simpler on phpBB3 with a variable that works everywhere in the style's templates and that is as follow :
{T_IMAGESET_LANG_PATH}
This variable corresponds to the language folder of your imageset. So, if you already have your buttons, place them in the
styles/subsilver2/imageset/fr/ for French and/or
styles/subsilver2/imageset/en/ for English, and you continue like this if you added other languages. For example, I took pink Valentines buttons from one of my Forumotion styles. Even if the look will be awful, what is important is to show the possibilities of phpBB3 styling..
Now, we're ready to modify
overall_header.html to install our menu bar's big buttons !
Let's take the code of the menu that you previously centered :
<div id="menubar">
<table width="100%" cellspacing="0">
<tr>
<td class="genmed" align="center">
<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a> <!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --> <a href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --> <a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_mini_message.gif" width="12" height="13" alt="*" /> {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
<!-- ELSEIF S_REGISTER_ENABLED --> <a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_mini_register.gif" width="12" height="13" alt="*" /> {L_REGISTER}</a>
<!-- ENDIF -->
<!-- ENDIF -->
<a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="*" /> {L_FAQ}</a>
<!-- IF S_DISPLAY_SEARCH --> <a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> {L_SEARCH}</a><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --> <a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /> {L_MEMBERLIST}</a><!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --> <a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" alt="*" /> {L_PROFILE}</a><!-- ENDIF -->
<!-- ENDIF -->
</td>
</tr>
</table>
</div>
Now, for each link, replace all the
{T_THEME_PATH}/images
by
{{T_IMAGESET_LANG_PATH}}
Don't forget to change your pics extension if you are using PNGs for example, like I did.
This gives me this result on my side :
<div id="menubar">
<table width="100%" cellspacing="0">
<tr>
<td class="genmed" align="center">
<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a> <!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --> <a href="{U_RESTORE_PERMISSIONS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" width="12" height="13" alt="*" /> {L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --> <a href="{U_PRIVATEMSGS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message.png" width="12" height="13" alt="*" /> {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
<!-- ELSEIF S_REGISTER_ENABLED --> <a href="{U_REGISTER}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_register.gif" width="12" height="13" alt="*" /> {L_REGISTER}</a>
<!-- ENDIF -->
<!-- ENDIF -->
<a href="{U_FAQ}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_faq.png" width="12" height="13" alt="*" /> {L_FAQ}</a>
<!-- IF S_DISPLAY_SEARCH --> <a href="{U_SEARCH}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_search.png" width="12" height="13" alt="*" /> {L_SEARCH}</a><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --> <a href="{U_MEMBERLIST}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_members.png" width="12" height="13" alt="*" /> {L_MEMBERLIST}</a><!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --> <a href="{U_PROFILE}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_profile.png" width="12" height="13" alt="*" /> {L_PROFILE}</a><!-- ENDIF -->
<!-- ENDIF -->
</td>
</tr>
</table>
</div>
Now, make sure that you see your buttons, and not asterisks, like in my example where you'll see pink squares corresponding to my buttons :
Capture
If all your pics show up, let's go for resizing them to full size, and for placing the plain texts as alternate texts, where the stars are. The reason is that for accessibility, if an image has to play a major role in page navigation, as it's the case for our navigation buttons, the
alt="" argument must be correctly filled, so the replacement text will be displayed if the pics cannot be displayed or if a blind visitor or a visitor that uses a text browser visit the forum. This hadn't much importance before this modification as the plain texts were present and so, there was no need to have duplicate texts, but now that we have only buttons, this detail becomes vital for your style's accessibility.
So, let's take an example in our menu :
<a href="{U_FAQ}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_faq.png" width="12" height="13" alt="*" /> {L_FAQ}</a>
We remove the
width="12" height="13" and then, we move
{L_FAQ} to where the asterisk
* is located in the
alt="" argument, to get this result :
<a href="{U_FAQ}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_faq.png" alt="{L_FAQ}" /></a>
Apply the same changes to each link.
Warning : About the "X new messages" link, you have to copy everything that's located between the
/> and
</a> of the link, so this means this piece of code :
{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->
Now, you should have a code that's similar to this :
<div id="menubar">
<table width="100%" cellspacing="0">
<tr>
<td class="genmed" align="center">
<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /></a> <!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --> <a href="{U_RESTORE_PERMISSIONS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_RESTORE_PERMISSIONS}" /></a><!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --> <a href="{U_PRIVATEMSGS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message.png" width="12" height="13" alt="{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->" /></a><!-- ENDIF -->
<!-- ELSEIF S_REGISTER_ENABLED --> <a href="{U_REGISTER}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_register.gif" alt="{L_REGISTER}" /></a>
<!-- ENDIF -->
<!-- ENDIF -->
<a href="{U_FAQ}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_faq.png" alt="{L_FAQ}" /></a>
<!-- IF S_DISPLAY_SEARCH --> <a href="{U_SEARCH}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_search.png" alt="{L_SEARCH}" /></a><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --> <a href="{U_MEMBERLIST}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_members.png" alt="{L_MEMBERLIST}" /></a><!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --> <a href="{U_PROFILE}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_profile.png" alt="{L_PROFILE}" /></a><!-- ENDIF -->
<!-- ENDIF -->
</td>
</tr>
</table>
</div>
Let's see the result :
Capture
The buttons are now full sized, but there are spaces between them, and the "Log in" and "Log out" links have the same button. So, let's correct these details.
We first remove the spaces (code ), in order to stick our buttons together.
But this isn't sufficient since we have to remove some line-breaks, especially around the FAQ button where there were persistent spaces on each side.
This gives me this code :
<div id="menubar">
<table width="100%" cellspacing="0">
<tr>
<td class="genmed" align="center">
<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /></a><!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --><a href="{U_RESTORE_PERMISSIONS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_RESTORE_PERMISSIONS}" /></a><!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --><span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message.png" alt="{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->" /></a><!-- ENDIF -->
<!-- ELSEIF S_REGISTER_ENABLED --><a href="{U_REGISTER}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_register.gif" alt="{L_REGISTER}" /></a><!-- ENDIF --><!-- ENDIF --><a href="{U_FAQ}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_faq.png" alt="{L_FAQ}" /></a><!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_search.png" alt="{L_SEARCH}" /></a><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><a href="{U_MEMBERLIST}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_members.png" alt="{L_MEMBERLIST}" /></a><!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --><a href="{U_PROFILE}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_profile.png" alt="{L_PROFILE}" /></a><!-- ENDIF -->
<!-- ENDIF -->
</td>
</tr>
</table>
</div>
We take a look to see the graphical result, when logged in :
Capture
And the same thing, when logged out :
Capture
(note : in the second capture, the big space without text is the Register button which is an animated GIF with a blinking text.)
Now, let's correct the detail about the "Login/Logout" button, and I'll also show you a tip to have a different button when there are new private messages.
I begin by the "Login/Logout" button.
We take the corredponding piece of code :
<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /></a><!-- ENDIF -->
Now, we need to use the conditional structure that checks if were are logged in :
<!-- IF S_USER_LOGGED_IN -->
The condition MUST be finished by a
<!-- ENDIF --> comment, but we also can use
<!-- ELSE --> as a complement, to display an alternate element when the condition isn't filled. We'll use it for our button ! So, if the user is logged in, the button "Log out" will show up, and if not, the "Log in" button will show up.
And just a small note for those who were used to phpBB2 : Take note that on phpBB3, you can now insert these comments in a "inline" way and so, you don't need to place these comments in separate lines, unlike phpBB2 where you get your navbar cut off if you don't do this !
We'll now apply this to our "Log in/Log out" button :
<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><!-- IF S_USER_LOGGED_IN --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_logout.png" alt="{L_LOGIN_LOGOUT}" /><!-- ELSE --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /><!-- ENDIF --></a><!-- ENDIF -->
Let's see the result, after loggin-in :
Capture
Now, the Logout button shows up !
Now, let's go for the bonus tip : Some users want to use a different button when the user has new private messages.
So, let's take the corresponding code piece :
<!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message.png" alt="{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->" /></a><!-- ENDIF -->
In this code, we'll use the
<!-- IF S_USER_NEW_PRIVMSG --> switch, with a
<!-- ELSE --> to display a different button.
Let's apply it :
<!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}"><img src="<!-- IF S_USER_NEW_PRIVMSG -->{T_IMAGESET_LANG_PATH}/icon_mini_message_new.gif<!-- ELSE -->{T_IMAGESET_LANG_PATH}/icon_mini_message.png<!-- ENDIF -->" alt="{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->" /></a><!-- ENDIF -->
Let's now view the result. By chance, on the test board I use for the screenshots, one of the test accounts has one unread private message, so I just have to log into this account to see the result :
Capture
You don't see the text in my capture since it's an animated GIF with a blinking text, and this corresponds to my "New private messages" button !
Now, you can also modify the buttons positioning, like for example moving "Log in/Log out" at the right end instead of the left end !
So, for this example, I move this block :
<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><!-- IF S_USER_LOGGED_IN --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_logout.png" alt="{L_LOGIN_LOGOUT}" /><!-- ELSE --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /><!-- ENDIF --></a><!-- ENDIF -->
to place it just before :
</td>
</tr>
</table>
</div>
Now, here's the final code :
<div id="menubar">
<table width="100%" cellspacing="0">
<tr>
<td class="genmed" align="center">
<!-- IF U_RESTORE_PERMISSIONS --><a href="{U_RESTORE_PERMISSIONS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_RESTORE_PERMISSIONS}" /></a><!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --><span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}"><!-- IF PRIVATE_MESSAGE_INFO_UNREAD --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message_new.gif" alt="{PRIVATE_MESSAGE_INFO}, {PRIVATE_MESSAGE_INFO_UNREAD}" /><!-- ELSE --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message.png" alt="{PRIVATE_MESSAGE_INFO}" /><!-- ENDIF --></a><!-- ENDIF -->
<!-- ELSEIF S_REGISTER_ENABLED --><a href="{U_REGISTER}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_register.gif" alt="{L_REGISTER}" /></a><!-- ENDIF --><!-- ENDIF --><a href="{U_FAQ}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_faq.png" alt="{L_FAQ}" /></a><!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_search.png" alt="{L_SEARCH}" /></a><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><a href="{U_MEMBERLIST}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_members.png" alt="{L_MEMBERLIST}" /></a><!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --><a href="{U_PROFILE}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_profile.png" alt="{L_PROFILE}" /></a><!-- ENDIF -->
<!-- ENDIF -->
<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><!-- IF S_USER_LOGGED_IN --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_logout.png" alt="{L_LOGIN_LOGOUT}" /><!-- ELSE --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /><!-- ENDIF --></a><!-- ENDIF -->
</td>
</tr>
</table>
</div>
And the final visual result of our menu bar :
Capture
Now, you have your navbar with big buttons !
