phpbb3 category images

[Carter22 Chuck]

I posted this in the coding forum but it's more of a skinning issue - feel free to delete that topic if necessary.

I am using the Subsilver2 skin, and would like to have each category have a different background image on the index page. I got this to work in phpbb 2 by using the code below:

Code: Select all

<div style="background-image: url(templates/xxx/images/cat_{catrow.CAT_ID}.gif); padding: 0; float: right; width: 400px; height: 28px; background-repeat:no-repeat;"></div>

I assume something similar will work with phpbb 3, but I'm unsure what the template variable for each category is. Can someone help me out with this template tweak?

An example I always use to explain it is here: HouseZeit


See the way each category has a different background image? I would like that on my forum, and I have in on my phpbb2 forum, but would like to include it on phpbb 3.

[Sniper_E]

Carter, If I was at my computer at home I could do this. You need to open the forumlist_body.html template.
Look for the IF CAT section which should be at the top of that template. Can you try to add that code in there.
Post that section of the template if you have trouble adding it in there and I'll try to help.

[Carter22 Chuck]

Hi Sniper, thanks for the assistance.

The problem I face is that I'm not sure if that tidbit of code I posted will work - that's just what worked on my phpbb2 forum. I know there is probably a variable that calls the category number and I was hoping someone could help me with that piece of info - but if there's another way to have a different background for each category on the index, I would be fine using that code. I'm still getting used to the ins and outs of phpbb3, so I'm well familiar with forum skinning but still learning the new version.

As you requested, here's my forumlist_body.html file - let me know if you need anything else.

Code: Select all

<table class="tablebg" cellspacing="1" width="100%">
<tr>
   <td class="cat" colspan="5" align="{S_CONTENT_FLOW_END}"><!-- IF not S_IS_BOT and U_MARK_FORUMS --><a class="nav" href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a><!-- ENDIF -->&nbsp;</td>
</tr>
<tr>
   <th colspan="2">&nbsp;{L_FORUM}&nbsp;</th>
   <th width="50">&nbsp;{L_TOPICS}&nbsp;</th>
   <th width="50">&nbsp;{L_POSTS}&nbsp;</th>
   <th>&nbsp;{L_LAST_POST}&nbsp;</th>
</tr>
<!-- BEGIN forumrow -->
   <!-- IF forumrow.S_IS_CAT -->
      <tr>
         <td class="cat" colspan="2"><h4><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a></h4></td>
         <td class="catdiv" colspan="3">&nbsp;</td>
      </tr>
   <!-- ELSEIF forumrow.S_IS_LINK -->
      <tr>
         <td class="row1" width="50" align="center">{forumrow.FORUM_FOLDER_IMG}</td>
         <td class="row1">
            <!-- IF forumrow.FORUM_IMAGE -->
               <div style="float: {S_CONTENT_FLOW_BEGIN}; margin-{S_CONTENT_FLOW_END}: 5px;">{forumrow.FORUM_IMAGE}</div><div style="float: {S_CONTENT_FLOW_BEGIN};">
            <!-- ENDIF -->
            <a class="forumlink" href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a>
            <p class="forumdesc">{forumrow.FORUM_DESC}</p>
            <!-- IF forumrow.FORUM_IMAGE --></div><!-- ENDIF -->
         </td>
         <!-- IF forumrow.CLICKS -->
            <td class="row2" colspan="3" align="center"><span class="genmed">{L_REDIRECTS}: {forumrow.CLICKS}</span></td>
         <!-- ELSE -->
            <td class="row2" colspan="3" align="center">&nbsp;</td>
         <!-- ENDIF -->
      </tr>
   <!-- ELSE -->
      <!-- IF forumrow.S_NO_CAT -->
         <tr>
            <td class="cat" colspan="2"><h4>{L_FORUM}</h4></td>
            <td class="catdiv" colspan="3">&nbsp;</td>
         </tr>
      <!-- ENDIF -->
      <tr>
         <td class="row1" width="50" align="center">{forumrow.FORUM_FOLDER_IMG}</td>
         <td class="row1" width="100%">
            <!-- IF forumrow.FORUM_IMAGE -->
               <div style="float: {S_CONTENT_FLOW_BEGIN}; margin-{S_CONTENT_FLOW_END}: 5px;">{forumrow.FORUM_IMAGE}</div><div style="float: {S_CONTENT_FLOW_BEGIN};">
            <!-- ENDIF -->
            <a class="forumlink" href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a>
            <p class="forumdesc">{forumrow.FORUM_DESC}</p>
            <!-- IF forumrow.MODERATORS -->
               <p class="forumdesc"><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}</p>
            <!-- ENDIF -->
            <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS -->
               <p class="forumdesc"><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</p>
            <!-- ENDIF -->
            <!-- IF forumrow.FORUM_IMAGE --></div><!-- ENDIF -->
         </td>
         <td class="row2" align="center"><p class="topicdetails">{forumrow.TOPICS}</p></td>
         <td class="row2" align="center"><p class="topicdetails">{forumrow.POSTS}</p></td>
         <td class="row2" align="center" nowrap="nowrap">
            <!-- IF forumrow.LAST_POST_TIME -->
               <p class="topicdetails">{forumrow.LAST_POST_TIME}</p>
               <p class="topicdetails">{forumrow.LAST_POSTER_FULL}
                  <!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a><!-- ENDIF -->
               </p>
            <!-- ELSE -->
               <p class="topicdetails">{L_NO_POSTS}</p>
            <!-- ENDIF -->
         </td>
      </tr>
   <!-- ENDIF -->
<!-- BEGINELSE -->
   <tr>
      <td class="row1" colspan="5" align="center"><p class="gensmall">{L_NO_FORUMS}</p></td>
   </tr>
<!-- END forumrow -->
</table>

[Carter22 Chuck]

Like any stubborn skin designer, I figured this out for myself.

It turns out the variable I was looking for was {forumrow.FORUM_ID}. That is the equivalent of the category ID I was looking for - which makes sense, since phpbb3 doesn't use category id's, simply names the categories a different forum id number.

Here is the code adapted for my skin on phpbb3:

Code: Select all

<div style="background-image: url({T_THEME_PATH}/images/catbg_{forumrow.FORUM_ID}.gif); padding: 0; background-repeat:no-repeat;"></div>

Thanks for the assistance though - hopefully this can help someone else who might want to skin their forum indexes with backgrounds.

[Crazygar Gary A.MacDonald]

Carter22, that's actually pretty cool. I might have a use for that as well! Thanks!

Gary

[Carter22 Chuck]

No problem. I'm glad you could use it. It allows for some cool styling possibilities.

[Crazygar Gary A.MacDonald]

One question though, what part am I changing to "splice" in this code. Also the format of the "gif" files; is it this;

catbg_(FORUMNAME) or catbg_{FORUM #)?

Gary

[Crazygar Gary A.MacDonald]

This is the section of code "I THINK" I need to replace in my forumlist_body.html;

Code: Select all

<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>

Correct me if I wrong. Looks like this is it! I've made a copy and going to see if my hunch is right.

Ok, update, I've changed it and now the entire "CATEGORY HEADER" is gone along with the Topic, Post, Lastpost (no biggie, I can't stand that anyways) but I am clueless why this does not work;

Code: Select all

<ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <div style="background-image: url({T_THEME_PATH}/images/catbg_{forumrow.FORUM_ID}.gif); padding: 0; background-repeat:no-repeat;"></div>
               </dl>
            </li>
         </ul>

I have my filenames for the categories named; "catbg_1.gif" (with the proper amount of numbers for each forum) or do I need the actual name? They are installed in my styles/mystyle/theme/images/ directory as well

EDIT: Feb 15/09

To further this along, I've managed to get one image displayed, but its totally off when it comes to alignment? The rest of the forums don't display the proper images. Only the first category shows the image (a little bit offset). Is there a way to;

a) Change the code to IMG instead of background (background, gives less formatting options than image)
b) Have it display for the rest?

Gary

[Crazygar Gary A.MacDonald]

I've figured it out! This is what happened.

On a hunch, rather just sequentially numbering them, I went to the "first category Forum" and substracted one. For instance,

1. Category One (catbg_1.gif)
2. ForumType
3. ForumType

10. Category Two (catbg_10.gif)
11. ForumType
12. ForumType

34. Category Three (catbg_34.gif)
35. ForumType
36. ForumType

I checked the link at the bottom of my screen (I use Google Chrome) and simply substracted one from the first forum in the new category and VOILA! It worked!

Sometimes ,being stubborn is a good thing.

Gary

[Crazygar Gary A.MacDonald]

Once I figure out why it does not display when just click the forum, I'll paste the response here as well. This way, the pics are global throughtout the Forum. I've also ran into problems with subForums....

Gary