[TYPO3-german] form CSS Definition bootstrap_package 7.6 LTS

[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