[INFO] Need Help with stylesheets for new tickets page

[TroubleTicketUser4499]

As we all know, at least for the newticket page (ttx.cgi), the pages are composed of a header, footer, and a body page.  Now, I made my own stylesheet and put the link into each file -- header.shtml, footer.shtml, and newticket.html.  The distinctness of the stylesheet is a blue background, and each component, when loaded separately, conforms to the stylesheet I specified.  That is, loading newticket.html in the browser reflects the stylesheet I created.  HOWEVER, When I load ttx.cgi, which joins all three pages before loading it into the browser, the background is white and any pictures that I may have included are loaded with the dreaded "x" image.  Why?  That's what'd like I to know.  It has something to do with the ttx.cgi file, one would gather, but I'm not sure how to fix it.  Any suggestions?

Thank you.

[Sparky]

It has nothing to do with the ttx.cgi file.  ttx.cgi is the main TTX program.  Broken links are caused by bad paths.

Please be more specific about what you've done.

It's not necessary to put the CSS link in the header, footer, and template body.  Since all three get put together to make one page when loaded in the browser, just putting the link to the CSS sheet in the header would be enough.

As far as broken image links, I suspect that the link to your stylesheet is not working either.

Please post step by step what you have done so we can help you.

[Sparky]

Also, ttx.cgi is nothing specific to the New Ticket page....  it's the core program of TTX.  All the pm modules, including the one that makes the new ticket page, are used by TTX (ttx.cgi) as needed.

... the New Ticket page is no different than any other page in TTX, functions (and pages) are called by commands in the URL query string and composed by ttx.cgi using the required pm modules and corresponding templates.

/ttx.cgi?cmd=newticket

calls up the new ticket page.

and

/ttx.cgi?cmd=helpdesk

calls up the main ticket list page.

... as only two examples.

[TroubleTicketUser4499]

Thanks.

Okay, nothing to do with ttx.cgi then...

The reason I copied the stylesheet into all three was precisely because the page was not loading correctly.  I originally had the css link in just the header template file.  

Here's essentially what I did:

I used the program, MS FrontPage, to modify the html templates.  First, I created a folder (StyleSheets) inside the template folder.  In this folder, I created a stylesheet (Default.css).  Inside the Stylesheets folder, I created another folder (Images).  Inside the Images folder, I copied all the gifs Default.css will require.  

Then in each file -- header.shtml, footer.shtml, and newticket.html -- I copied the following link:

<link href="./StyleSheets/Default.css" type="text/css" rel="stylesheet">

Within FrontPage, I could directly see the changes as they happen.  That is, copying the stylesheet link and saving, say, newticket.html caused the background to change to blue.  So, Frontpage sees this change just fine.  Then I load the template file into the browser and it's also blue.  Even the gifs load correctly!  All three pages work fine by themselves.

[Sparky]

I used the program, MS FrontPage, to modify the html templates.

That's your first problem.  Read the sticky threads about using HTML editors.

Item #2...

http://forum.unitedwebcoders.com/index.php/topic,596.msg3284.html#msg3284

First, I created a folder (StyleSheets) inside the template folder.  In this folder, I created a stylesheet (Default.css).  Inside the Stylesheets folder, I created another folder (Images).  Inside the Images folder, I copied all the gifs Default.css will require.  

That's good.

Then in each file -- header.shtml, footer.shtml, and newticket.html -- I copied the following link:

<link href="./StyleSheets/Default.css" type="text/css" rel="stylesheet">

Thanks to FrontPage, your paths are totally wrong.

For the CSS...

"templates/StyleSheets/Default.css"

For your images...

"templates/StyleSheets/Images/my_Gif_File.gif"

Within FrontPage, I could directly see the changes as they happen.  That is, copying the stylesheet link and saving, say, newticket.html caused the background to change to blue.  So, Frontpage sees this change just fine.  Then I load the template file into the browser and it's also blue.  Even the gifs load correctly!  All three pages work fine by themselves.

This is your major problem.  These are templates, just pieces of pages, NOT complete pages by themselves, so you can't expect FrontPage or a browser to know how to properly handle these.

Changing the TTX templates requires a working knowledge of editing HTML by hand.  HTML editors like Frontpage take it upon themselves to "fix" what they think is broken HTML in the templates.  By "fix", I really mean "break".  I strongly recommend starting over with fresh templates and applying your edits with Notepad or something similar.  Read the sticky thread too.

[TroubleTicketUser4499]

I'll the read the sticky, thanks.

This is your major problem.  These are templates, just pieces of pages, NOT complete pages by themselves, so you can't expect FrontPage or a browser to know how to properly handle these.

I understand that, but the thing is they DID know how to properly handle the pages separately.  Otherwise, the browser would've loaded, say, header.shtml without the changes I implemented (i.e. the page background would not be the color blue).  At least, that's my estimation of working correctly.  Maybe I misunderstand your point...

And I guess on that note, changing the link by prepending templates/ fixed it.  Thank you. Contrary to your point, FrontPage did not make any changes or try to fix anything.  I edited the html directly -- it just happened to be within FrontPage.

Now this may have to do with your previous point; what I don't understand is why does the complete page work, yet the three separate files do not.  I loaded the three templates separately into the browser and the backgrounds are white (instead of blue).  I'm assuming this may have something to do with the browser not handling them properly.  If that's the case, I'd like to know why.  Is there no way to ensure both the full page the separate components of the page load correctly?

Lastly, why would prepending templates/ fix it?  It seems like the link is being defined from the TroubleTicket folder.  I've always defined links relative to the location of the file in which it's included in other projects and never had these problems.  For example, the relative address of the stylesheet to newticket.html is ./StyleSheets/Default.css.  It appears all files are relative to the TroubleTicket folder; is there a way to change this?

Thank you again.

[Sparky]

I'll the read the sticky, thanks.

This is your major problem.  These are templates, just pieces of pages, NOT complete pages by themselves, so you can't expect FrontPage or a browser to know how to properly handle these.

I understand that, but the thing is they DID know how to properly handle the pages separately.  Otherwise, the browser would've loaded, say, header.shtml without the changes I implemented (i.e. the page background would not be the color blue).  At least, that's my estimation of working correctly.  Maybe I misunderstand your point...

A browser will load anything you put into it... it doesn't care how bad your HTML is balled up, it will just load it up and interpret it the best it can.

And I guess on that note, changing the link by prepending templates/ fixed it.  Thank you.

Sure.

Contrary to your point, FrontPage did not make any changes or try to fix anything.  I edited the html directly -- it just happened to be within FrontPage.

Then you did it correctly.  When composing in WYSIWYG mode though, you could get into troubles with FrontPage editing things on it's own.

Now this may have to do with your previous point; what I don't understand is why does the complete page work, yet the three separate files do not.  I loaded the three templates separately into the browser and the backgrounds are white (instead of blue).  I'm assuming this may have something to do with the browser not handling them properly.  If that's the case, I'd like to know why.

No, the browser did what it was supposed to do.

Look at the URL when you are using TTX in your browser.  You are doing everything relative to the location of the ttx.cgi program which is NOT inside the templates directory.

When you load the template in the browser, the path is relative to the file's location on your hard drive.

When TTX loads (writes) the page, the dynamic page only exists in the browser (no tangible file anywhere), and according to the browser's URL, it's located in the same place as TTX (ttx.cgi).

Is there no way to ensure both the full page the separate components of the page load correctly?

not sure what you're getting at here.  Everything works correctly.  If you really wanted to see something similar to the final page you'd have to manually put the HTML together from the templates in a single test file and preview it.  Occasionally, it's necessary and there's no other way unless you are really good at programming/visualizing HTML by hand.

Lastly, why would prepending templates/ fix it?  It seems like the link is being defined from the TroubleTicket folder.  I've always defined links relative to the location of the file in which it's included in other projects and never had these problems.

You've probably always programmed pages from real HTML files that actually load in the browser... these templates never load in the browser... these pages are not real... they are dynamically written by a PERL program before being loaded in the browser.

For example, the relative address of the stylesheet to newticket.html is ./StyleSheets/Default.css.  It appears all files are relative to the TroubleTicket folder; is there a way to change this?

You can't change it and there's no point in changing it.  That's because the final working page you see in your browser is composed "dynamically" by TTX which resides in a different location.  All paths must be relative to the location of ttx.cgi and NOT the location of the templates.

This is quite standard for template-based CGI/Perl/PHP/etc. programs. 

[TroubleTicketUser4499]

OHH!  I understand now.  It makes perfect sense!  It's similar to SSI, then, b/c the three pages are being built into one before it's sent out to the browser. 

I'm reading the sticky...some interesting things in there like integrating php.  Anyway, that is another time for another thread.  The one thing I did want to ask -- and I'm not that familar with perl -- I've seen some other perl macros in html document with %variable.  In TroubleTicket, it's %variable%.  What's the difference?  Why enclose the variable with %?  Is the % symbol THE method of including perl variables within html documents?  I've done php pages where {variable} was enclosed within the html.  In perl, it appears to be different.  Again, maybe I should start another thread for this topic. 

Nontheless, I understand now why the page works.  Thank you very much.

[Sparky]

Those are macros, not variables.

%MACRO%

This is where the program replaces the macro with some things... it could be anything in HTML.

The entire ticket list HTML comes through in a single macro on the helpdesk template.

You can't just throw something from Perl between %% signs on an HTML page...   Alex programmed these TTX macros to look and function like that within the context of the TTX templates.

[ati]

I wasn't sure whether to create a new thread or resurrect this old one http://forum.unitedwebcoders.com/index.php/topic,669.0.html since it describes exactly what I am trying to do. Like the original poster I am trying to customize the way a newticket page looks like. I am using my own stylesheet file (mystylesheet1.css) and some background images.

It seems that I am having the same problem the original poster was having, namely incorrect path for the css file and the images.

The original poster added a link to his css file into the header.shtml file <link href="template/StyleSheets/Default.css" type="text/css" rel="stylesheet">

If I understand correctly "All paths must be relative to the location of ttx.cgi" as Sparky mentioned in that thread. So how come the reference to the css file is "templates/StyleSheets/Default.css"? shouldn't it be "datadir/templates/StyleSheets/Default.css" since the ttx.cgi file resides in "www/cgi-bin/tkt" and the css file resides in "www/datadir/templates/StyleSheets". The "templates" folder does not exist in the "tkt" folder where the ttx.cgi resides. Am I missing something?

Thanks


Edit by Sparky:  Please observe forum posting rules, thread title format.

[Sparky]

If I understand correctly "All paths must be relative to the location of ttx.cgi" as Sparky mentioned in that thread. So how come the reference to the css file is "templates/StyleSheets/Default.css"? shouldn't it be "datadir/templates/StyleSheets/Default.css" since the ttx.cgi file resides in "www/cgi-bin/tkt" and the css file resides in "www/datadir/templates/StyleSheets". The "templates" folder does not exist in the "tkt" folder where the ttx.cgi resides. Am I missing something?

It just depends on where you put everything.

My installation contains everything in one directory called "ttx" and a subdirectory called "templates".  On my server I am not required to place the cgi/perl files in the cgi directory.  Everything is in "ttx"

www/ttx/templates
www/ttx/ttx.cgi

Your custom stylesheet URL paths must be written so that wherever ttx.cgi is located it can find them from that location.

[Sparky]

On second thought, I'm going to merge these into the old thread....

[ati]

It just depends on where you put everything.
Your custom stylesheet URL paths must be written so that wherever ttx.cgi is located it can find them from that location.

OK, that makes sense.

My directory structure is as follows:
www/cgi-bin/tkt/ttx.cgi
www/datadir/templates/header.shtml (footer.shtml, newticket.html, ect ..)

Then I created two folders to store mystylesheets1.css file and images.
www/cgi-bin/tkt/css
www/cgi-bin/tkt/images

Then I added the following link to reference the css file in the header.shtml file
<link rel="stylesheet" href="css/mystylesheets1.css" />

I get the same problem as the original poster. All my images are "x"ed .. I guess somewhere an incorrect path is fed to ttx but I am not sure how.

Edit:
I am adding an example of a background image link (also in header.shtml) that is broken
<img src="images/header.png" />

[Sparky]

That's odd...  unless there are some issues with permissions from within the cgi directory.

[Sparky]

What happens when you insert the absolute paths?

src="/cgi-bin/tkt/images/header.png"