coppermine-gallery.com/forum

Support => cpg1.4.x Support => Older/other versions => cpg1.4 themes/skins/templates => Topic started by: JohannM on June 14, 2007, 10:08:41 PM

Title: Print Friendly ?
Post by: JohannM on June 14, 2007, 10:08:41 PM
How can one implement a "button" to generate a "PRINTER FRIENDLY" link on a page ?

Perhaps a way with the hyper link as  "javascript:print()" ?  This actually prints the whole page, but I just want to have a specific area to be printed !
Title: Re: Print Friendly ?
Post by: Joachim Müller on June 25, 2007, 06:48:06 PM
Edit themes/yourtheme/template.html. Wrap the area(s) you don't want to see printed into a div container and assign a unique ID to it or a unique class. Come up with a different stylesheet for print and set display attributes for the container that you don't want to see printed accordingly.

Here's an example for the classic theme, with the header and menu items not being printed:

template.html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="themes/classic/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="themes/classic/print.css" type="text/css" media="print" />
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html 2688 2005-12-04 03:22:35Z donnoman $ -->
</head>
<body>
<div class="noprint">
  {CUSTOM_HEADER}
</div>
  <table width="100%" border="0" cellpadding="20" cellspacing="20">
    <tr>
      <td valign="top" style="border: 1px solid #666666;background-color:#FFFFFF;">
        <div class="noprint">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>
                <a href="index.php"><img src="themes/classic/images/site_logo.png" border="0" alt="" /></a><br />
              </td>
              <td width="100%" align="center">
                <h1>{GAL_NAME}</h1>
                <h3>{GAL_DESCRIPTION}</h3><br />
                {SYS_MENU} <br /> {SUB_MENU}
              </td>
            </tr>
          </table>
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center" valign="top">
                {LANGUAGE_SELECT_FLAGS}
              </td>
            </tr>
            <tr>
              <td align="center" valign="top">
                {THEME_SELECT_LIST}
                {LANGUAGE_SELECT_LIST}
              </td>
            </tr>
          </table>
          <img src="images/spacer.gif" width="1" height="15" alt="" />
          <br />
        </div>
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" valign="top">
              <div class="noprint">
                {ADMIN_MENU}
              </div>
              {GALLERY}
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <div class="noprint">
    {CUSTOM_FOOTER}{VANITY}
  </div>
</body>
</html>

print.css:.noprint {
  display:none;
}
Keep in mind though that this is not related to Coppermine at all, but well-known tricks to create a printer-friendly page. The same thing applies for a JavaScript-driven "printme" link.

If you need to find out more, read the article by Eric Meyer (published on "A List Apart"):  http://alistapart.com/stories/goingtoprint/

As this is related to theming I'm moving this thread accordingly.

Title: Re: Print Friendly ?
Post by: JohannM on June 28, 2007, 08:11:23 PM
U are such a STARR !!!

Thanx