Category names as images in Prosilver
This tutorial will show you how to display your category names as images instead of plain text, in order to get a result that looks like this :
Note : The tutorial has been tested on a vanilla phpBB 3.0.7-PL1 using Prosilver style
Summary
- [*]File modifications
- [*]Set images in ACP
Warning : It is recommended to backup all your files before modifying themI !
File modifications
The following modifications must be followed as if you were installing a MOD.
OPEN
includes/functions_display.php
FIND, line 312 (this one, not line 469 !)
'FORUM_IMAGE' => ($row['forum_image']) ? '<img src="' . $phpbb_root_path . $row['forum_image'] . '" alt="' . $user->lang[$folder_alt] . '" />' : '',
REPLACE BY
'FORUM_IMAGE' => ($row['forum_image']) ? '<img src="' . $phpbb_root_path . $row['forum_image'] . '" alt="' . (($row['forum_type'] == FORUM_CAT) ? $row['forum_name'] : $user->lang[$folder_alt]) . '" />' : '',
OPEN
styles/prosilver/template/forumlist_body.html
FIND, line 10
<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->
AFTER, ADD
<!-- IF forumrow.S_IS_CAT -->
<h2 class="category"><a href="{forumrow.U_VIEWFORUM}"><!-- IF forumrow.FORUM_IMAGE -->{forumrow.FORUM_IMAGE}<!-- ELSE -->{forumrow.FORUM_NAME}<!-- ENDIF --></a></h2>
<!-- ENDIF -->
FIND, line 19
<dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
REPLACE BY
<dt>{L_FORUM}</dt>
SAVE AND CLOSE ALL FILES
Setting pics in ACP
Everything is now ready to display pics, but you first have to edit your categories in order to indicate the path to the pics that you'll have previously made with your image editor (photoshop, gimp, etc.).
Placing pics in your FTP
Open your FTP client (ex: Filezilla) and from your board's root directory, go to the
/image/ directory, then create a new directory that you'll name
/forum_images/. Then upload your category pics in this directory. This way, you can use relative paths to link your pics to its categories.
Editing categories
Your pics are ready to be linked, so all is left is to edit your categories, one by one, and then in each of them, to place the corresponding pic this way in the forum image field :
images/forum_images/monimage.gif
Here's an example with my test category :
You now have your category name displayed as an image ! The advantage of the modification I gave you in functions_display.php is that even if the pic cannot be viewed, its alternate text will show the category name anyway and so, there is no accessibility loss.
The proof, when I view the image's infos :
Have a nice styling !
Special thanks to Dakin Quelia and Elgobo from phpBB-France for their help in debugging my modification