Intergrating Xara code into back end script?

**ChrisBro** · 17 February 2010, 11:04 AM

Hello All

I think this is in the right place if not please excuse me and move to wherever it should be

I am trying to intergrate my site header and footer created in Xara Xtreme Pro 5 into a back end web hosting script (WHMCS), having a bit of trouble, here is what I have done so far:

On a new page in XXP5 I have pasted my header and navbar exported it then opened the generated html in Expression Web 3, not made any changes here at all just copied it into the header.tl fil in WHMCS where I "think" it should go, uploaded the file to the relevant place, and also the header_htm_files to root of the install.

THe header and nav bar are displaying perfectly but in the complete wrong place actually in the middle of the page, also it has disabled all of the WHMCS internal links, I have studied the code now since 7am lol now have a migrane and blurred vision, it must be something simple but just cant see it.

The link to the page I am talking about is:

Code:

http://clientarea.99quidwebsites.co.uk/index.php

Could some of your more knowledgable people have a look and tell me what I have done wrong? Pretty please?

It is now driving me insane and I could kick myself because I should know how to fix this I just cant see the problem.

As usual thanks in advance for any help

WHMCS support have offered to fix it for $37 ro something which is fine but I really want to know where I have gone wrong I should know, paying them to fix it isn't going to solve anything apart from making it show correctly..........

Thanks in advance

Chris

**ChrisBro** · 18 February 2010, 07:53 AM

Can anyone help me with this? Otherwise I am going to have to really simplify my header to just a static jpg losing my navbar and all other functionality which I really dont want to do

Even the folks on the WHMCS forum cant offer an answer

Thanks in advance

Chris

**steve.ledger** · 18 February 2010, 08:13 AM

All I can think of it that you are injecting Xara exported DIV's with their positioning co-ords into a WHMCS html template file (header.tl) which has positioning tags of it's own and thus a muddle of code is the result.

I know that member Rabbie uses WHMCS, perhaps he might spot this thread.

**ChrisBro** · 18 February 2010, 08:50 AM

Originally Posted by sledger

All I can think of it that you are injecting Xara exported DIV's with their positioning co-ords into a WHMCS html template file (header.tl) which has positioning tags of it's own and thus a muddle of code is the result.

I know that member Rabbie uses WHMCS, perhaps he might spot this thread.

Hi Sledger

Thanks for coiming in on thisw one, that does seem to be the issue someone on the WHMCS forum just got back with this as well:

You need to make sure that you are putting the header content in the header.tpl which is located in /templates/portal/.

Anyway, you seem to be doing right, however the problem is in your HTML. After having a little look on your website, I noticed that you use height etc.

You should never use height or top etc, then it's pretty obvious why it's in the middle of the control panel. Remove those and you'll have it working.

Off to timker now if Rabbie does see this and want to chime in please feel free

Thanks again Sledger

Chris

**steve.ledger** · 18 February 2010, 10:39 AM

I think what has happened is that when you created the banner/navbar in Xtreme - you just drew it on the page anywhere thinking that once you exported it to HTML you could just plant that block of code into the header.tpl under the <body> and it would work.
Problem is, Xara will write the positioning CSS relative to the position on the page in Xtreme where you created it. So all the positioning CSS for each img is relative to the original Xara page position of your wysiwyg work which appears to start at about 150 pixels from the top of the page..
(By the way, you also introduced a second <body tag - which is wrong to do)

Example:
<img class="xr_ap" src="header_htm_files/0.png" alt="" style="left: 5px; top: 151px; width: 753px; height: 147px;"/>
<a href="header.htm" onclick="return(xr_nn());">
<img class="xr_ap" src="header_htm_files/1.png" alt="" style="left: 588px; top: 153px; width: 169px; height: 113px; " onmousemove="xr_mo(this,0)"/>
</a>
<a href="header.htm" id="Repeating:58ReflectionsHnavbar1" onclick="return(xr_nn());">
<img class="xr_ap" src="header_htm_files/2.png" alt="" style="left: 113px; top: 266px; width: 108px; height: 30px; " onmousemove="xr_mo(this,0)"/>
</a>
<a href="header.htm" onclick="return(xr_nn());">
<img class="xr_ap" src="header_htm_files/3.png" alt="" style="left: 6px; top: 266px; width: 108px; height: 30px; " onmousemove="xr_mo(this,0)"/>
</a>
<a href="header.htm" onclick="return(xr_nn());">
<img class="xr_ap" src="header_htm_files/4.png" alt="" style="left: 648px; top: 266px; width: 108px; height: 30px; " onmousemove="xr_mo(this,0)"/>

....and so on.

**rabbie** · 18 February 2010, 10:45 AM

Hi Chris,

I had a look at the source code for your site which probably wont show much as the actual code is rendered into html to be displayed on the page (obviously).

Anyhoo, here are some things that I think could be wrong:

You have the following:

But it should be:

</head>
<body>
<link rel="stylesheet" type="text/css" href="header_htm_files/default.css" />

Also,

Your http://clientarea.99quidwebsites.co....es/default.css has:

.xr_tl {position: absolute; white-space: pre; unicode-bidi:bidi-override;}
.xr_ap {position: absolute; border:none;}

Which is the Xara positioning I think sledger is refering to.

To be completely honest, it may be worth the $37 to WHMCS to fix it up because the alternative is to manually correct the template:

<table class="topnavbar"><tr class="topnavbar"><td><a href="index.php">{$LANG.globalsystemname}</a></td><td><a href="clientarea.php">{$LANG.clientareatitle}</a></td><td><a href="announcements.php">{$LANG.announcementstitle }</a></td><td><a href="knowledgebase.php">{$LANG.knowledgebasetitle }</a></td><td><a href="supporttickets.php">{$LANG.supportticketspag etitle}</a></td><td><a href="downloads.php">{$LANG.downloadstitle}</a></td>{if $loggedin}<td><a href="logout.php">{$LANG.logouttitle}</a></td>{/if}</tr></table>

and enter everything manually (without using Xara).

There have been many changes made to the template but not in the right way basically.

Sorry Chris I honestly wish I could help more but the best advice I can give would be to start from the template and then work your way up manually, change by change.

**steve.ledger** · 18 February 2010, 11:03 AM

Chris I made the changes to your source code in Opera, which I can use to reload your page working from the browserscache.

Click image for larger version.

Name: fixed.png
Views: 195
Size: 197.3 KB
ID: 69909

The entire source with my changes is attached in the txt file.

A video showing the links and rollover buttons working.

► DOWNLOAD VIDEO

I still think it best you start off right as mentioned in my previous post.

**ChrisBro** · 18 February 2010, 02:18 PM

Sledger

What can I say apart from you are the man and thanks so much for figuring this out for me really I appreciate it loads have spent another day messing with this and had just about lost the will to live when I checked here and seen your fantastic work on this WOW is all I can say and of course I really appreciate your time and energy in helping me with this, needless to say if there is ever anything I can do for you just let me know

I have uploaded your code from the text file and indeed everything in the header is now where it should be with mouse overs and everything all working I am so pleased, I haven't felt quite so useless as I did this afternoon for a long time and you have made me smile

1 last problem then this intergration is finally done, on your video it displays perfect but in my live environment I can now see 2 lots of page contents, looking at it in Firefox the 1st part of the content none of the links work but in the 2nd part underneath it, it is all perfect also if you click on say server status you can still see the 2 columns of links that shouldn't be there then the actual server status page content is below this so my last question is how can I remove the 1st lot of content but leave the second that should be there, sorry haven't explained that very well if you dont mind have a look and you will see ehat I mean:

Code:

http://clientarea.99quidwebsites.co.uk

Once agin thanks thanks thanks thanks you are a star and 1 of the many reasons why I love this forum

Chris

**ChrisBro** · 18 February 2010, 02:21 PM

Originally Posted by rabbie

Hi Chris,

I had a look at the source code for your site which probably wont show much as the actual code is rendered into html to be displayed on the page (obviously).

Anyhoo, here are some things that I think could be wrong:

You have the following:

But it should be:

Also,

Your http://clientarea.99quidwebsites.co....es/default.css has:

Which is the Xara positioning I think sledger is refering to.

To be completely honest, it may be worth the $37 to WHMCS to fix it up because the alternative is to manually correct the template:

and enter everything manually (without using Xara).

There have been many changes made to the template but not in the right way basically.

Sorry Chris I honestly wish I could help more but the best advice I can give would be to start from the template and then work your way up manually, change by change.

Hi Rabbie

Thanks for chiming in on this I appreciate it, this has been driving me mad like you wouldn't believe and the WHMCS forum have been less than helpful TBH they are usually quite good but not on this occassion.

I appreciate your input

thanks again

Chris

**ChrisBro** · 18 February 2010, 03:37 PM

Hello

UPDATE

Ok have got it displaying 1 lot of php generated content by taking your html for the header and my navbar and copying it into the .tpl file so it no looks like this:

(had to include attatchment code to long for post)

In ff it has lost the WHMCS navbar and none of the WHMCS links work in IE it has lost the WHMCS nav bar BUT the WHMCS link all work.

This is the closest I have got so really grateful any ideas on how to solve this last part of the problem?

Really need to brush up on my raw html skill this has been a nightmare thank god its my own use and not for a client.

Thanks again

Chris