|
|
| (18 revisions intermèdies per 2 usuaris que no es mostren) |
| 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]. 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:
| |
| | |
| <code>
| |
| $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color', 'printstyles');
| |
| </code>
| |
| | |
| <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>
| |
| | |
| == The result ==
| |
| | |
| And here's the print preview of the same database entry:
| |
| | |
| [[Image:Database entry print preview 75.png]]
| |
| | |
| | |
| == See also: ==
| |
| * [[CSS FAQ]]
| |
| * [[Themes FAQ]]
| |
| * [[Firebug]]
| |
| * [[Stylish]]
| |
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.
