[TYPO3-german] form CSS Definition bootstrap_package 7.6 LTS

Fri Nov 20 15:34:12 CET 2015

Hallo Sophie,

TYPO3 baut aus allen möglichen CSS-Dateien eine einzige Datei und
komprimiert die, um Ladezeit zu optimieren. Deshalb sieht die so
hässlich aus.

Wie weit hast du dich in den Typoscript Objectbrowser eingearbeitet?
(Den findest du im TEMPLATE-Modul im Modul-Bereich ganz links.) Damit
kannst du analysieren, wie das Typoscript-Template aufgebaut ist und
kannst da ggf. eine eigene CSS-Datei einbauen oder herausfinden, in
welche passende CSS-Datei du Modifikationen einbringen kannst.

Das wäre der Weg, den ich gehen würde. Ich kenne mich allerdings mit
Bootstrap nicht aus und weiß jetzt auf Anhieb nicht, ob es andere
bootstrap-konformere Lösungen gäbe.

Beste Grüße
Stefan

Am 20.11.2015 um 14:41 schrieb Sophie Berger:
> Hallo Stefan,
> 
> danke für den Hinweis.
> 
> Ich habe mir den Quellcode nochmal angesehen.
> Es sind zwei Stylesheets eingebunden, die da heissen
> /typo3temp/compressor/[ellanlanger hash].css
> In einem der beiden CSS konnte ich tatsächlich ein paar Einträge für
> csc-form-element finden.
> Leider habe ich nicht die leiseste Ahnung, wer das wo definiert. Die
> CSS Datei ist nicht formatiert, was es sehr schwer lesbar macht.
> Ich kopier mal einen Ausschnitt:
> 
> .typo3-editPanel{margin-bottom:0;}.csc-form-element
> .form-group:before,.csc-form-element .form-group:after{content:"
> ";display:table;}.csc-form-element
> .form-group:after{clear:both;}.csc-form-element
> .form-group:before,.csc-form-element .form-group:after{content:"
> ";display:table;}.csc-form-element
> .form-group:after{clear:both;}.csc-form-element
> .control-label{text-align:left;}.csc-form-element .control-label
> legend{font-family:"Helvetica
> Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;display:inline-block;max-width:100%;margin-bottom:5px;font-weight:bold;border:none;}.csc-form-element
> .help-block.text-danger{color:#a94442;font-weight:normal;}a.csc-form-element
> .help-block.text-danger:hover,a.csc-form-element
> .help-block.text-danger:focus{color:#843534;}.csc-form-element-radio
> .radio input[type="radio"],.csc-form-element-checkbox .checkbox
> input[type="checkbox"]{margin-left:0;}.csc-form-confirmation o
> 
> Da ich selbst nicht mehr gemacht habe, als das bootstrap_package zu
> installieren, bin ich ratlos, wo die CSS-Datei definiert wird.
> Irgendwo muss sie im Template eingebunden sein. Leider finde ich weder
> in den Konstanten, noch im Setup einen Hinweis. Das Template "Enthält"
> lediglich das bootstrap_package. Was das bewirkt, weiß ich leider
> nicht.
> 
> Ich beschreibe einfach mal mein Vorgehen ab hier. Evtl. gibt das den
> richtigen Hinweis für jemanden, der sich damit auskennt.
> 
> Ich finde unter
> /typo3conf/ext/bootstrap_package/Configuration/TypoScript eine
> setup.txt. Ob und wie die eingebunden ist, weiß ich nicht, aber da es
> funktioniert, gehe ich davon aus, dass diese verwendet wird. Darin
> findet sich tatsächlich ein <INCLUDE_TYPOSCRIPT:
> source="FILE:EXT:form/Configuration/TypoScript/setup.txt">.
> Die nächste Verwirrung. Diese Extension scheint global im Typo3
> Verzeichnis zu liegen /typo3_src-7.6.0/typo3/sysext/form. Selbst wenn
> ich hier Änderungen vornehme, sind die beim nächsten Update wieder
> weg.
> Macht aber auch nichts, denn darin finde ich auch keine Verlinkungen
> auf CSS Dateien oder ähnliches.
> 
> Unter typo3conf/ext/bootstrap_package/Resources/Public/Css findet sich
> tatsächlich eine theme.css. Da ich aber nicht weiß, ob diese
> eingebunden ist, tappe ich auch hier im dunkeln. Es finden sich
> immerhin die formatierten csc-form-element Definitionen, die ich auch
> im Quelltext gefunden habe:
> 
> .csc-form-element .form-group:before,
> .csc-form-element .form-group:after {
>   content: " ";
>   display: table;
> }
> .csc-form-element .form-group:after {
>   clear: both;
> }
> .csc-form-element .form-group:before,
> .csc-form-element .form-group:after {
>   content: " ";
>   display: table;
> }
> .csc-form-element .form-group:after {
>   clear: both;
> }
> .csc-form-element .control-label {
>   text-align: left;
> }
> .csc-form-element .control-label legend {
>   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
>   font-size: 16px;
>   line-height: 1.55;
>   display: inline-block;
>   max-width: 100%;
>   margin-bottom: 5px;
>   font-weight: bold;
>   border: none;
> }
> .csc-form-element .help-block.text-danger {
>   color: #a94442;
>   font-weight: normal;
> }
> a.csc-form-element .help-block.text-danger:hover,
> a.csc-form-element .help-block.text-danger:focus {
>   color: #843534;
> }
> .csc-form-element-radio .radio input[type="radio"],
> .csc-form-element-checkbox .checkbox input[type="checkbox"] {
>   margin-left: 0;
> 
> Nun, leider bringt mich auch das nicht weiter, denn der Submit Button
> scheint hier nicht definiert.Ich sehe also an der falschen Stelle
> nach? Kann aber doch eigentlich nicht sein, denn woher wüsste der
> Browser sonst, dass er zeigt, was er zeigt. Ich bin ratlos...
> Vielleicht hast du oder ihr anderen noch einen Hinweis.
> 
> Danke
> Sophie
> 
> Am 20. November 2015 um 12:18 schrieb Stefan Padberg
> <post at bergische-webschmiede.de>:
>> Hallo Sophie,
>>
>> die Hintergrundfarbe des Buttons solltest du problemlos über dein
>> Stylesheet einstellen können.
>>
>> Verantwortlich für den HTML-Code an dieser Stelle ist die Extension
>> 'form'. Dort kann man auch einiges konfigurieren, aber für
>> Hintergrundfarben ist das Stylesheet zuständig.
>>
>> Beste Grüße
>> Stefan
>>
>>
>> Am 20.11.2015 um 12:05 schrieb Sophie Berger:
>>> Hallo,
>>>
>>> ich bin Typo3 Neuling und habe mich die letzten Monate mit der Version
>>> 7 beschäftigt. Insbesondere mit dem Bootstrap Package
>>> (bootstrap_package). Soweit komme ich gut damit klar, aber hin und
>>> wieder gibt es ein paar Stolpersteine und aktuell komme ich nicht
>>> weiter.
>>> Ich hoffe, dass dies der richtige Ort ist, um nach Hilfe zu fragen.
>>>
>>> Ich habe bisher ein Formular (form) benutzt, das Besucher nutzen
>>> können, um eine Nachricht an mich zu senden. Dies geschieht, indem der
>>> Benutzer auf einen "Senden" Button klickt.
>>> Bisher habe ich mich mit dem Design nicht befasst, denn der Button
>>> hatte bisher die richtige Hintergrundfarbe und entsprach dem Farbbild
>>> der restlichen Seite.
>>> Seit dem Upgrade von 7.4 auf 7.6 LTS hat sich die Hintergrundfarbe des
>>> Buttons jedoch verändert und es ist mir ein Rätsel, weshalb das so
>>> ist.
>>>
>>> Nun war mein erster Gedanke, das ließe sich im Constant Editor für das
>>> Bootstrap Package irgendwo konfigurieren. Leider finde ich dort unter
>>> "Bootstrap Package: Styling" keinen Eintrag, der mich diesbzgl.
>>> weiterbringt. Bisher hatte der Button immer die Hintergrundfarbe, die
>>> @brand-primary entsprach. Im Bereich "Forms" finde ich keine Variable,
>>> die den Background des submit buttons setzt. Übersehe ich hier
>>> vielleicht etwas? Ich finde z.B. lediglich @input-bg, welches die
>>> Farbe für den Hintergrund des Textfelds definiert.
>>>
>>> Mein nächster Gedanke war, dass die "forms" Extension eigentlich
>>> garnicht mit Bootstrap zu tun hat. Also ein Blick in den Source Code
>>> der Seite. Der hat mir folgendes offenbart:
>>>
>>> <div class="csc-form-4 csc-form-element csc-form-element-submit">
>>>  <div class="form-group">
>>>   <div class="col-sm-offset-3 col-sm-9">
>>>    <input type="submit" id="field-4" value="Senden"
>>> name="tx_form_form[tx_form][4]" />
>>>   </div>
>>>  </div>
>>> </div>
>>>
>>> Damit kenne ich mich nun leider gar nicht aus. Was ist
>>> csc-form-element-submit (ich denke, darum geht es), woher kommt es und
>>> am wichtigsten: Wo wird es definiert?
>>>
>>> Vielleicht hat jemand einen Tipp für mich, wie ich die
>>> Hintergrundfarbe des Submit Buttons wieder so setzen kann, wie ich mir
>>> das wünsche.
>>>
>>> Danke euch
>>>
>>> Sophie
>>>
>>
>> _______________________________________________
>> TYPO3-german mailing list
>> TYPO3-german at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german