phpbb3 category images

[Carter22 Chuck]

Post the HTML from that picture here if you could, I wanna see what it's doing from a rendered HTML standpoint. The code sent to the browser should be the same no matter what, so that's where to start.

[Crazygar Gary A.MacDonald]

When I do inspect element with Google Chrome, this is what I get for HTML;

Code: Select all

<div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <div style="background-image: url(./styles/tfhforum/theme/images/catbg_3.gif); height: 53px; background-repeat:no-repeat; margin:0"> <span style="line-height:53px"> <a href="./viewforum.php?f=3" style="display:block; width:100% height:53px; text-decoration:none; overflow:hidden;">&nbsp;</a></span> </div>
               </dl>
            </li>
         </ul>

I picked out the problem; catbg_3.gif. It should be the same file (I should not have to make duplicate files, but I made another "catbg_1.gif" and saved it as catbg_3.gif and it works)! This is the id of the first forum rather than category. I wish there was a way to "detect" where the list is being drawn from and just (-1) from the forumID to give me the proper file.

The first category on my main index is 3. But when I create a catbg_2.gif, it will not display. This might be another root of my problem. The worst case scenario, I make some duplicate GIF files that are tiny in comparison.

The way phpbb3 does the ForumID is weird. Totally random.

Gary

[Carter22 Chuck]

Yes, that's the same situation I pointed out in the post before your last one. The code isn't wrong, you just need to find the forum identifier for each instance of the forum category and rename an image with that number. Phpbb3 has a different forum id # for each iteration of the forum/subforum. So you'll have to go to each "instance" and find the number it assigns to each forum iteration. If you have a lot of subforums there will be a lot of images, but that's just the trade off for this particular mod.

[Crazygar Gary A.MacDonald]

Then I have it right then. Thanks Carter. Its a nice Mod, definitely doing to make some visual improvements to the Forum for sure.

Gary

[AkaiSenpai]

I'm interested in accomplishing this for my forum as well and I've been following the steps, but my forum remains unchanged...

I edited forumlist_body.html with the code provided and added images corresponding to the categories (though I used .jpg instead of .gif) such as catbg_1.jpg, but still, nothing shows...

Has a tutorial been written about this or can someone please assist me?

[Crazygar Gary A.MacDonald]

AkaiSempai, let me work out a small Tutorial and I'll be glad to show you how I accomplished it. Might be tomorrow though.

Gary

[Crazygar Gary A.MacDonald]

Code: Select all

<div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <div style="background-image: url({T_THEME_PATH}/images/catbg_{forumrow.FORUM_ID}.gif); height: 53px; background-repeat:no-repeat; margin:0"> <span style="line-height:53px"> <a href="{forumrow.U_VIEWFORUM}" style="display:block; width:100% height:53px; text-decoration:none; overflow:hidden;">&nbsp;</a></span> </div>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">

Now you'll notice that {forumrow.FORUM_ID}.gif is replacing the number. This code works, all you need to do is move your mouse over the category name link to determine the number (underneath you'll see something similar like this.. f=8 at the end). This is your image #. So, for instance.

Introductions = 2
General Help = 4
Coding Problems = 8

Therefore, you must name your catbg_ to co-respond to the forum #'s. Also, you have to make more than one. As when you are in viewing the subforum, it will also have its on unique value. So for "Coding Problems" you might have;

catbg_8 < - Main Board Index
catbg_12 < - SubForum Index

On TFH Magazine's Website I have done this with success. Its fun and worked great. I am in the process of working on one step further with Flash!

Gary

[rabufo]

Hello,
after 3 days of searching I find EXACTLY what I need in this forum and in this post
Anyway, I'm really newbie in phpBB, so hope a good soul will help me Are these changes fully applicable in prosilver and phpBB 3.0.8? Have I to edit forumlist_body.html as suggested in the last post above? What other files have I to edit (for example, I didn't understand where I've to place the images-gif/forum Id list)
This is my actual forumlist_body.html

Code: Select all

<!-- BEGIN forumrow -->
   <!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT  -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- ENDIF -->

   <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
                  <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">{L_POSTS}</dd>
                  <dd class="lastpost"><span>{L_LAST_POST}</span></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- ENDIF -->

   <!-- IF not forumrow.S_IS_CAT -->
      <li class="row">
         <dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
            <dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
               <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}</span><!-- ENDIF -->
               <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
               {forumrow.FORUM_DESC}
               <!-- IF forumrow.MODERATORS -->
                  <br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
               <!-- ENDIF -->
               <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
            </dt>
            <!-- IF forumrow.CLICKS -->
               <dd class="redirect"><span>{L_REDIRECTS}: {forumrow.CLICKS}</span></dd>
            <!-- ELSEIF not forumrow.S_IS_LINK -->
               <dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
               <dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
               <dd class="lastpost"><span>
                  <!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn>  <!-- IF S_ALTT_ACTIVE --><!-- IF forumrow.ALTT_LINK_NAME_SHORT --><a <!-- IF ALTT_STYLE -->style="{ALTT_STYLE}"<!-- ENDIF --> href="{forumrow.U_ALTT_LINK}" title="{forumrow.ALTT_LINK_NAME}">{forumrow.ALTT_LINK_NAME_SHORT}</a><!-- ELSE -->{L_ALTT_PROTECTED}<!-- ENDIF --><br /><!-- ENDIF -->{L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
                  <!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF --><br />{forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF --></span>
               </dd>
            <!-- ENDIF -->
         </dl>
      </li>
   <!-- ENDIF -->

   <!-- IF forumrow.S_LAST_ROW -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- ENDIF -->

<!-- BEGINELSE -->
   <div class="panel">
      <div class="inner"><span class="corners-top"><span></span></span>
      <strong>{L_NO_FORUMS}</strong>
      <span class="corners-bottom"><span></span></span></div>
   </div>
<!-- END forumrow -->


Please excuse me for all these question and thank you for your help