phpbb3 category images

[Carter22 Chuck]

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

It goes catbg_{forum number}.gif (or whatever format you want to be a background image. Doesn't have to be gif or the same name for that matter, just incorporate the number of the forum id into the file name.

As far as your other problems go, do you have a link to your forum? Might be an easier prospect to see the code in action. I made this hack for Subsilver2, but the same things should work for Prosilver as well. It's just a matter of changing the correct code. It might be more suitable to use it as a background for a normal theme element rather than introducing a separate div.

[Crazygar Gary A.MacDonald]

Currently the test forum is on my PC (and laptop) and not accessable to anyone but myself. I managed to get the pics ok, but subforums and clicking on the category link does not display the image that should be associated with the Forum section in question.

Here's the "forumlist_body.html" code. Nothing appears out of sorts. I know that viewforum_body.html calls on (via <!--- INCLUDE forumlist_body.html -->) forumlist body for output, which is making no sense as it shows the first series of initial forum category images ok.

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">
                  <div style="background-image: url({T_THEME_PATH}/images/catbg_{forumrow.FORUM_ID}.gif); height: 53px; background-repeat:no-repeat; margin:0"></div>
               </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>
               <!-- 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 --><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 forumrow.LAST_TOPIC_TITLE_SHORT --><a style="font-weight: bold;" href="{forumrow.U_LAST_TOPIC}" title="{forumrow.LAST_TOPIC_TITLE}">{forumrow.LAST_TOPIC_TITLE_SHORT}</a><br /><!-- ELSEIF forumrow.LAST_POST_SUBJECT_SHORT --><a style="font-weight: bold;" href="{forumrow.U_LAST_POST}" title="{forumrow.LAST_POST_SUBJECT}">{forumrow.LAST_POST_SUBJECT_SHORT}</a><br /><!-- ENDIF --></dfn> {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
                  <a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{L_POSTED_ON_DATE} {forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<!-- ENDIF --></span>
               </dd>
            <!-- ENDIF -->
         </dl>
      </li>
   <!-- ENDIF -->

   <!-- IF forumrow.S_LAST_ROW -->
         </ul>
         <div style="background-image: url({T_THEME_PATH}/images/lastforum.gif); height: 31px; background-repeat:no-repeat; margin:0"></div>
         <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 -->

And, obviously, my viewforum_body.html (nothing really special but adding it anyways). I am not sure if I need placement in this or tweaking within "forumlist_body.html";

Code: Select all

<!-- INCLUDE overall_header.html -->
<!-- IF U_MCP --><p>[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ENDIF -->
<h2><a href="{U_VIEW_FORUM}">{FORUM_NAME}</a></h2>

<!-- IF FORUM_DESC or MODERATORS or U_MCP -->
<p>
   <!-- NOTE: remove the style="display: none" when you want to have the forum description on the forum body -->
   <!-- IF FORUM_DESC --><span style="display: none">{FORUM_DESC}<br /></span><!-- ENDIF -->
   <!-- IF MODERATORS --><strong><!-- IF S_SINGLE_MODERATOR -->{L_MODERATOR}<!-- ELSE -->{L_MODERATORS}<!-- ENDIF -->:</strong> {MODERATORS}<!-- ENDIF -->
</p>
<!-- ENDIF -->

<!-- IF S_FORUM_RULES -->
   <div class="rules">
      <div class="inner"><span class="corners-top"><span></span></span>

      <!-- IF U_FORUM_RULES -->
         <a href="{U_FORUM_RULES}">{L_FORUM_RULES}</a>
      <!-- ELSE -->
         <strong>{L_FORUM_RULES}</strong><br />
         {FORUM_RULES}
      <!-- ENDIF -->

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

<!-- IF S_HAS_SUBFORUM -->
<!-- IF not S_IS_BOT and U_MARK_FORUMS -->
<ul class="linklist">
   <li class="rightside"><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li>
</ul>
<!-- ENDIF -->
   <!-- INCLUDE forumlist_body.html -->
<!-- ENDIF -->

<!-- IF S_DISPLAY_POST_INFO or PAGINATION or TOTAL_POSTS or TOTAL_TOPICS -->
   <div class="topic-actions" <!-- IF S_HAS_SUBFORUM -->style="margin-top: 2em;"<!-- ENDIF -->>

   <!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
      <div class="buttons">
         <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF --></a></div>
      </div>
   <!-- ENDIF -->

   <!-- IF S_DISPLAY_SEARCHBOX -->
      <div class="search-box">
         <form method="post" id="forum-search" action="{S_SEARCHBOX_ACTION}">   
         <fieldset>
            <input class="inputbox search tiny" type="text" name="keywords" id="search_keywords" size="20" value="{L_SEARCH_FORUM}" onclick="if (this.value == '{LA_SEARCH_FORUM}') this.value = '';" onblur="if (this.value == '') this.value = '{LA_SEARCH_FORUM}';" />
            <input class="button2" type="submit" value="{L_SEARCH}" />   
            <input type="hidden" value="{FORUM_ID}" name="fid[]" />
         </fieldset>
         </form>
      </div>
   <!-- ENDIF -->

   <!-- IF PAGINATION or TOTAL_POSTS or TOTAL_TOPICS -->
      <div class="pagination">
         <!-- IF not S_IS_BOT and U_MARK_TOPICS --><a href="{U_MARK_TOPICS}" accesskey="m">{L_MARK_TOPICS_READ}</a> &bull; <!-- ENDIF --><!-- IF TOTAL_TOPICS -->{TOTAL_TOPICS}<!-- ENDIF -->
         <!-- IF PAGE_NUMBER -->
            <!-- IF PAGINATION --> &bull; <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a> &bull; <span>{PAGINATION}</span><!-- ELSE --> &bull; {PAGE_NUMBER}<!-- ENDIF -->
         <!-- ENDIF -->
      </div>
   <!-- ENDIF -->

   </div>
<!-- ENDIF -->

<!-- IF S_NO_READ_ACCESS -->

   <div class="panel">
      <div class="inner"><span class="corners-top"><span></span></span>
      <strong>{L_NO_READ_ACCESS}</strong>
      <span class="corners-bottom"><span></span></span></div>
   </div>

   <!-- IF not S_USER_LOGGED_IN -->

      <form action="{S_LOGIN_ACTION}" method="post">

      <div class="panel">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div class="content">
            <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a></h3>
      
            <fieldset class="fields1">
            <dl>
               <dt><label for="username">{L_USERNAME}:</label></dt>
               <dd><input type="text" tabindex="1" name="username" id="username" size="25" value="{USERNAME}" class="inputbox autowidth" /></dd>
            </dl>
            <dl>
               <dt><label for="password">{L_PASSWORD}:</label></dt>
               <dd><input type="password" tabindex="2" id="password" name="password" size="25" class="inputbox autowidth" /></dd>
               <!-- IF S_AUTOLOGIN_ENABLED --><dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="3" /> {L_LOG_ME_IN}</label></dd><!-- ENDIF -->
               <dd><label for="viewonline"><input type="checkbox" name="viewonline" id="viewonline" tabindex="4" /> {L_HIDE_ME}</label></dd>
            </dl>
            <dl>
               <dt>&nbsp;</dt>
               <dd><input type="submit" name="login" tabindex="5" value="{L_LOGIN}" class="button1" /></dd>
            </dl>
            </fieldset>
         </div>

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

   <!-- ENDIF -->

<!-- ENDIF -->

<!-- BEGIN topicrow -->
   
   <!-- IF not topicrow.S_TOPIC_TYPE_SWITCH and not topicrow.S_FIRST_ROW -->
      </ul>
      <span class="corners-bottom"><span></span></span></div>
   </div>
   <!-- ENDIF -->

   <!-- IF topicrow.S_FIRST_ROW or not topicrow.S_TOPIC_TYPE_SWITCH -->
      <div class="forumbg<!-- IF topicrow.S_TOPIC_TYPE_SWITCH --> announcement<!-- ENDIF -->">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header">
            <dl class="icon">
               <dt><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TYPE_SWITCH and topicrow.S_TOPIC_TYPE gt 1 -->{L_ANNOUNCEMENTS}<!-- ELSE -->{L_TOPICS}<!-- ENDIF --></dt>
               <dd class="posts">{L_REPLIES}</dd>
               <dd class="views">{L_VIEWS}</dd>
               <dd class="lastpost">{L_LAST_POST}</dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics">
   <!-- ENDIF -->
   
      <li class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- IF topicrow.S_POST_ANNOUNCE --> announce<!-- ENDIF --><!-- IF topicrow.S_POST_STICKY --> sticky<!-- ENDIF --><!-- IF topicrow.S_TOPIC_REPORTED --> reported<!-- ENDIF -->">
         <dl class="icon" style="background-image: url({topicrow.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
            <dt style="<!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS -->background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{topicrow.TOPIC_FOLDER_IMG_ALT}"><!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
               <!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED --><a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a> <!-- ENDIF -->
               <!-- IF topicrow.S_TOPIC_REPORTED --><a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
               <!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
               <!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} {L_POSTED_ON_DATE} {topicrow.FIRST_POST_TIME}
            </dt>
            <dd class="posts">{topicrow.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topicrow.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
               <a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{L_POSTED_ON_DATE} {topicrow.LAST_POST_TIME}</span>
            </dd>
         </dl>
      </li>

   <!-- IF topicrow.S_LAST_ROW -->
         </ul>
      <span class="corners-bottom"><span></span></span></div>
   </div>
   <!-- ENDIF -->

<!-- BEGINELSE -->
   <!-- IF S_IS_POSTABLE -->
   <div class="panel">
      <div class="inner"><span class="corners-top"><span></span></span>
      <strong>{L_NO_TOPICS}</strong>
      <span class="corners-bottom"><span></span></span></div>
   </div>
   <!-- ENDIF -->
<!-- END topicrow -->

<!-- IF S_SELECT_SORT_DAYS and not S_DISPLAY_ACTIVE -->
   <form method="post" action="{S_FORUM_ACTION}">
      <fieldset class="display-options">
         <!-- IF PREVIOUS_PAGE --><a href="{PREVIOUS_PAGE}" class="left-box {S_CONTENT_FLOW_BEGIN}">{L_PREVIOUS}</a><!-- ENDIF -->
         <!-- IF NEXT_PAGE --><a href="{NEXT_PAGE}" class="right-box {S_CONTENT_FLOW_END}">{L_NEXT}</a><!-- ENDIF -->
         <label>{L_DISPLAY_TOPICS}: {S_SELECT_SORT_DAYS}</label>
         <label>{L_SORT_BY} {S_SELECT_SORT_KEY}</label>
         <label>{S_SELECT_SORT_DIR} <input type="submit" name="sort" value="{L_GO}" class="button2" /></label>
      </fieldset>
   </form>
   <hr />
<!-- ENDIF -->

<!-- IF .topicrow and not S_DISPLAY_ACTIVE -->
   <div class="topic-actions">
      <!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
      <div class="buttons">
         <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}"><span></span><!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF --></a></div>
      </div>
      <!-- ENDIF -->
   
      <!-- IF PAGINATION or TOTAL_POSTS or TOTAL_TOPICS -->
      <div class="pagination">
         <!-- IF TOTAL_TOPICS and not S_IS_BOT and U_MARK_TOPICS --><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a> &bull;  <!-- ENDIF -->
         <!-- IF TOTAL_POSTS and not NEWEST_USER --> {TOTAL_POSTS}<!-- ELSEIF TOTAL_TOPICS and not NEWEST_USER --> {TOTAL_TOPICS}<!-- ENDIF -->
         <!-- IF TOTAL_USERS -->{TOTAL_USERS}<!-- ENDIF -->
         <!-- IF PAGINATION --> &bull;  <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a>
          &bull;  <span>{PAGINATION}</span><!-- ELSE --> &bull; {PAGE_NUMBER}<!-- ENDIF -->
      </div>
      <!-- ENDIF -->
   </div>
<!-- ENDIF -->

<!-- INCLUDE jumpbox.html -->

<!-- IF S_DISPLAY_ONLINE_LIST -->
   <h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3>
   <p>{LOGGED_IN_USER_LIST}</p>
<!-- ENDIF -->

<!-- IF S_DISPLAY_POST_INFO -->
   <h3>{L_FORUM_PERMISSIONS}</h3>
   <p><!-- BEGIN rules -->{rules.RULE}<br /><!-- END rules --></p>
<!-- ENDIF -->

<!-- INCLUDE overall_footer.html -->

The "viewforum_body.html" listed above is pretty much in its stock form. I'm just rather wondering why the Category images don't carry over to subforums and "Category Specific" listings? Yes, this is based on ProSilver.

Gary

[Carter22 Chuck]

Okay, after peaking at Prosilver, it's set up slightly differently than Subsilver2 (obviously ) so it requires slightly different code. We'll work out something that you can apply to other skins if you so desire. Since the category doesn't have it's own line (instead it's integrated in with the topics, posts/last post info etc), you'll have to skin the whole container div if you want.

Here is the quick code to skin the background of each forum section. Note you put the style attribute on the div with class of "forabg" rather than the <dt> or <dl> classes. Throwing a div in there will misalign that whole row so I discarded that approach and just put in a background-image: css tag in the code. If you are looking for something different though, we should be able to come up with something if you so desire.

Code: Select all

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
      <div class="forabg" style="background-image: url({T_THEME_PATH}/images/catbg_{forumrow.FORUM_ID}.gif); background-repeat: repeat;">
         <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 you want the category image to sit where the actual category name is, that would be doable too, though it might require some code rearranging. I've done something similar with a phpbb2 forum I have though. You can take out the words and simply make a link with display:block and click it that way.

Here is the index skinned with different backgrounds. In this case the images were catbg_14.gif 15 and 16:
[img]

And here is a subforum skinned with a background catbg_18.gif just as proof of concept.



I just set it to repeat as a default, but the situation is the same. However, if you don't have it set to repeat, your background will end and may look goofy unless your prosilver theme has a fixed width instead of variable.

[Crazygar Gary A.MacDonald]

Carter, is this in viewforum_body.html or forumlist_body.html? I tried the alternate code in the Forumlist_body html and it was a disaster. Here is a "sample" of what I have right now. I like it, I just want to have it pass over to subforums or clickable CATEGORY (have the link just have the matching category pic) link.

I get an empty container within the subforum or just clicking the "Category Link" to display only the Forums within this category. What you have is what I am looking for. Just a small tweak. Yes, I can't seem to wrap my head around what to do.

Gary

[Carter22 Chuck]

Carter, is this in viewforum_body.html or forumlist_body.html?

In forumlist_body.html.

I tried the alternate code in the Forumlist_body html and it was a disaster. Here is a "sample" of what I have right now. I like it, I just want to have it pass over to subforums or clickable CATEGORY (have the link just have the matching category pic) link.

Yeah, I had mussed up the background-image part but I fixed it, - try it again if you'd like, it's working now. It even works on subforums. If you want a find/replace part it's like this:

In forumlist_body.html
FIND:

Code: Select all

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


REPLACE WITH:

Code: Select all

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
      <div class="forabg" style="background-image: url({T_THEME_PATH}/images/catbg_{forumrow.FORUM_ID}.gif); background-repeat: no-repeat;">

      <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 you don't want to use this, post the code you are using now and we'll work on that. After we get this working on subforums, then we'll tackle the clickable aspect -that's not very difficult.

[Crazygar Gary A.MacDonald]

Code: Select all

<!-- 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">
                  <div style="background-image: url({T_THEME_PATH}/images/catbg_{forumrow.FORUM_ID}.gif); height: 53px; background-repeat:no-repeat; margin:0"></div>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">

This is the snippet I am working with right now in the forumlist_body.html file. It creates a 53px container in which displays the pics just fine. I removed the "<dd class="topics">{L_TOPICS}</dd> <dd class="posts">{L_POSTS}</dd>
<dd class="lastpost"><span>{L_LAST_POST}</span></dd>" as the images have correctly formatted headers built into them. Besides, with some of the pics, the text would disappear if I didn't do this. I have a "tempate" PSD in which all I do is dump in a correctly cropped image into, change the text of the forum name and bang! A new header.

The last code change turned the image into a border around the forum list container. This is the only thing holding me back to sending it over to the actual forum as a new cosmetic change. I appreciate the help Carter.

Gary

[Carter22 Chuck]

Yes, you are correct, my solution is skinning that entire div if you don't want to remove the TOPICS/POST/LAST POST text - yours is more elegant if you're just looking for a category header.

I've tested this out on my own forum and it looks like it'll do the trick:

forumlist_body.html
FIND:

Code: Select all

<!-- 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">
                  <div style="background-image: url({T_THEME_PATH}/images/catbg_{forumrow.FORUM_ID}.gif); height: 53px; background-repeat:no-repeat; margin:0"></div>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">

REPLACE WITH:

Code: Select all

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


That should make the entire div clickable with the same link as the original category text. Try it out and let me know if you want any changes.

[Crazygar Gary A.MacDonald]

That worked great actually. Now just to get those images to work their way over to the "clickable category" and SubCategories and we are in business! Thanks Carter.

Gary

[Carter22 Chuck]

Okay, describe what your problems are in more detail - on my board, using your code, the background image works even on subforums.



So what part is it not showing up in? If you mean, when you click on the individual category and the board only displays that category - well, that's just because phpbb3 has a different forum ID for that particular iteration of the category. So just look in your code and find what the forum ID is (go to view>source and find what number it appends onto that background image) and make another image with that #.

For example, on the index, my category "SSX Community" has a forum ID of 15, thus the bg image is catbg_15.gif. However, if I click on the category and display ONLY "SSX Community" on the index, then the forum ID is now 7 and the background image is now catbg_7.gif.

[Crazygar Gary A.MacDonald]

Inspecting the element in the subforum, this is what I get; <a href="./viewforum.php?f=3" display:block; width:100% height:53px; text-decoration:none; overflow:hidden;". Now I am using Google Chrome (live by it). I'll try Internet Exploder and see if it works on that... nope similiar (though the formatting looks different on IE7).

Ok, when you click on the "The Emergency Room" banner, it should bring you to this;
=------------------------------------------=
= Emergency Room <-Category Image=
=------------------------------------------=
= Freshwater Emergency Room =
= Marine Emergency Room =
=------------------------------------------=

The image is not transferring over to the subforum when you click on the banner. This also goes for the defined subforums which I have defined pics for as well. This is my final hump I need to find a way over. You are running ProSilver on these examples right?

I am at a loss why it can't call up the pic (catbg_xx) when clicking on it to display the forums underneath, only in that category. Here is a pic of what happens when I click on the "subforum" or "category heading"...

forumlook2.gif

(13.93 KiB) Downloaded 16 times

You can see the initial banner (at top) and what happens when I click on it (below with the Red Arrow pointing to it)

Gary