Eingabefeldern und SELECT Klassen zuweisen

[SickofSociety]

Hallo Leute, da mir die Eingabefelder z.B. beim Login (Emailfeld und Passwortfeld) nicht gefallen, würde ich die gerne umgestalten.

Allerdings finde ich die zugehörigen Codeschnipsel nicht.
In der box_login.html und login.php kann ich nichts finden.

Um die Felder per CSS zu stylen muss ich aber direkt im html-Code Klassen zuweisen.

Kann mir jemand sagen, wo ich diesen Code finden kann?

Wäre klasse.

Danke schonmal

[Hetfield]

In der login.php nach folgendem suchen:

PHP-Code:

$smarty->assign('INPUT_MAIL', xtc_draw_input_field('email_address'));
$smarty->assign('INPUT_PASSWORD', xtc_draw_password_field('password')); 


und gegen dies hier ersetzen:

PHP-Code:

$smarty->assign('INPUT_MAIL', xtc_draw_input_field('email_address', '', 'class="login"'));
$smarty->assign('INPUT_PASSWORD', xtc_draw_password_field('password', '', 'class="login"')); 


Als nächstes in der Datei templates/TEMPLATE/source/boxes/loginbox.php nach diesem Code suchen:

PHP-Code:

$box_smarty->assign('FIELD_EMAIL', xtc_draw_input_field('email_address', '', 'size="25" maxlength="50"'));
$box_smarty->assign('FIELD_PWD', xtc_draw_password_field('password', '', 'size="10" maxlength="30"')); 


und gegen diesen ersetzen:

PHP-Code:

$box_smarty->assign('FIELD_EMAIL', xtc_draw_input_field('email_address', '', 'class="box_login_email" maxlength="50"'));
$box_smarty->assign('FIELD_PWD', xtc_draw_password_field('password', '', 'class="box_login_pwd" maxlength="30"')); 


Auf der Loginseite kannst du jetzt die Eingabefelder über die CSS-Klasse "login" formatieren. Für die Eingabefelder in der Loginbox heissen die CSS-Klassen "box_login_email" (für das E-Mail-Feld) und "box_login_pwd" (für das Passwort-Feld)

MfG Hetfield

[SickofSociety]

Hi Hetfield, danke für die Superschnelle Hilfe, werde das gleich nach Feierabend mal testen und dann nochmal bescheid geben.
Das ist aber glaube ich, das was ich gesucht habe.
Gruß

[SickofSociety]

Funktioniert perfekt. So lassen sich die Eingabefelder perfekt ins Design einpassen.

Tausend Dank dir nochmal Hetfield

[supervisior]

Hättest du die Frage anders gestellt, dann hätte dir Hetfield ne saubere Lösung gegeben, gell Hetfield?

HTML und CSS hat in PHP Dateien eigentlich nichts zu suchen, zumindest ist es schlechter Style, weil du das ganze genauso, aber ohne die php Datei anfassen zu müssen, machen können.

[SickofSociety]

Nein das ging eben nicht, weil das Originalstylesheet nur das komplette TEXTAREA abdeckt, nicht aber einzelne Bereiche wie z.B. den Loginbereich.

Also muss ich zwingendermaßen css-Klassen definieren um einzelne Bereiche zu "gestalten"

Gruß

[supervisior]

Wo ist das Problem? Weißt du was cascadieren bedeutet? Wenn du eine isolierte Klasse brauchst, dann machst du sie dort hin wo du sie brauchst. Alls was in der Hirarchie nach oben definiert ist, spielt dann keine Rolle mehr. Es ist einfacher und sauberer als HTML Code in php Code zu verbauen.

[SickofSociety]

Nee, das weiss ich wohl nicht. Bin ja auch kein Berufscoder und mehr als ein Hobby ist es bei mir auch nicht.
Aber um neue Sachen zu lernen bin ich immer bereit.
Kannst mir mal einen Beispiel-Link posten oder vielleicht sogar ein konkretes Beispiel auf mein Problem hier geben?
Ich persönlich geb mich bei XTC mit dem Ergebnis zufrieden, weil eh nichts Valide ist.
Bei "normalen" Webseiten (XHTML und CSS) mach ich immer valide Seiten.

Gruß

[supervisior]

gib mir die Vorlage, dann zeig ich's dir

[Hetfield]

@supervisior: Klar geht das sauberer! Aber da wären wir ja wieder beim Thema: "Ferrari-Zündkerzen im Polo (INSIDER!!!)"

@SickofSociety: Was supervisior meint, will ich mal an einem kleinen Beispiel zeigen, was er dann dokumentieren kann.

Nehmen wir mal die Login-Seite und von dort jetzt mal nur den Bereich "Ich bin bereits Kunde". Im Original-Template xtc4 sieht das so aus (*schüttel*):

PHP-Code:

{$FORM_ACTION} 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="border-bottom: 1px solid; border-color: #cccccc;"  class="main"><strong>{#title_returning#}</strong></td>
          </tr>
          <tr>
            <td class="main"><p>{#text_returning#}<br /></p>
              <table width="100" border="0" cellspacing="2" cellpadding="0">
                <tr>
                  <td class="main"><strong>{#text_email#}</strong> </td>
                  <td>{$INPUT_MAIL}</td>
                </tr>
                <tr>
                  <td class="main"><strong>{#text_password#}</strong></td>
                  <td>{$INPUT_PASSWORD}</td>
                </tr>
              </table>
              <p><br /><a href="{$LINK_LOST_PASSWORD}">{#text_lost_password#}</a></p>
              <p>{$BUTTON_LOGIN}</p></td>
          </tr>
        </table>
      {$FORM_END} 


Der Quellcode ist natürlich grausam und verschwindet erstmal in der Tonne. Für Formulare wie beispielsweise dieser Login gibt es in HTML was schöneres. Also nehmen wir mal diesen HTML-Code für unseren Zweck:

PHP-Code:

{$FORM_ACTION} 
    <fieldset class="login">
        <legend>{#title_returning#}</legend>
            <p>{#text_returning#}</p>
            <label for="email_address">{#text_email#}</label> {$INPUT_MAIL}<br />
            <label for="password">{#text_password#}</label> {$INPUT_PASSWORD} <span><a href="{$LINK_LOST_PASSWORD}">{#text_lost_password#}</a></span><br />                    
            <div class="submitbutton">{$BUTTON_LOGIN}</div>            
    </fieldset>
{$FORM_END} 


Schon viel schlanker vom Code, nicht wahr? Wie du siehst, habe ich lediglich dem Element fieldset und dem div um den Button eine eigene CSS-Klasse zugewiesen. Diese zwei Klassen geben mir nun die Möglichkeit, den Login optisch per CSS zu gestalten, ganz wie es mir beliebt. So könnte das zugehörige Stylesheet aussehen:

fieldset.login { margin-top:30px; margin-bottom:30px; padding:2px; }
fieldset.login legend { color:#000; font-weight:bold; font-size:1.1em; margin-left:10px; padding:2px; }
fieldset.login label { margin-left:5px; width:220px; float:left; font-size:0.9em; font-weight:bold; cursor:pointer; }
fieldset.login p { font-size:0.8em; font-weight:bold; text-align:justify; margin:5px; }
fieldset.login span { font-size:0.7em; border-bottom:1px solid #333; }
fieldset.login input { width:200px; }
div.submitbutton input { width:auto; margin:5px;  }

Wie du jetzt sehen kannst, spreche ich die einzelnen HTML-Elemente jeweils nur innerhalb des Elements fieldset mit der Klasse "login" an.
Während diese CSS-Formatierung für alle input-Felder gelten würde:

input { width:200px; }

erreiche ich mit dieser Varaiante aus dem obigen Beispiel

fieldset.login input { width:200px; }

dass nur die Input-Felder innerhalb des Elements fieldset mit der Klasse "login" entsprechend formatiert werden ohne dem Input-feld selbst eine eigene Klasse geben zu müssen. Alle Input-Felder außerhalb bleiben davon unberührt. Und bei dieser Variante musstest du nicht an den PHP-Quellcode. Ich hoffe, dass war verständlich ausgedrückt. Bin gerade erst am Hallo-Wach-Kaffee den ich jetzt erstmal in Ruhe zu ende trinke. Den Rest oder Fragen dazu übernimmt dann supervisior!

MfG Hetfield

PS: Ich hatte auch schon das Vergnügen "professionelle Agenturen" kennen lernen zu dürfen, die nicht wussten, was ein fieldset etc. ist, geschweige denn, wie man es formatieren kann. Ich kann mich noch genau an meine Reaktion erinnern ... ( ... in der Reihenfolge)