CMS Contao 4.7.x

Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. Viele dieser Templates habe ich schon in Version 2.11.17 genutzt, allerdings poste ich nur noch die aktuellen für Version 4.7.x, die anderen sind einfach zu alt... Einige Ideen und Anregungen hab ich dem Contao Community Forum entnommen. Viel Hilfe habe ich auch vom Kellerkind erhalten, an dieser Stelle nochmals vielen Dank dafür!

Formulare mit schönerem Fokus / Hovereffekt

Mit CSS kann man den Formularen einen schöneren Fokus / Hovereffekt geben, hier ein Beispiel dazu.

formbox.css

Code eingefügt. Hier klicken zum Ein- / Ausblenden
/*  Textarea Layout  */
select,
input,
textarea {
    font:.95em Ubuntu,Arial,sans-serif;
}

/* Button Abstand */
form button,
input[type="submit"],
.button {
    font-size:1em;
    line-height:1.5em;
    font-weight:bold;
}

/* Fieldset */
#main .formbody fieldset {
    width:40%;
    display:inline-table;
    vertical-align:top;
    border-style:hidden;
}

/* Fieldset Legende */
#main .formbody fieldset legend {
    padding:.5em 0;
    vertical-align:top;
    font-size:1.35em;
    font-weight:bold;
    color:#000;
}

/* Checkbox */
.checkbox_container {
    border:0;
}

/* Einzeilige Textfelder */
#main .formbody .text {
    width:15.625em;
    height:1.875em;
    margin:.3em 0;
    padding:.3em;
    border:.125em solid #efefef;
    border-radius:.25em;
    font:.95em Ubuntu,Arial,sans-serif;
    /* Gecko-Browser (Firefox) */ -moz-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    /* Webkit-Browser (Safari, Chrome) */ -webkit-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    /* allgemein CSS3 */ box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
}

/* Mehrzeilige Textfelder */
#main .formbody .textarea {
    width:21.875em;
    height:9.375em;
    margin:.3em 0;
    padding:.3em;
    border:.125em solid #efefef;
    border-radius:.25em;
    font:.95em Ubuntu,Arial,sans-serif;
    /* Gecko-Browser (Firefox) */ -moz-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    /* Webkit-Browser (Safari, Chrome) */ -webkit-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    /* allgemein CSS3 */ box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
}

/* Hoverzustand einzeilige / mehrzeilige Textfelder */
#main .formbody .text:hover,
#main .formbody .textarea:hover {
    border:.125em solid #CF9B9B;
    border-radius:.25em;
}

/* Fokuszustand einzeilige Textfelder */
#main .formbody .text:focus {
    width:20.313em;
    height:2.813em;
    border:.125em solid #CF9B9B;
    border-radius:.25em;
    font-size:1.3em;
}

/* Fokuszustand mehrzeilige Textfelder */
#main .formbody .textarea:focus {
    width:32.813em;
    height:14.063em;
    border:.125em solid #CF9B9B;
    border-radius:.25em;
    font-size:1.3em;
}

/* Captcha Feld */
#main .formbody .captcha {
    width:6.25em;
    height:1.25em;
    margin:.625em 0 1.25em;
    padding:.375em;
    border:.125em solid #efefef;
    border-radius:.25em;
    font-size:.9em;
    /* Gecko-Browser (Firefox) */ -moz-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    /* Webkit-Browser (Safari, Chrome) */ -webkit-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    /* allgemein CSS3 */ box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
}

/* Captcha Textbeschreibung */
#main .formbody .captcha_text {
    font-size:.9em;
}

/* Hoverzustand Captcha Feld */
#main .formbody .captcha:hover {
    border:.125em solid #CF9B9B;
    border-radius:.25em;
}

/* Fokuszustand Captcha Feld */
#main .formbody .captcha:focus {
    width:9.375em;
    height:1.875em;
    border:.125em solid #CF9B9B;
    border-radius:.25em;
    font-size:1.3em;
}

/* Fehleranzeige */
#main .formbody p.error {
    padding-bottom:.625em;
    font-size:1.3em;
    font-weight:bold;
    color:#f00;
}

/* Memberprofil formatieren */
#main .mod_memberlist .single_record {
    border-spacing:.75em;
}

/* Memberprofil Spalte 2 */
#main .mod_memberlist .single_record .value {
    padding-left:18.75em;
}

/* Memberliste formatieren */
#main .mod_memberlist .all_records {
    min-width:100%;
    margin-right:auto;
    text-align:left;
    border-spacing:.75em;
}

/* Kommentar */
#main .mod_comments .info {
    font-size:.9em;
    color:#666;
}

/* Kommentar Abstand Trennlinie Formfeld */
#main .mod_comments .form {
    margin-top:1em;
}

/* Kommentar Trennlinie */
#main .mod_comments .comment_default {
    padding-bottom:1em;
    border-bottom:.25em solid #666;
    border-bottom-right-radius:.25em;
}

Zurück