www.itcweb.org

[submike]

Just wrapped up the design and programming of the website for the Illinois Technology Center for Law & the Public Interest. I'll post more information on the hacks/customization I used on the site.

http://www.itcweb.org/

Check it out and let me know what you think. Any ideas on the banner image on the secondary page? I ran out of time designing and had to throw something up real quick. Seems unfinished to me.

Thanks again to Oliver for such a great product. Keep up the good work.

[cyrano]

hi submike,

nice and clear site with a nice feature using flash.

how did you setup the content when using 2 or 3 columns?
made with css? or tables?
or standard content parts?

[submike]

thanks for the compliment, cyrano. i had to do quite a bit of hacking to get this site up. i have to admit, i more of a designer than a programmer, so there's probably a better way to achieve the same effect.

Here are the screensnaps of the setup used for this site.

1. I used the one column setup with a custom layout.


2. I created templates for each section for the secondary nav, which is created using the following code: {NAV_TABLE_COLUMN:1}


3. I then place all the code within the main content area in each template. I used external php (ex. {php:scripts.php}) scripts to make updating some of the global features easier. that makes updating the site easier, as I don't have to go into each template to update, I just update the external php script.


One problem I ran into with this approach was the print function. I couldn't use the default print function built into php wcms, as it would render the whole site again as all of the content is placed within the main content area of the templates. To resolve this issue, I used the code that Trip came up with in this posting:

http://www.phpwcms.de/forum/viewtopic.p ... ight=print

I hope this helps.

[cyrano]

hi submike,

nice to read you are also a designer, me too

so I tried it to get the columns in the right with contentparts...

I knw to use a table inside, but would like to have defined areas where I can place the normal contentparts.

Thank you for your kind and detailed description about the design of this site.

So I see you didn' use the contentparts and a layer set to acieve the layout, right?
Used a table with 3 columns etc. to get this layout?

I will try your suggestions.
Thank you again for your detailed answer.
Thomas

[submike]

Yeah, I didn't use the content parts (i updated the image above to reflect this). I tried the three column layout, but I couldn't figure out how to achieve the aesthetics of my design. Someone on the forum recommeded using the custom feature, so I tried it and it worked. Here's a general breakdown of the structure. Check the source on any page to view details of the structure.

Code: Select all

<table>
  <tr>
    <td>left shadow</td>
    <td>
      <table>
        <tr>
          <td>202 px content area</td>
          <td>1 px spacer</td>
          <td>202 px content area</td>
          <td>1 px spacer</td>
          <td>202 px content area</td>
        <tr>
       </table>
    </td>
    <td>right shadow</td>
  </tr>
</table>

[trip]

Glad the print funciton worked
have a look in the code of the print function, you can attach a CSS file to make it look neater, and you can also limit the width to say 800pixels wide, I used a table when doing this and had everything inside of it...its a little hacking but worth the effort...

regards TriP

[submike]

I forgot to update the actual display page for the print function. Thanks for the reminder Trip.

CSS
I choose to use 2 CSS for the print page, one for the screen (sans-serif for better screen legibility) and one for print (serif for better legibility on paper). Use the following in the header to achieve this effect:

Code: Select all

<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

Table width
I choose to use a table width of 100%. If you use a fixed width table and it's greater than the margins of the printout, you'll cut off words, which is something I want to avoid. I used a javascript to force the pop-up, so it looks more presentable, and doesn't block the parent window in browsers like Mozilla and Safari.

Thanks again Trip for the print code, it was a big help.

**UPDATE**
I ran into an error with the javascript code and the $HTTP_REFERER used in the phprint.php code. The code works fine in Mozilla, but causes errors in IE, so it's back to launching a "_blank" window for now.

**FIXED**
I came up with an external php script that seems to do the trick. So far, I've tested in IE, NN and Mozilla on the PC platform, and Safari on the Mac platform.

Code: Select all

$current_url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
echo "<a href=\"javascript:display('phprint.php?set_referer=".$current_url."','test',0,1,0,410,450)\">";
echo "<img src=\"img/article/print_icon.gif\" border=\"0\" alt=\"Print this Page\"></a>";

In the phprint.php code (around line 46 or so) from Trip, change the following:

Code: Select all

$read = fopen($HTTP_REFERER, "rb");

to

Code: Select all

$read = fopen($set_referer, "rb");

[trip]

Submike
excellent, thanks for the update and information, will look into adding this to the script... and posting to the site...

TriP