Jump to content
xt:Commerce Community Forum

Eingabefeldern und SELECT Klassen zuweisen

SickofSociety

By SickofSociety,
in Template System

Recommended Posts

SickofSociety Newbie

SickofSociety

Posted
Posted

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

Link to comment
Share on other sites
Hetfield Newbie

Hetfield

Posted
Posted

In der login.php nach folgendem suchen:

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

$smarty->assign('INPUT_PASSWORD', xtc_draw_password_field('password'));[/php]

und gegen dies hier ersetzen:

[php]$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:

$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"'));[/php]

und gegen diesen ersetzen:

[php]$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 :cool:

Link to comment
Share on other sites
supervisior Newbie

supervisior

Posted
Posted

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

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.

Link to comment
Share on other sites
supervisior Newbie

supervisior

Posted
Posted

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.

Link to comment
Share on other sites
SickofSociety Newbie

SickofSociety

Posted
  • Author
Posted

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ß

Link to comment
Share on other sites
Hetfield Newbie

Hetfield

Posted
Posted

@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. :P

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*):

{$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}    [/php]

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]{$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;  }[/html]

Wie du jetzt sehen kannst, spreche ich die einzelnen HTML-Elemente jeweils nur innerhalb des Elements [b]fieldset [/b]mit der Klasse "login" an.

Während diese CSS-Formatierung für alle input-Felder gelten würde:

[html]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! :P

MfG Hetfield :cool:

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 ... :eek::confused::mad::) ( ... in der Reihenfolge)

Link to comment
Share on other sites
  • 2 weeks later...
kid474 Newbie

kid474

Posted
Posted

Ich muss das grad mal aufgreifen ... Habe grad ein grässliches Tabellen-Template barrierefrei umgeschrieben, was mir dabei leider übel aufgestoßen ist, das irgendwie _kein_ einziges Formularfeld mit einer ID versehen ist. Dein Code (und meiner natürlich auch):

<label for="email_address">{#text_email#}</label> {$INPUT_MAIL}<br />[/HTML]

validiert mit dem Attribut "for" nicht und ist auch keinem Formularfeld zugeordnet. Ich musste also in allen zugehörigen PHP-Dateien die id-Atrribute ergänzen, damit man auch valide Seiten bekommt:

[PHP]$smarty->assign('INPUT_MAIL', xtc_draw_input_field('email_address', '', 'id="email_address"'));[/PHP]

Das sollte in zukünftigen Versionen unbedingt berücksichtigt werden!

Link to comment
Share on other sites
kid474 Newbie

kid474

Posted
Posted

Ich hatte mir dazu die Funktionen zur Generierung der Eingabefelder-Felder (input, select, textarea etc., im Ordner inc zu finden;)) angepasst. Ist nicht soviel Arbeit und man behält den Überblick.

Eine sehr gute Idee! Das werd ich wohl auch noch so machen, hab ja noch die diff-Files zum zurückpatchen... Bei den xtc_draw_*_field() Funktionen hab ich mich sowieso schon "rumgetrieben" um die Parameterreihenfolgen zu erforschen.

Link to comment
Share on other sites
  • 8 months later...
unknownstyle Newbie

unknownstyle

Posted
Posted

Ich hatte mir dazu die Funktionen zur Generierung der Eingabefelder-Felder (input, select, textarea etc., im Ordner inc zu finden;)) angepasst. Ist nicht soviel Arbeit und man behält den Überblick.

Sieht dann im Ergebnis ungefähr so aus: http://www.berges-rohrverbinder.de/create_account.php

MfG Hetfield :cool:

Dann müsst ihr aber darauf achten, dass die jeweiligen IDs nur einmal auf der Seite erscheinen, sonst ist es auch kein valides HTML mehr.

Beispiel:

Links ist die $box_LOGIN und man befindet sich aber auch auf der Seite login.php.

Dann gäbe es zwei input felder mit der id="email_adress"..

Also bevor es zu unnötigen Fehlern kommt, würde ich an die ID für jeden namen einen Zähler hängen. Ich hab das zB. in der "xtc_draw_input_field.inc.php" so gelöst:

function xtc_draw_input_field($name, $value = '', $parameters = '', $type = 'text', $reinsert_value = true) {

	if(!$GLOBALS['inputfield_id']) $GLOBALS['inputfield_id']=array();

	if($GLOBALS['inputfield_id'][$name]) {

		$GLOBALS['inputfield_id'][$name]++;

	} else {

		$GLOBALS['inputfield_id'][$name]=1;

	}

	$field = '<input type="' . xtc_parse_input_field_data($type, array('"' => '"')) . '" name="' . xtc_parse_input_field_data($name, array('"' => '"')) . '" id="'.$name.'_'.$GLOBALS['inputfield_id'][$name].'"';


//...[/PHP]

Link to comment
Share on other sites
supervisior Newbie

supervisior

Posted
Posted

Wenns nur um die Formatierung geht, brauchts weder das eine noch das andere, also auch keine eindeutigen Bezeichner für irgendwelche form Elemente. CSS == Cascading Stylesheet, also warum im PHP Code herumwühlen, wenns mit CSS und ohne Bezeichner so einfach geht....

Link to comment
Share on other sites
unknownstyle Newbie

unknownstyle

Posted
Posted

Ahh danke, daran hatte ich noch garnicht gedacht :rolleyes:

Ich machs halt immer zu umständlich :D

@ supervisior

Es geht ja nur um die labels.. Die IDs der einzelnen inputs kommen bei mir garnicht im CSS vor. Es ist nur benutzerfreundlicher labels vor die dazugehörigen input-felder zu setzen.

Link to comment
Share on other sites
  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...