Difference between revisions of "Customizing the print pop-up"
From Joomla! Documentation
Betweenbrain (talk | contribs) (New page: As Andrew Eddie at [http://www.theartofjoomla.com/reference/17-templates/60-the-popup-template-file.html The Art of Joomla] reports, the file /templates/$template/component.php controls th...) |
Betweenbrain (talk | contribs) |
||
| Line 23: | Line 23: | ||
To add a specific stylesheet for your print pop-up, simply change the stylesheet in the head section to one that suits your needs. I'd also recommend using the media attribute to limit this new stylesheet to print and / or screen. For example our head may now look like: | To add a specific stylesheet for your print pop-up, simply change the stylesheet in the head section to one that suits your needs. I'd also recommend using the media attribute to limit this new stylesheet to print and / or screen. For example our head may now look like: | ||
| − | <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.css" type="text/css" media="screen print" /> |
| − | + | </head> | |
| − | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/screen.css" type="text/css" media="screen print" /> | ||
| − | |||
| − | </head> | ||
Depending on whether or not you have separated your stylesheets 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: | Depending on whether or not you have separated your stylesheets 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('normalization.css'); |
| − | @import url('typography.css'); | + | @import url('typography.css'); |
| − | @import url('modules.css'); | + | @import url('modules.css'); |
| − | @import url('style.css'); | + | @import url('style.css'); |
| − | html, body{background: #FFF} | + | html, body{background: #FFF} |
| − | input {border:1px solid #666;} | + | input {border:1px solid #666;} |
| − | 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} |
Pop-up only Modules | Pop-up only Modules | ||
Component.php 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. | Component.php 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" /> | + | <jdoc:include type="modules" name="popup" /> |
Since we want this to be displayed only certain print pop-ups, I use the countModules method. For example: | Since we want this to be displayed only certain print pop-ups, I use the countModules method. For example: | ||
| − | <?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; ?> |
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. | 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. | ||
| Line 57: | Line 54: | ||
The final contents of your new component.php could look like: | The final contents of your new component.php could look like: | ||
| − | <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.css" type="text/css" media="screen print" /> |
| − | + | </head> | |
| − | <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/screen.css" type="text/css" media="screen print" /> | + | <body class="contentpane"> |
| − | |||
| − | </head> | ||
| − | |||
| − | <body class="contentpane"> | ||
| − | |||
<?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; ?> | ||
| − | |||
<jdoc:include type="message" /> | <jdoc:include type="message" /> | ||
| − | |||
<jdoc:include type="component" /> | <jdoc:include type="component" /> | ||
| − | + | </body> | |
| − | </body> | + | </html> |
| − | |||
| − | </html> | ||
Refrences: | Refrences: | ||
| − | The | + | *[http://www.theartofjoomla.com/reference/17-templates/60-the-popup-template-file.html The Art of Joomla] |
| − | + | *[[Tutorial:Creating_a_basic_Joomla!_template]] | |
| − | + | *[[Counting_modules_in_a_given_module_position]] | |
Revision as of 15:47, 8 September 2009
As Andrew Eddie at The Art of Joomla reports, the file /templates/$template/component.php controls the print view of a given article. Component.php acts just like index.php, which controls your template layout, module positions and CSS, among other things.
Component.php can be equally customized with features like 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" type="text/css" /> <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> <?php if($this->direction == 'rtl') : ?> <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl.css" type="text/css" /> <?php endif; ?> </head> <body class="contentpane"> <jdoc:include type="message" /> <jdoc:include type="component" /> </body> </html>
Pop-up only Styles
To add a specific stylesheet for your print pop-up, simply change the stylesheet in the head section to one that suits your needs. I'd also recommend using the media attribute to limit this new stylesheet to print and / 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" type="text/css" media="screen print" /> </head>
Depending on whether or not you have separated your stylesheets 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 Component.php 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 this to be displayed only certain print pop-ups, I 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 new 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" type="text/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>
Refrences: