Print Friendly ?

JohannM · 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 !

Joachim Müller · 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:

Code Select

<!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:

Code Select

.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.

JohannM · June 28, 2007, 08:11:23 PM

U are such a STARR !!!

Thanx

coppermine-gallery.com/forum

News:

Print Friendly ?

JohannM

Joachim Müller

JohannM