Three Piece Maintitle

This code is used on InvisionFree to allow the use of fancy main title images on a fluid design. The code allows three smaller images to be used instead of one large image, which may cause visual issues when pages are stretched.

I plan to up-date this code to utilise the power of jQuery. It may or may not work, but at least I can try.

Footer:

Add the following code into the area for content below the board, making sure it's at the bottom:

<script type='text/javascript'> <!-- // Three Piece Main Title v2 // Created by Tony, of Zathyus Support e = document.getElementsByTagName('DIV') g = document.getElementsByTagName('TD') dv = [] i = 0 for (n = 0; n < e.length; n++) if (e[n].className == 'maintitle' && e[n].parentNode.id != 'ucpmenu') dv[i++] = e[n] for (n = 0; n < g.length; n++) if (g[n].className == 'maintitle' && g[n].parentNode.id != 'ucpmenu') dv[i++] = g[n] for (n = 0; n < i; n++) { s = dv[n].innerHTML dv[n].innerHTML = "<div class='maintitlel'><div class='maintitler'><div class='maintitlec'>" + s + '</div></div></div></div>' } --> </script>

Next, you will need to edit your style sheet to reference the new images and give them some style. You can edit the height; margin; and padding to suit your images.

.maintitle { background: url('URI TO YOUR REPEATING IMAGE') top repeat-x; text-align: left; vertical-align: middle; white-space: nowrap; margin: 1px 1px 0; padding: 0; height: 27px; } .maintitlel { background: url('URI TO YOUR LEFT IMAGE') top left no-repeat; height: 27px; } .maintitler { background: url('URI TO YOUR RIGHT IMAGE') top right no-repeat; height: 27px; } .maintitlec { padding: 7px 0 0 49px; }

If you get stuck, pop into the forums Support System and start a ticket. Or if you like, head over to Zathyus Support.