How to add a "Catagory" graphic? [RESOLVED]

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Locked
K2-Kelly
Registered User
Posts: 83
Joined: Thu Feb 14, 2008 5:38 am
Location: U.S./Jamaica W.I.

How to add a "Catagory" graphic? [RESOLVED]

Post by K2-Kelly »

Hi all;

I'm wanting to add a catagory graphic, IOW, a picture where the catagory title is that spans the width of the forum.......I discovered where in the stylesheet.css I add the "cat-mid.gif", it reading like this

Code: Select all

.cat-head {
        background: url('./images/cat-mid.gif') repeat-x;
	overflow: hidden;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	height: 45px !important;
	text-align: center;
and found a style that utilized a catagory header graphic as follows this the "forumlist_body.html"

Code: Select all

<table class="tablebg" cellspacing="0" 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>
<!-- BEGIN forumrow -->
	<!-- IF forumrow.S_IS_CAT -->
	<tr>
           <td width="100%" colspan="5">
               <table cellpadding="0" cellspacing="0" border="0">
                   <tr>
                       <td align="left" class="cat-head"><img src="{T_THEME_PATH}/images/cat-left.gif" width="600" height="45" border="0" alt="" /></td>
                       <td class="cat-head" width="100%" align="center"><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a></td>
                       <td align="right" class="cat-head"><img src="{T_THEME_PATH}/images/cat-right.gif" width="45" height="45" border="0" alt="" /></td>
                   </tr>
               </table>
           </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>
	<!-- 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>
                        <td class="row4" height="26" colspan="5">&nbsp;</td>
                </tr>
		</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>
		<tr>
                        <td class="row4" height="26" colspan="5">&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 -->
					<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}
						<a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a>
					</p>
				<!-- ELSE -->
					<p class="topicdetails">{L_NO_POSTS}</p>
				<!-- ENDIF -->
			</td>
		</tr>
		<tr>
                        <td class="row4" height="26" colspan="5">&nbsp;</td>
                </tr>
	<!-- ENDIF -->
<!-- BEGINELSE -->
	<tr>
		<td class="row1" colspan="5" align="center"><p class="gensmall">{L_NO_FORUMS}</p></td>
	</tr>
<!-- END forumrow -->
</table>

Now my question is, considering the above, how do I alter my current "forumlist_body.html" to add catagory header graphics without upsetting everything else, here is my current fl_b.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>
					<!-- 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> {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>

			<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 -->
Thanks for your help,
K2
Last edited by K2-Kelly on Sat Apr 05, 2008 3:43 am, edited 1 time in total.

K2-Kelly
Registered User
Posts: 83
Joined: Thu Feb 14, 2008 5:38 am
Location: U.S./Jamaica W.I.

Re: How to add a "Catagory" graphic? Help Please...

Post by K2-Kelly »

bump, help please....

K2

User avatar
bagheadinc
Registered User
Posts: 174
Joined: Sun Feb 03, 2008 5:17 pm
Location: Fruitland, MD
Contact:

Re: How to add a "Catagory" graphic? Help Please...

Post by bagheadinc »

From the looks of your forumlist_body.html, you're using a prosilver based style. If so, you can just edit bg_list.gif which is in your theme/images/ folder.
"Well-timed silence hath more eloquence than speech." - Martin Fraquhar Tupper

K2-Kelly
Registered User
Posts: 83
Joined: Thu Feb 14, 2008 5:38 am
Location: U.S./Jamaica W.I.

Re: How to add a "Catagory" graphic? Help Please...

Post by K2-Kelly »

Sadly that doesn't work.....The vertical positioning is off, and the width dependant upon screen resolution will cause a second to show as you can see here http://78sentai.org/forum/ .

Now I've made a cat_left.gif, cat_mid.gif, and cat_right.gif using another theme as an example....The trouble is I've tried inseting the code from his forumlist_body.html, yet it was all screwed up at first not showing, then once it worked goofing up the whole page....So I need to figure out how to add those elements without screwing up the layout.

L2

K2-Kelly
Registered User
Posts: 83
Joined: Thu Feb 14, 2008 5:38 am
Location: U.S./Jamaica W.I.

Re: How to add a "Catagory" graphic? Help Please...

Post by K2-Kelly »

Help Please?

K2

K2-Kelly
Registered User
Posts: 83
Joined: Thu Feb 14, 2008 5:38 am
Location: U.S./Jamaica W.I.

Re: How to add a "Catagory" graphic? Help Please...

Post by K2-Kelly »

bagheadinc wrote:From the looks of your forumlist_body.html, you're using a prosilver based style. If so, you can just edit bg_list.gif which is in your theme/images/ folder.

btw......you were right and figured a way around the width issue, the vertical simply a matter of padding....Thanks for the help!

(though sadly you can't see it as I did something unknown to kill my forum :( )

K2

Locked

Return to “[3.0.x] Styles Support & Discussion”