Create a 3 part tcat strip

Pandemix · #1 24-12-2007, 08:10 PM

In this article, you will learn a very handy CSS and HTML trick that will allow you to split your tcat into 3 parts. This technique is used on images that have rounded corners or non-symmetrical sides.

Go to: Style Manager - Main CSS - Additional CSS Definitions

Place this code in the Additional CSS Definitions spot.

Code:

.tcat_center {
background: url(xx.gif) top left repeat-x;
height: xxpx;
}

.tcat_left {
background: url(xx_left.gif) top left no-repeat;
height: xxpx;
}

.tcat_right {
background: url(xx_right.gif) top right no-repeat;
height: xxpx;
}

.tcat_text {
padding: 10px;
}

You may need to change the padding in tcat_text to match your image.

Go to: Search in Templates - forumhome_forumbit_level1_nopost

Find the first instance of:

Code:

<if condition="$childforumbits">

And add ABOVE:

Code:

<div class="tcat_center"><div class="tcat_left"><div class="tcat_right"><div class="tcat_text">

Now find:

Code:

<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>

And add BELOW:

Code:

</div></div></div></div>

This amazing trick is done with a few simple, DIV's. Pretty cool, isn't it?

Any questions or comments can be posted here. Thank you for reading.

tekguru · #2 27-12-2007, 04:42 PM

Any screenshots so we can see exactly what this achieves?

Pandemix · #3 27-12-2007, 09:23 PM

Look at vBSkinZone, or my forum. The tcat is rounded.

tekguru · #4 28-12-2007, 04:59 PM

Right

Pretty impressive stuff!

Norman · #5 02-01-2008, 12:12 PM

Nice idea! I'll try it.