Diferència entre revisions de la pàgina «Print style»

Dreceres ràpides: navegació, cerca

Aquesta pàgina forma part de la documentació de Moodle en català, tot i que no ha estat traduïda encara. Podeu contribuir obertament a les tasques de traducció. Podeu consultar la Guia d'edició de la documentació i també participar ens els debats del fòrum de traductors de la documentació a moodle.org

(Useful tools)
(Replaced content with "{{Moved_to_dev_docs}}")
 
Línia 1: Línia 1:
== Why print styles? ==
+
{{Moved_to_dev_docs}}
 
 
Sometimes you might want to print a page but without some of its elements, e.g. the navigation bar or the footer.
 
 
 
Here's an example of a Database Activity entry.
 
 
 
== Screen display ==
 
 
 
That's how the entry looks in the browser:
 
 
 
[[Image:Database activity entry browser view.png]]
 
 
 
 
 
== Creating a print CSS ==
 
 
 
The trick for creating print styles is using CSS's [http://reference.sitepoint.com/css/at-media @media rule]. That way the CSS will only be applied to the specified medium, "print" in our case.
 
 
 
Put the following CSS in a file called ''printstyles.css'' in your theme folder and add the style to your theme by modifying the theme's '''config.php''':
 
 
 
<pre>
 
$THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color', 'printstyles');
 
</pre>
 
 
 
=== printstyles.css ===
 
 
 
<code php>
 
/* Print styles for Moodle database activity */
 
 
 
@media print {
 
 
  html, body {
 
    margin: 0;
 
    padding: 0;
 
    width: 100%;
 
  }
 
 
 
  body {
 
    background-color: White;
 
    color: Black;
 
    font-size: 75%;
 
  }
 
 
  div.tabtree, div#header, div.navbar,
 
  div.headermenu, div.paging, div#footer,
 
  div.datapreferences {
 
    display: none;
 
  }
 
 
 
  table {
 
    text-align: left;
 
  }
 
}
 
</code>
 
 
 
You can use any CSS you like. These are only some examples: 
 
* We unset the page margins and padding to use as much space on the printed page as possible.
 
* We hide those parts of the page we don't want get printed by using "display: none;".
 
* We set the color scheme to black & white.
 
* We decrease the font-size.
 
* We change the text-alignment for easier reading.
 
 
 
== The result ==
 
 
 
And here's the print preview of the same database entry:
 
 
 
[[Image:Database entry print preview 75.png]]
 
 
 
 
 
== Further resources ==
 
You will find more detailed instructions in the following articles by CSS guru Eric Meyer:
 
* [http://meyerweb.com/eric/articles/webrev/200001.html "Print Different"] - that's what you see in the screenshots above
 
* [http://www.alistapart.com/articles/goingtoprint/ "CSS Design: Going to Print"]
 
* His book also contains a whole chapter on [http://www.ericmeyeroncss.com/projects/06/ "Styling for Print"].
 
 
 
== Useful tools ==
 
* [[Firebug]] - for live analyzing and testing of CSS settings
 
* [[Web_developer_extension|Web developer toolbar]] - for enabling only the print CSS even when normally viewing a page in the browser (no resorting to the browser's Print preview necessary)
 
* [[Stylish]] - for permanently applying your own CSS to any webpage - or if you don't want to or can't change any CSS files on your server
 
** [https://addons.mozilla.org/en-US/firefox/addon/12105/ Stylish-Custom] - an enhancement for Stylish with lots of useful features - highly recommended!
 
 
 
== See also: ==
 
; Moodle Docs
 
* [[CSS FAQ]]
 
* [[Themes FAQ]]
 
 
 
; Forum discussions
 
* [http://moodle.org/mod/forum/discuss.php?d=127754 More print styles using media="print"]
 
* [http://moodle.org/mod/forum/discuss.php?d=130118 Printer Friendly Reports]
 
 
 
; General information
 
* [http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=278#7 "!important is Actually Useful (in Print Style Sheets)"] - SitePoint Tech Times article
 
* [http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet "Handy Tips for Creating a Print CSS Stylesheet"]
 
 
 
[[fr:Style impression]]
 

Revisió de 09:02, 16 juny 2011

This development related page is now located in the Dev docs.

See the Print style page in the Dev docs.