Need help adding themeCP links to header

**onebuckwild** · Posted: Mon Jul 09, 2007 9:06 am

Well I started with TCD_GameTech and went to town on it. All new colors and a new header. Now with this new header Im trying to add the links via the themeCP since I change the pages around every once and while. I used one of your headers with the theme cp in it to get and ideal of what I was looking to do. I have set the image were I want the links to background. And the header works fine till I add

Code:

class="headmenu1" align="right">
	{G_RIGHTIMAGE} <a href="{T_LINK4URL}">{T_LINK4}</a> | <a href="{T_LINK5URL}">{T_LINK5}</a> &nbsp;

into the image line. Instead of putting it over the image, It puts it under the image. I added the header.html as an attachment and the header is up on nocturnalbreak.com so you can see what im getting.
Thanks for you help as always.

**onebuckwild** · Posted: Mon Jul 09, 2007 9:10 am

Not sure if that attachment is there. so here it is

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{S_TEXTDIR}" lang="{S_LANGCODE}">
<head>
{S_HEADER_TAGS}
<link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/{CSS_FILE}.css" />
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<!-- IF S_ADMIN_MENU -->
<div id="adminmenu"></div>
<script language="JavaScript" type="text/javascript"><!--
{S_ADMIN_MENU}
cmDraw ('adminmenu', adminMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
--></script>
<!-- ELSE -->
<!-- ImageReady Slices (NEW HEADER4.psd) -->
<table id="Table_01" width="100%" height="258" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td Background="themes/obw/images/NEW-HEADER4_01_01.gif" width="404" height="65" alt=""><CENTER>{S_BANNER}</CENTER></td>
		<td rowspan="9" background="themes/obw/images/NEW-HEADER4_02.gif" width="100%" height="258" alt=""></td>
		<td colspan="3">
			<img src="themes/obw/images/NEW-HEADER4_03_01.gif" width="403" height="65" alt=""></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="65" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="themes/obw/images/NEW-HEADER4_01_02.gif" width="404" height="158" alt=""></td>
		<td rowspan="7">
			<img src="themes/obw/images/NEW-HEADER4_03_02_01.gif" width="225" height="160" alt=""></td>
		<td>
			<img src="themes/obw/images/NEW-HEADER4_03_02_02_01.gif" width="146" height="25" alt=""></td>
		<td rowspan="7">
			<img src="themes/obw/images/NEW-HEADER4_03_02_03.gif" width="32" height="160" alt=""></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="themes/obw/images/NEW-HEADER4_03_02_02_02.gif" width="146" height="27" alt=""></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td background="themes/obw/images/NEW-HEADER4_03_02_02_03.gif" width="146" height="27" alt=""><font color= "#ff9900"><b>{S_DATE}</b></font></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td background="themes/obw/images/NEW-HEADER4_03_02_02_04.gif" width="146" height="27" alt=""><font color= "#ff9900"><b>{U_WELCOME}</font></b></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td background="themes/obw/images/NEW-HEADER4_03_02_02_05.gif" width="146" height="27" alt=""><font color= "#ff9900"><b>{U_PM_NUM} new messages</font></b></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="themes/obw/images/NEW-HEADER4_03_02_02_06.gif" width="146" height="27" alt=""></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td background rowspan="2">
			<img src="themes/obw/images/NEW-HEADER4_01_03.gif" width="404" height="35" class="headmenu1" align="left">
	{G_LEFTIMAGE} &nbsp; <a href="{T_LINK1URL}">{T_LINK1}</a> | <a href="{T_LINK2URL}">{T_LINK2}</a> | <a href="{T_LINK3URL}">{T_LINK3}</a>
		</td>
		<td background="themes/obw/images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td background colspan="3">
			<img src="themes/obw/images/NEW-HEADER4_03_03.gif" width="403" height="33" alt="" class="headmenu1" align="right">
	{G_RIGHTIMAGE} <a href="{T_LINK4URL}">{T_LINK4}</a> | <a href="{T_LINK5URL}">{T_LINK5}</a> &nbsp;</td>
		<td background="themes/obw/images/spacer.gif" width="1" height="33" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->



<!-- IF PUBLIC_HEADER -->
  <tr><td></td></tr>
<!-- ENDIF -->
</td></tr></table>
<!-- ENDIF -->
<table class="maintable"><tr>
<!-- IF S_LEFTBLOCKS -->
  <td class="mainside" id="pe600" {B_L_VISIBLE}>
  <!-- BEGIN leftblock -->
  <div class="blockhead">
    <img align="right" alt="Toggle Content" title="Toggle Content" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer" />
    {leftblock.S_TITLE}
  </div>
  <div class="blockcontent" id="pe{leftblock.S_BID}" {leftblock.S_VISIBLE}>
      {leftblock.S_CONTENT}
  </div>
  <img src="{THEME_PATH}/images/blockdown.jpg">
  <!-- END leftblock -->
  </td>
<!-- ENDIF -->
<td class="main">
<!-- IF IMPORTANT_MESSAGE -->
<center><span style="font-size: 12px; color: #FF0000">{IMPORTANT_MESSAGE}</span></center><br />
<!-- ENDIF -->
<!-- IF PAGE_TITLE -->
<div class="pagetitle">{PAGE_TITLE}</div>
<!-- ENDIF -->
<!-- BEGIN messageblock -->
<font size="3"><div class="pagetitle">{messageblock.S_TITLE}</div></font>
<div class="table1">
  <div class="content" >{messageblock.S_CONTENT}</div><br /><div align="center">
  <!-- IF S_CAN_ADMIN -->
  [ {messageblock.S_OUTPUT} - {messageblock.S_REMAIN} - <a href="{messageblock.U_EDITMSG}">{messageblock.S_EDIT}</a> ]
  <!-- ELSE -->
  {messageblock.S_DATE}
  <!-- ENDIF -->
  </div>
</div><br/>
<!-- END messageblock -->
<!-- BEGIN centerblock -->
<font size="3"><div class="pagetitle">{centerblock.S_TITLE}</div></font>
<div class="table1">{centerblock.S_CONTENT}</div>
<br />
<!-- END centerblock -->

**Devon** · Posted: Mon Jul 09, 2007 6:35 pm

<td background colspan="3" src="themes/obw/images/NEW-HEADER4_03_03.gif" width="403" height="33...

**onebuckwild** · Posted: Mon Jul 09, 2007 8:55 pm

Ok I added the colspan and figured out what that was. Also added the row span and that got the font were I wanted them, but it hides the image that is lays over. here is were im at now and its visable as this on nocturnalbreak.com

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{S_TEXTDIR}" lang="{S_LANGCODE}">
<head>
{S_HEADER_TAGS}
<link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/{CSS_FILE}.css" />
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<!-- IF S_ADMIN_MENU -->
<div id="adminmenu"></div>
<script language="JavaScript" type="text/javascript"><!--
{S_ADMIN_MENU}
cmDraw ('adminmenu', adminMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
--></script>
<!-- ELSE -->
<!-- ImageReady Slices (NEW HEADER4.psd) -->
<table id="Table_01" width="100%" height="258" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td Background="themes/obw/images/NEW-HEADER4_01_01.gif" width="404" height="65" alt=""><CENTER>{S_BANNER}</CENTER></td>
		<td rowspan="9" background="themes/obw/images/NEW-HEADER4_02.gif" width="100%" height="258" alt=""></td>
		<td colspan="3">
			<img src="themes/obw/images/NEW-HEADER4_03_01.gif" width="403" height="65" alt=""></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="65" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="themes/obw/images/NEW-HEADER4_01_02.gif" width="404" height="158" alt=""></td>
		<td rowspan="7">
			<img src="themes/obw/images/NEW-HEADER4_03_02_01.gif" width="225" height="160" alt=""></td>
		<td>
			<img src="themes/obw/images/NEW-HEADER4_03_02_02_01.gif" width="146" height="25" alt=""></td>
		<td rowspan="7">
			<img src="themes/obw/images/NEW-HEADER4_03_02_03.gif" width="32" height="160" alt=""></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="themes/obw/images/NEW-HEADER4_03_02_02_02.gif" width="146" height="27" alt=""></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td background="themes/obw/images/NEW-HEADER4_03_02_02_03.gif" width="146" height="27" alt=""><font color= "#ff9900"><b>{S_DATE}</b></font></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td background="themes/obw/images/NEW-HEADER4_03_02_02_04.gif" width="146" height="27" alt=""><font color= "#ff9900"><b>{U_WELCOME}</font></b></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td background="themes/obw/images/NEW-HEADER4_03_02_02_05.gif" width="146" height="27" alt=""><font color= "#ff9900"><b>{U_PM_NUM} new messages</font></b></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="themes/obw/images/NEW-HEADER4_03_02_02_06.gif" width="146" height="27" alt=""></td>
		<td background="themes/obw/images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td background colspan="1" rowspan="8" src="themes/obw/images/NEW-HEADER4_01_03.gif" width="404" height="35" class="headmenu1" align="left">
	{G_LEFTIMAGE} &nbsp; <a href="{T_LINK1URL}">{T_LINK1}</a> | <a href="{T_LINK2URL}">{T_LINK2}</a> | <a href="{T_LINK3URL}">{T_LINK3}</a>
		</td>
		<td background src="themes/obw/images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td background colspan="4" rowspan="8" src="themes/obw/images/NEW-HEADER4_03_03.gif" width="403" height="33 alt="" class="headmenu1" align="right">
	{G_RIGHTIMAGE} <a href="{T_LINK4URL}">{T_LINK4}</a> | <a href="{T_LINK5URL}">{T_LINK5}</a> &nbsp;</td>
		
	</tr>
</table>
<!-- End ImageReady Slices -->



<!-- IF PUBLIC_HEADER -->
  <tr><td></td></tr>
<!-- ENDIF -->
</td></tr></table>
<!-- ENDIF -->
<table class="maintable"><tr>
<!-- IF S_LEFTBLOCKS -->
  <td class="mainside" id="pe600" {B_L_VISIBLE}>
  <!-- BEGIN leftblock -->
  <div class="blockhead">
    <img align="right" alt="Toggle Content" title="Toggle Content" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer" />
    {leftblock.S_TITLE}
  </div>
  <div class="blockcontent" id="pe{leftblock.S_BID}" {leftblock.S_VISIBLE}>
      {leftblock.S_CONTENT}
  </div>
  <img src="{THEME_PATH}/images/blockdown.jpg">
  <!-- END leftblock -->
  </td>
<!-- ENDIF -->
<td class="main">
<!-- IF IMPORTANT_MESSAGE -->
<center><span style="font-size: 12px; color: #FF0000">{IMPORTANT_MESSAGE}</span></center><br />
<!-- ENDIF -->
<!-- IF PAGE_TITLE -->
<div class="pagetitle">{PAGE_TITLE}</div>
<!-- ENDIF -->
<!-- BEGIN messageblock -->
<font size="3"><div class="pagetitle">{messageblock.S_TITLE}</div></font>
<div class="table1">
  <div class="content" >{messageblock.S_CONTENT}</div><br /><div align="center">
  <!-- IF S_CAN_ADMIN -->
  [ {messageblock.S_OUTPUT} - {messageblock.S_REMAIN} - <a href="{messageblock.U_EDITMSG}">{messageblock.S_EDIT}</a> ]
  <!-- ELSE -->
  {messageblock.S_DATE}
  <!-- ENDIF -->
  </div>
</div><br/>
<!-- END messageblock -->
<!-- BEGIN centerblock -->
<font size="3"><div class="pagetitle">{centerblock.S_TITLE}</div></font>
<div class="table1">{centerblock.S_CONTENT}</div>
<br />
<!-- END centerblock -->

**Devon** · Posted: Mon Jul 09, 2007 9:36 pm

whoops i'm sorry it should be <td colspan="3" background="themes/obw/images/NEW-HEADER4_03_03.gif" width="403" height="33...

instead of having <td><img src=""> it should be <td background=""> that will put the image in the background allowing you to put text or whatever on top.

mind you that it's not the xhtml compliant way to do it. if you want to be compliant then you should use css. add a class like

.header03{
background: url(../images/NEW-HEADER4_03_03.gif);
width:403px;
height: 33px;
}

and call it with <td class="header03">

**onebuckwild** · Posted: Tue Jul 10, 2007 7:00 am

That got it, thanks alot. Ill have to start working on the xhtml compliant.

**Devon** · Posted: Fri Jul 13, 2007 8:01 am

I have a video tutorial on xhtml compliance for DragonflyCMS. Wink

**onebuckwild** · Posted: Fri Jul 13, 2007 8:11 am

cool Ill check that out Very Happy