Contact + Contactformulier
Via een menu-item kunnen de gegevens en het contact formulier van één contact persoon worden getoond. In dit voorbeeld worden zo veel mogelijk gegevens getoond. Zonder verdere stijling ziet de pagina er als volgt uit.
Zonder stijling ziet de pagina er rommelig uit. De vereenvoudigde structuur is als volgt.
div.contact h1 h2 span.contact-name h3 span.contact-category a h3 p.contact-position div.contact-address span.jicons-icons img address span.contact-street span.contact-suburb span.contact-state span.contact-postcode span.contact-country div.contact-contactinfo p span.jicons-icons img span.contact-emailto p span.jicons-icons img span.contact-telephone p span.jicons-icons img span.contact-fax p span.jicons-icons img span.contact-mobile p span.jicons-icons span.contact-webpage a h3 div.contact-form form#contact-form.form-validate fieldset legend dl dt label#jform_contact_name-lbl.hasTip.required span.star dd input#jform_contact_name.required dt label#jform_contact_email-lbl.hasTip.required span.star dd input#jform_contact_email.required dt label#jform_contact_emailmsg-lbl.hasTip.required span.star dd input#jform_contact_emailmsg.required dt label#jform_contact_message-lbl.hasTip.required span.star dd textarea#jform_contact_message.required dt label#jform_contact_email_copy-lbl.hasTip dd input#jform_contact_email_copy dd button.button.validate h3 div.contact-links ul li a h3 div.contact-articles ol li a h3 div.contact-miscinfo div.jicons-icons img div.contact-misc p
Er zijn veel stijlen terug te vinden op deze component. Voor de voorbeeldwebsite hebben we bijna alle classes en id's van deze pagna een stijl meegegeven. We hebben de volgende stijlen toegepast.
/* ---------------------
Contact + Contactform
------------------------ */
div.contact h2 span.contact-name {
display: block;
float: left;
width: 100%;
margin: 15px 0 0 0;
padding: 0;
}
div.contact h3 {
margin: 15px 0 0 0;
display: block;
float: left;
width: 100%;
padding: 0;
}
div.contact h3 span.contact-category a {
display: block;
float: left;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 11px;
color: #666;
font-weight: normal;
margin: -15px 0 0 0;
}
/* Select form */
div.contact form#selectForm {
clear: both;
padding: 10px 0 0 0;
}
/* Data contactperson / adressblock */
div.contact p.contact-position {
display: block;
margin: 0 0 10px 0;
}
div.contact div.contact-address span.jicons-icons img {
float: left;
margin: 0 15px 0 0;
}
div.contact div.contact-address address {
float: left;
padding: 0 0 10px 0;
}
div.contact div.contact-address address span {
display: block;
float: none;
font-style: normal;
}
/* Contact info block */
div.contact div.contact-contactinfo {
clear: both;
}
div.contact div.contact-contactinfo p {
margin: 0 0 10px 0;
}
div.contact div.contact-contactinfo p span img {
float: left;
margin: 0 15px 0 0;
}
/* Contact Form */
div.contact div.contact-form {
clear: both;
}
/* fieldset contact form has no closing tag in Joomla 1.6.4 */
div.contact div.contact-form fieldset {}
div.contact div.contact-form fieldset legend {
padding: 10px 0 10px 0;
}
div.contact div.contact-form fieldset dl {}
/* labels */
div.contact div.contact-form fieldset dl dt {
width: 170px;
display: block;
float: left;
}
/* Input fields */
div.contact div.contact-form fieldset dl dd {
display: block;
width: 350px;
float: left;
}
div.contact div.contact-form fieldset dl dd input {
margin: 0 0 5px 0;
float: left;
width: 250px;
}
div.contact div.contact-form fieldset dl dd textarea {
margin: 0 0 5px 0;
float: left;
width: 250px;
}
/* Inputfield checkbox contact mail copy */
div.contact div.contact-form fieldset dl dd input#jform_contact_email_copy {
margin: 0 0 15px 0;
width: auto;
}
div.contact div.contact-links {
clear: both;
float: left;
width: 100%;
padding: 0;
}
div.contact div.contact-links ul {
list-style: none;
padding: 4px 0 0 0;
}
div.contact div.contact-miscinfo {
clear: both;
}
div.contact div.contact-miscinfo div.jicons-icons {
padding: 4px 0 0 0;
}
div.contact div.contact-miscinfo div.jicons-icons img {
float: left;
margin: 0 15px 0 0;
}
Na het toepassen van deze stijlen ziet de pagina er als volgt uit.
Reacties (5)
-
1901-12-13 20:45:52 |Unregistered| Wilma Pot - css contactformulierBedankt voor je antwoord, Rob!
Bij de contactpersoon staat het formulier op 'toon', als ook bij het menu.
Bij de algemene/globale instellingen zie ik niet staan dat je het daar kan aangeven (= joomla 1.7).
Het zou ook te maken kunnen hebben dat ik een oude 1.5-template gebruik, die ik verder al helemaal heb aangepast naar 1.7.
Als ik in Firefox die height wijzig van "0" in "auto" laat hij het formulier wel zien. Vandaar dat ik in die richting dacht.
Als je nog meer suggestie hebt, hou ik me aanbevolen!
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - css contactformulierHallo Wilma,
Dit heeft niets met CSS te maken.
De contactpersoon "weergave opties" moet ingesteld zijn op "direct". Dan is het contactformulier permanent zichtbaar. Je kunt dit instellen bij de globale opties of bij het menu-item voor de contactpersoon.
Rob van Oudheusden.
-
1901-12-13 20:45:52 |Unregistered| Wilma Pot - css-contactformulierSorry ik zie dat de code is weggevallen in mijn vorige bericht.
Hierbij nogmaals zonder tags:
div class="pane-slider content pane-hide" style="border-bottom: medium none; padding-bottom: 0px; height: 0px; overflow: hidden; border-top: medium none; padding-top: 0px;" fullOpacity="1"
-
1901-12-13 20:45:52 |Unregistered| Wilma Pot - css contactformulierJullie bovenstaande code heb ik ingebracht. Fantastisch want de standaard-Joomla ziet er niet uit.
Ik zit echter nog met het volgende:
Weten jullie hoe je onder de contactpersoon ook het formulier moet laten zien?
Ik heb nu (gebruik inmiddels Joomla 1.7) de contactpersoon, maar het formulier wordt eronder niet weergegeven. Je moet dan expliciet op het kopje 'contactformulier' klikken wil het zichtbaar worden. Ik wil het er standaard onder (zonder klikken).
Kan nergens de systeem-formulier-css vinden in Joomla en het zit niet in mijn template-css.
In Firefox zie ik dat het ligt aan de:
De height moet hier op 'auto', dan werkt het denk ik.
Kan ik in mijn template-css gewoon de height toevoegen?
Maar wat moet ervoor, met alle div's en classes waar het in zit?
Alvast bedankt,
Wilma
Powered by Compojoom comment 4.2.1
Ik zat me maar blind te staren op de instellingen van het contact-FORMULIER, wat op toon stond. Blijkt dus om de contactpersoon zelf te gaan, wat je op direct kan zetten.
Alsnog bedankt dus voor je hulp!
Hallo Wilma,
Dit heeft niets met CSS te maken.
De contactpersoon "weergave opties" moet ingesteld zijn op "direct". Dan is het contactformulier permanent zichtbaar. Je kunt dit instellen bij de globale opties of bij het menu-item voor de contactpersoon.
Rob van Oudheusden.