E-mail Popup Screen
First read the article about the Print popup screen. In this article we explain how to install a template.css file in your template/system/css folder of your Joomla website. This template.css file is also used for the Email popup screen.
Print screen without any additional CSS
Structure with classes and id's
div#mailto-window h2 div.mailto-close a span form#mailtoForm div.formelm label input#mailto_field.inputbox div.formelm label input#sender_field.inputbox div.formelm label input#from_field.inputbox div.formelm label input#subject_field.inputbox p button.button button.button
CSS
/* -------------------
E-mail 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;
}
Print screen after applying CSS
The CSS statement body.conentpane was already applied (in Print Popup Screen).
Comments (3)
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - CSS CodeYou have to look at the previous page, Print Popup Screen. On that page you can download a CSS file. Add the CSS statements of this page to this file and upload the file to your template/system/css directory.
Be carefull not to override your template.css file in your active template css folder, or you will loose all your templatestyles.
-
1901-12-13 20:45:52 |Unregistered| lee - Thank youThe information that you have given is just what I am looking for! However, I don't know where to apply the code that you have given. My current mailto pop-up looks just like the first image on your page http://joomla-css.nl/images/joomla16/16_afbeelding005.jpg
I need it to look like the last image on the page http://joomla-css.nl/images/joomla16/16_afbeelding006.jpg
Can you please help? I have Joomla! 1.73
Powered by Compojoom comment 4.2.1
Trawled the net for hours looking for something that would do this, thanks.
Had to create the template.css file for Joomla 1.7
Again many thanks.