Difference between revisions of "Customizing the print pop-up"
From Joomla! Documentation
Betweenbrain (talk | contribs) |
(Removed dead URLs. Other markup and phrasing changes.) |
||
(4 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | + | The ''/templates/$template/component.php'' file controls the print view of a given article. The ''component.php'' file acts just like ''index.php'', in that it controls your template layout, module positions and CSS, among other things. | |
− | + | The ''component.php'' file can be customized with features such as module positions and custom CSS files. This is done using the same methods as with ''index.php''. | |
− | |||
− | |||
+ | At the heart of ''component.php'' is: | ||
+ | <syntaxhighlight lang="html4strict"> | ||
<head> | <head> | ||
<jdoc:include type="head" /> | <jdoc:include type="head" /> | ||
− | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general. | + | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" /> |
− | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template. | + | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" /> |
<?php if($this->direction == 'rtl') : ?> | <?php if($this->direction == 'rtl') : ?> | ||
− | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl. | + | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl.css" /> |
<?php endif; ?> | <?php endif; ?> | ||
</head> | </head> | ||
Line 18: | Line 18: | ||
</body> | </body> | ||
</html> | </html> | ||
+ | </syntaxhighlight> | ||
− | Pop-up | + | ==Pop-up Only Styles== |
− | + | To add a specific style sheet for your print pop-up, simply change the style sheet in the head section to one that suits your needs. Use the ''media'' attribute to limit this new style sheet to print or screen. For example, our head may now look like: | |
− | To add a specific | + | <syntaxhighlight lang="html4strict"> |
− | |||
<head> | <head> | ||
<jdoc:include type="head" /> | <jdoc:include type="head" /> | ||
− | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/screen. | + | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/screen.css" media="screen print" /> |
</head> | </head> | ||
− | + | </syntaxhighlight> | |
− | Depending on whether or not you have separated your | + | Depending on whether or not you have separated your style sheets by form and function, you could even use @import to grab your typography, module overrides, browser normalization rules and other styles. In some cases you may need to add a few extra lines of CSS to our new screen.css file to override some of your other rules. For example, ''screen.css'' could look like: |
− | + | <syntaxhighlight lang="css"> | |
@import url('normalization.css'); | @import url('normalization.css'); | ||
@import url('typography.css'); | @import url('typography.css'); | ||
Line 38: | Line 38: | ||
img{border:none} | img{border:none} | ||
.componentheading {background:none;color:#000;font-weight:bold;padding-top:20px;width:100%;text-align:center} | .componentheading {background:none;color:#000;font-weight:bold;padding-top:20px;width:100%;text-align:center} | ||
− | + | </syntaxhighlight> | |
− | Pop-up | + | ==Pop-up Only Modules== |
− | + | The ''component.php'' file allows for the same code to be used for creating module positions. This can be especially useful if you want a specific header image or content displayed on only certain articles when they are printed. To add a module position, use the same code that you would with ''index.php''. | |
− | + | <syntaxhighlight lang="html4strict"> | |
<jdoc:include type="modules" name="popup" /> | <jdoc:include type="modules" name="popup" /> | ||
− | + | </syntaxhighlight> | |
− | Since we want | + | Since we want to display only certain print pop-ups, use the ''countModules'' method. For example: |
− | + | <syntaxhighlight lang="php"> | |
<?php if ($this->countModules('popup')) : ?> | <?php if ($this->countModules('popup')) : ?> | ||
<jdoc:include type="modules" name="popup" style="raw" /> | <jdoc:include type="modules" name="popup" style="raw" /> | ||
<?php endif; ?> | <?php endif; ?> | ||
+ | </syntaxhighlight> | ||
+ | Now, you can create a new module to contain whatever content or images that you'd like, assign it to your newly created position (''popup'' in this example) and control when it appears by use of menu assignments. | ||
− | + | The final contents of your ''component.php'' could look like: | |
− | + | <syntaxhighlight lang="html4strict"> | |
− | The final contents of your | ||
− | |||
<head> | <head> | ||
<jdoc:include type="head" /> | <jdoc:include type="head" /> | ||
− | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/screen. | + | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/screen.css" media="screen print" /> |
</head> | </head> | ||
<body class="contentpane"> | <body class="contentpane"> | ||
Line 66: | Line 66: | ||
</body> | </body> | ||
</html> | </html> | ||
+ | </syntaxhighlight> | ||
+ | ==References== | ||
+ | *[[Creating a basic Joomla! template]] | ||
+ | *[[Counting modules in a given module position]] | ||
− | + | [[Category:Template Development]] | |
− | + | [[Category:Templates]] | |
− | + | [[Category:Tutorials]] | |
− | |||
− | |||
− |
Latest revision as of 18:06, 14 November 2022
The /templates/$template/component.php file controls the print view of a given article. The component.php file acts just like index.php, in that it controls your template layout, module positions and CSS, among other things.
The component.php file can be customized with features such as module positions and custom CSS files. This is done using the same methods as with index.php.
At the heart of component.php is:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" />
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl.css" />
<?php endif; ?>
</head>
<body class="contentpane">
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
Pop-up Only Styles[edit]
To add a specific style sheet for your print pop-up, simply change the style sheet in the head section to one that suits your needs. Use the media attribute to limit this new style sheet to print or screen. For example, our head may now look like:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/screen.css" media="screen print" />
</head>
Depending on whether or not you have separated your style sheets by form and function, you could even use @import to grab your typography, module overrides, browser normalization rules and other styles. In some cases you may need to add a few extra lines of CSS to our new screen.css file to override some of your other rules. For example, screen.css could look like:
@import url('normalization.css');
@import url('typography.css');
@import url('modules.css');
@import url('style.css');
html, body{background: #FFF}
input {border:1px solid #666;}
img{border:none}
.componentheading {background:none;color:#000;font-weight:bold;padding-top:20px;width:100%;text-align:center}
Pop-up Only Modules[edit]
The component.php file allows for the same code to be used for creating module positions. This can be especially useful if you want a specific header image or content displayed on only certain articles when they are printed. To add a module position, use the same code that you would with index.php.
<jdoc:include type="modules" name="popup" />
Since we want to display only certain print pop-ups, use the countModules method. For example:
<?php if ($this->countModules('popup')) : ?>
<jdoc:include type="modules" name="popup" style="raw" />
<?php endif; ?>
Now, you can create a new module to contain whatever content or images that you'd like, assign it to your newly created position (popup in this example) and control when it appears by use of menu assignments.
The final contents of your component.php could look like:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/screen.css" media="screen print" />
</head>
<body class="contentpane">
<?php if ($this->countModules('popup')) : ?>
<jdoc:include type="modules" name="popup" style="raw" />
<?php endif; ?>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>