 Joomla mail to css stijlen
Deze component toont een popup venster na het klikken op een emailicoon (indien geactiveerd). Dit emailicoon is één van de buttonheadings (pdf, print en emailicoon). Zonder aanvullende stijling ziet het venster er als volgt uit.
In de voorbeeld website past het formulier niet helemaal in het venster. Dat is niet fraai. Bovendien kan de stijling wel iets beter.
Structuur
In de structuur is ook de verwijzing naar een stylesheet opgenomen, want dat is belangrijk om te weten.
head
link rel="stylesheet" /templates/system/css/template.css" type="text/css"
body.contentpane
form
div (padding:10px)
div (text-align:right) a Sluit venster img (close-x.png)
div.componentheading E-mail deze link naar een vriend/vriendin.
E-mail aan: input.inputbox
Verzender: input.inputbox
Uw e-mailadres: input.inputbox
Onderwerp: input.inputbox
button.button Verstuur button.button Annuleer
Stijlen
Het vreemde is dat het emailformulier gekoppeld is aan een niet bestaand css document, namelijk /templates/system/css/template.css. Om het emailformulier van het popup venster te stijlen dient een css document gemaakt te worden met de naam template.css en opgeslagen te worden in de directory /templates/system/css. We willen de stijlen van de voorbeeld website overnemen. Bovendien willen we dat alle elementen van de popup pagina binnen het venster vallen. De stijlen van dit nieuwe css document zijn hieronder weergegeven.
body.contentpane {
background-image:url(../../Joomla_css/images/bg_content.jpg);
background-position: 0 0;
background-repeat: no-repeat;
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
line-height: 16px;
color: #660000;
line-height: 16px;
color: #660000;
}
body.contentpane form { }
body.contentpane form div { }
body.contentpane form div div { }
body.contentpane form div div a,
body.contentpane form div div a:visited {
color: #660000;
}
body.contentpane form div div a:hover {
color:#ff0000;
}
body.contentpane form div div a img {
display: none;
}
div.componentheading {
font-family: Arial;
font-size: 16px;
font-weight: bold;
color: #660000;
line-height: 16px;
margin: 20px 0 10px 0;
}
body.contentpane form div p {
margin: 0;
padding: 0;
}
body.contentpane form div p input.inputbox {
margin-bottom: 5px;
}
body.contentpane form div p button.button { }
Na toepassen van de stijlen ziet het venster er als volgt uit.
|