Forums Displayed as Images

[Dirks]

Hello everyone,

I'm using 4.x.x.

I'm aware that I can insert an image using HTML into a forum's description, but is there a way to overlay the forum title onto the image without having the title listed at the top? I've attached an screen shot in an attempt to explain what I mean. I've seen many phpBB sites that use this style. It would be a nice look for my site. I'm sure its possible in vB with a few template edits, but if you could direct me on where to start it would be greatly appreciated.

Thanks!

[Dr.CustUmz]

should be the forumhome forumbit level 2 post template, just use background images

[Dirks]

I'll run a quick search for that on the site. I'm awful at coding, but if I input anything there, how would the forum know to do multiple backgrounds?

[Dr.CustUmz]

forumbit level 2 post is the display for the forum section, using an image as the background of the table will give you the effect.

to do this on a per forum basis you would need to use the forumid variable (which should be in that template, im not sure on vb4.

but your end result should be along the lines of

<td style="background: url(path/to/image/$forum[forumid].png)">

then you would just name your images what ever the ID of the forum is.

[Dirks]

Thanks man, I’ll give it a try.

[Dirks]

Hey, I just wanted to follow up. I've tried injecting a background image at several points within the template you pointed out w/ no change to the forumhome. I'm trying to figure it out with a single image before I use multiple.

Here is the relevant code, where would I put it?

<li id="forum{vb:raw forum.forumid}" class="forumbit_post {vb:raw forum.statusicon} L2">
	<div class="forumrow table">
		<div class="foruminfo td">
			<img src="{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png" class="forumicon" id="forum_statusicon_{vb:raw forum.forumid}" alt="" />
			<div class="forumdata">
				<div class="datacontainer">
					<div class="titleline">
						<h2 class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2>
						<vb:if condition="$show['browsers']"><span class="viewing">({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
					</div>
					<vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if>

					<vb:if condition="$vboptions['showmoderatorcolumn'] AND $forum['moderators']">
						<div class="moderators">
							<h4>{vb:rawphrase moderators}:</h4>
							<ol class="commalist">
								<vb:each from="forum.moderators" value="row">
									<li><a class="username" href="{vb:link member, {vb:raw row}}">{vb:raw row.musername}</a>{vb:raw row.comma}</li>
								</vb:each>
							</ol>
						</div>
					</vb:if>

					<vb:if condition="$show['subforums']">
						{vb:raw forum.subforums}
					</vb:if>
				</div>
			</div>
		</div>

Thanks in advance.

[Thr33]

I would add it in the CSS of div class="foruminfo td"

Do a search within your styles for this div class.