Nightwing

CMS Contao 4.11.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 aktuelleren ab Version 4.9.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! Manch Eintrag ist von Version 4.7.x / 4.8.x und mit dem Update auf 4.9.x weggefallen, allerdings lass ich es (noch) drin, da es noch jung ist...

« Letzter Eintrag Nächster Eintrag »

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. 
/* Textarea Layout */
select,
input,
textarea {
    font:.95em Ubuntu,Arial,sans-serif;
}

/* 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;
}

/* Captcha Textbeschreibung */
#main .formbody .captcha_text {
    font:.95em Ubuntu,Arial,sans-serif;
}

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

/* Button */
form button,
input[type="submit"],
.button {
    border:.15em solid #ccc;
    border-radius:.25em;
    font:.95em Ubuntu,Arial,sans-serif;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
    -moz-box-shadow: inset 0.25em 0.25em 0.5em #efefef;
    -webkit-box-shadow: inset 0.25em 0.25em 0.5em #efefef;
    box-shadow: inset 0.25em 0.25em 0.5em #efefef;
}

/* Hoverzustand Button */
form button:hover,
input[type="submit"]:hover,
.button:hover {
    border:.15em solid #CF9B9B;
    border-radius:.25em;
    color:#f60;
    -webkit-transition: color 500ms ease-in-out;
    -moz-transition: color 500ms ease-in-out;
    -o-transition: color 500ms ease-in-out;
    transition: color 500ms ease-in-out;
}

/* Activezustand Button */
form button:active,
input[type="submit"]:active,
.button:active {
    background-color:#d6d6d6;
    border:.15em solid #CF9B9B;
    border-radius:.25em;
    color:#f60;
    -webkit-transition: color 500ms ease-in-out;
    -moz-transition: color 500ms ease-in-out;
    -o-transition: color 500ms ease-in-out;
    transition: color 500ms ease-in-out;
}

/* Einzeilige Textfelder */
#main .formbody .text {
    width:15.625em;
    height:1.875em;
    margin:.3em 0;
    padding:.3em;
    border:.15em solid #efefef;
    border-radius:.25em;
    font:.95em Ubuntu,Arial,sans-serif;
    -moz-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    -webkit-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    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:.15em solid #efefef;
    border-radius:.25em;
    font:.95em Ubuntu,Arial,sans-serif;
    -moz-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    -webkit-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
}

/* Hoverzustand einzeilige / mehrzeilige Textfelder */
#main .formbody .text:hover,
#main .formbody .textarea:hover {
    border:.15em solid #CF9B9B;
    border-radius:.25em;
    -webkit-transition: color 500ms ease-in-out;
    -moz-transition: color 500ms ease-in-out;
    -o-transition: color 500ms ease-in-out;
    transition: color 500ms ease-in-out;
}

/* Fokuszustand einzeilige Textfelder */
#main .formbody .text:focus {
    width:20.3125em;
    height:2.8125em;
    border:.15em solid #CF9B9B;
    border-radius:.25em;
    font-size:1.3em;
    -webkit-transition: color 500ms ease-in-out;
    -moz-transition: color 500ms ease-in-out;
    -o-transition: color 500ms ease-in-out;
    transition: color 500ms ease-in-out;
}

/* Fokuszustand mehrzeilige Textfelder */
#main .formbody .textarea:focus {
    width:32.8125em;
    height:14.0625em;
    border:.15em solid #CF9B9B;
    border-radius:.25em;
    font-size:1.3em;
    -webkit-transition: color 500ms ease-in-out;
    -moz-transition: color 500ms ease-in-out;
    -o-transition: color 500ms ease-in-out;
    transition: color 500ms ease-in-out;
}

/* Captcha Feld */
#main .formbody .captcha {
    width:6.25em;
    height:1.25em;
    margin:.625em 0 1.25em;
    padding:.375em;
    border:.15em solid #efefef;
    border-radius:.25em;
    font:.95em Ubuntu,Arial,sans-serif;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
    -moz-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    -webkit-box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
    box-shadow: inset 0.25em 0.25em 0.5em #cfcfcf;
}

/* Hoverzustand Captcha Feld */
#main .formbody .captcha:hover {
    border:.15em solid #CF9B9B;
    border-radius:.25em;
    -webkit-transition: color 500ms ease-in-out;
    -moz-transition: color 500ms ease-in-out;
    -o-transition: color 500ms ease-in-out;
    transition: color 500ms ease-in-out;
}

/* Fokuszustand Captcha Feld */
#main .formbody .captcha:focus {
    width:9.375em;
    height:1.875em;
    border:.15em solid #CF9B9B;
    border-radius:.25em;
    font-size:1.3em;
    -webkit-transition: color 500ms ease-in-out;
    -moz-transition: color 500ms ease-in-out;
    -o-transition: color 500ms ease-in-out;
    transition: color 500ms ease-in-out;
}

/* Fehleranzeige */
#main .formbody p.error {
    padding-bottom:.625em;
    font-family:Ubuntu,Arial,sans-serif;
    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:.95em Ubuntu,Arial,sans-serif;
    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: 0.25em;
}

Zurück