Print Popup Screen
The Print Popup Screen will be visible when you click on the Print Icon.
Print screen without applying additional CSS
There is no style active yet. In the <head>section of the popup page there is a link to a template.css file in the folder "templates/system/css/template.css".
<link rel="stylesheet" href="/joomla-css/templates/system/css/template.css" type="text/css" />
The template.css file in the system css folder does not exist in a default Joomla installation, so you have to create it. You also can download an example css file here. Unzip the file and save it to your templates/system/css folder. In this file you will also find the styles for the Email popup screen. The document has the following CSS statements.
@charset "utf-8";
/* CSS Document for Joomla styles 1.6.x or later */
/* -----------------------------------------------------------
Print popup screen
Change "yourtemplatefolder" into your own template folder name
------------------------------------------------------------ */
@import url("../../yourtemplatefolder/css/template.css");
/* -----------------------------------------------------------
Both screens POP Print and popup Email
------------------------------------------------------------ */
body.contentpane {
padding: 30px;
}
/* -----------------------------------------------------------
Email popup screen
------------------------------------------------------------ */
div#mailto-window h2 {
margin: 0 0 15px 0;
}
div#mailto-window div.mailto-close {
padding: 5px 0 20px 0;
}
div#mailto-window div.mailto-close a {
display: block;
width: 100px;
text-align: center;
padding: 3px 10px 4px 10px;
color: #555;
font-style: italic;
background-color: #e5e5e5;
border: 1px #888 solid;
text-decoration: none;
}
div#mailto-window div.mailto-close a:hover {
display: block;
width: 100px;
text-align: center;
padding: 3px 10px 4px 10px;
color: #000;
font-style: italic;
background-color: #ccc;
border: 1px #777 solid;
text-decoration: none;
}
div#mailto-window form#mailtoForm div.formelm label {
display: block;
float: left;
width: 200px;
}
div#mailto-window form#mailtoForm div.formelm input {
margin: 0 0 3px 0;
}
div#mailto-window form#mailtoForm button.button {
margin: 15px 0 0 0;
}
Now you have to change the code "yourtemplatefolder" into the template folder name of your active template. For our example website we have changed it into the following.
@import url("../../joomla-css/css/template.css");
We are now going back to our template.css file of our template and we add the following CSS statement. In the downloaded file this css statement is already added.
body.contentpane {
padding: 30px;
}
Print screen after applying CSS
The Print Popup Screen now has adopted the styles of your template and that was what we wanted. Of course you don't have to do this and choose your own styling for the printscreen.