TYPO3 Enterprise Content Management System

TYPO3 Enterprise Content Management System

Posts 1-2 of 2
  • Christopher Friedmann
    Christopher Friedmann    Premium Member   Group moderator
    The company name is only visible to registered members.
    Die folgenden Script Snippets sind für die, die vor dem selben Problem stehen. Etwas umfassend,
    aber dafür mit der Möglichkeit zur völlig freien Gestaltung der Formulare.

    Im TYPO3 Setup habe ich den Part der CSS Styled Content Extension etwas umgeschrieben,
    so das in meinem Fall das

    //////////////////////////////////////////////////////////////////////[TYPOSCRIPT]//////////////////////////////////////////////////////////
    ### In das Setup des Root Templates

    tt_content.mailform.20 {
    accessibility = 1
    noWrapAttr=1
    formName = mailform
    dontMd5FieldNames = 1
    REQ = 1
    layout = <div>###LABEL### ###FIELD###</div>
    COMMENT.layout = <div>###LABEL###</div>

    ### doppelten LABEL entfernen
    // RADIO.layout = <div>###LABEL### ###FIELD###</div>
    RADIO.layout = <div class="radiolayout">###FIELD###</div>

    LABEL.layout = <div>###LABEL### ###FIELD###</div>

    ### Möglichkeit die Input Felder nebeneinander sauber darzustellen
    // labelWrap.wrap = <div style="width:100px; float:left;">|</div>
    labelWrap.wrap = <div style="width:350px;">|</div>

    commentWrap.wrap = |

    ### nach jeden Optionsfeld ein Umbruch, lässt man den weg, sind die Optionsfelder nebeneinander
    radioWrap.wrap = |<br />

    ### Das selbe gilt für "benötigte" Felder in Formularen
    // REQ.labelWrap.wrap = <div style="width:100px; #float:left;">|</div>
    REQ.labelWrap.wrap = <div style="width:350px;>|</div>
    stdWrap.wrap = <div class="formu">|</div>
    }

    ### Formular CSS zuweisen
    page = PAGE
    page.bodyTag = <body>
    page.includeCSS {
    file1 = fileadmin/styles.css
    }

    ### Des weiteren habe ich für die einzelnen durch CSS definierten
    ### Input, Select, etc. Klassen, ebenfalls im Setup von TYPO3

    tt_content.mailform.20 {
    params >
    params.input = class="mf-input"
    params.password = class="mf-pass"
    params.textarea = class="mf-text"
    params.check = class="mf-check"
    params.radio = class="mf-radio"
    params.select = class="mf-select"
    params.file = class="mf-file"
    params.reset = class="mf-reset"
    params.submit = class="mf-submit"
    }

    //////////////////////////////////////////////////////////////////////[TYPOSCRIPT -- ENDE]//////////////////////////////////////////////////////////


    // Jetzt kommen die eigentlichen CSS Files dazu, die natürlich für die eigenen Bedürfnisse
    // jeweils angepast werden können.

    /* Überschriften der LABEL bei Radio Buttons*/
    legend {
    color:#000000;
    background-color: #FFFFFF;
    padding-left:10px;
    padding-right:10px;
    border: 0px;
    }

    /* Definition des Gesamtrahmens der Radio Buttons*/
    fieldset {
    border:0px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:10px;
    border: 1px solid #D7AE78;
    }

    /* eigene Klasse für die Abstände nach oben und unten
    bei der vwerwendung von Radio Buttons in Formularen */
    .radiolayout {
    width:60%;
    color: #474747;
    padding-top:15px;
    padding-bottom:15px;
    }

    /* eigene Klasse für den Gesamtrahmen vom Formular */
    .formu {
    width:80%;
    font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
    color: #474747;
    font-size: 12px;
    background-color: #F3EEE8;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:110px;
    border: 1px solid #D7AE78;
    font-weight:bold;
    }

    /* spezielle Klassen für Formularelemente */
    .mf-radio {
    border:0px;
    }

    .mf-input {
    font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
    color: #000000;
    font-size: 12px;
    border: 1px solid #D7AE78;
    }
    .mf-pass {
    font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
    color: #000000;
    font-size: 12px;
    }
    .mf-text {
    font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
    color: #000000;
    font-size: 12px;
    border: 1px solid #D7AE78;
    }
    .mf-check {
    border: 0px;
    }
    .mf-select {
    border:0px;
    }
    .mf-file {
    font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
    color: #000000;
    font-size: 12px;
    }
    .mf-reset {
    font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
    color: #000000;
    font-size: 12px;
    }
    .mf-submit {
    font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 12px;
    background-color: #D7AE78;
    border: 0px;
    font-weight:normal;
    }


    So mit der Erkenntnis lassen sich nun auch die Formulare nach eigenen Bedürnissen
    individuell anpassen. Viel Erfolg damit.

    .best regards
    Christopher Friedmann
    (ADMIN)
  • Angelika Ophagen
    Angelika Ophagen
    The company name is only visible to registered members.
    Danke. Das war nach so langer Zeit immer noch eine wertvolle Information. Nun brauchen wir für unsere simple Lösung keine Extension.
 
Sign up for free: