MODUL: CSS-Buttons

[msfrog]

Hat niemand einen Hinweis, wo ich einsteigen muss, wenn ich reine Textbuttons haben will?

[hedon02]

  Du kannst doch die "xtc_css_button.inc.php" dieses Moduls anpassen, das scheint mir der einfachste Weg.

Gruss

[msfrog]

Hallo hedon,
das hab ich gestern mal gemacht, allerdings bekomme ich auch damit die spans nicht völlig weg. Mir fehlt da noch eine Möglichkeit, den a- und den input-Tags eine Klasse mitzugeben. Aber wo finde ich das? In der inc\xtc_image_button.inc.php und der inc\xtc_image_submit.inc.php?

[hedon02]

Ah Du hast recht, ich erinnere mich. Nur den "button"-Elementen konnte direkt eine Klasse zugewiesen werden, nicht jedoch Standard-links. Diese müsstest Du in den entsprechenden Seiten einzeln vornehmen für jeden "link".

Die Lösung mit einem "span" ist da einfach die beste Variante. Das ist valide und gibt Dir mehr Möglichkeiten zum stylen.

Grüsse

[msfrog]

Hallo hedon,
hm... Dann muss ich zumindest eine Variante finden, in der die Submit-Buttons für die Suche oder das Einloggen kein span und dafür eine Klasse bekommen. Ich werd mich nochmal damit beschäftigen.

Generelle Frage: Ist denn irgendwann mal angedacht, das Template-System zu überarbeiten? Derzeit sind ja viele Sachen im Core verteilt, wie eben z.B. die GIF-Buttons oder auch diverse font-Tags, die wohl noch aus Urzeiten stammen... Mir ist klar, dass das ziemlich viel Arbeit wird und vermutlich alte Templates inkompatibel werden. Nötig wäre es aber trotzdem, oder?

[Matt]

hm... Dann muss ich zumindest eine Variante finden, in der die Submit-Buttons für die Suche oder das Einloggen kein span und dafür eine Klasse bekommen. Ich werd mich nochmal damit beschäftigen.

Mal ganz blöd gefragt: Wenn das, wie du selbst schreibst, ein Button ist, warum willst du dann nicht <button> benutzen? Es wäre der semantisch korrekte Tag und auch aus a11y-Sicht die bessere Wahl...

[noRiddle (revilonetz)]

@msfrog
Egal was du da umbauen möchtest.
Denke daran, daß das button-Element nicht in jedem Browser gleich reagiert, bzw. nicht die gleichen Werte übermittelt werden wenn es ein button type="submit" ist (IE).

Es führt auch in einigen Browsern zu Problemen wenn sich zwei button auf ein und derselben Seite befinden innerhalb eines form-tags (z.B. Warenkorb).
Wenn dann Link-Buttons, die also type="button" haben, zusammen mit button type="submit" vorkommen, sendet auch der erstgenannte das Formular ab.

Es ist also sinnvoll button- und a-Elemente zu nutzen, erstgenannte für submit, zweitgenannte für Links.
Dabei sind eingebettete span-tags sinnvoll um Icons unterzubringen und um besser stylen zu können.
Du wirst es lediglich mit a-tags für die zweite Kategorie Buttons nicht hinbekommen sie browserübergreifend gleich (oder annähernd gleich) zu stylen.
Das dürfte das sein was Matt dir sagen wollte.

Gruß,
noRiddle

[msfrog]

Erstmal vermeide ich button-Tags speziell als Submit-Button. Ich habe die deswegen durch <input type="submit"> ersetzt. Das funktioniert auch.

Die span-Tags benötige ich ganz einfach nicht. Die Links bekommen keine Icons, nur Text. Dazu eine Hintergrundfarbe, fertig. Das klappt in jedem Browser problemlos, selbst der olle IE6 hat damit kein Problem.

[web0null]

Wenn du keine span´s willst, musst du doch einfach alle xtc_image_button(..) suchen und die umschließenden a-tags mal mit einer Klasse versehen, dann kannst du sie ja stylen wie du willst, und die Funktion xtc_image_button(..) löschen, oder umbauen damit sie dir nur den Text liefert.

Genau aus diesem Grund, weil das ja nicht gerade wenig Buttons sind, und ein größerer eingriff wäre, habe ich das eben mit diesem "Modul" gelöst, ...das man ja auch abspecken könnte, wenn man nur den Text braucht.

Und für die submit´s könntest du auch die original Funktion direkt umschreiben.

Aber es ist halt ein größerer eingriff (zu mindestens bei den a-tags), den man bei jedem Update wieder machen muss.

[msfrog]

So, ich habs hinbekommen... Die a-Tags enthalten nun nur noch ein einziges span, damit kann ich leben. Die Submit-Buttons sind inputs und haben eine eigene Klasse, spans sind keine mehr drum herum.

[noRiddle (revilonetz)]

Also doch noch ein span-tag innerhalb...
Und wie sieht es browser-übergreifend mit dem Style aus ?
Ich wette, daß es da gravierende Unterschiede gibt, insbesondere was das input-tag anbelangt (z.B. Opera und IE 7 - 8, evtl. auch IE 9).

Gruß,
noRiddle

[msfrog]

Die Unterschiede liegen (wie erwartet) darin, dass die älteren Browser border-radius nicht kennen und entsprechend alles viereckig ist. Ansonsten bestehen die Buttons wie schon geschrieben lediglich aus einer Hintergrundfarbe, Textfarbe und Innenabstand, das funktioniert auf allen Browsern mit wenig Unterschieden. Den Browsern, die noch keine Transitions kennen, fehlt auch der animierte Übergang der Hintergrundfarbe beim Hovern. Das ist aber alles unkritisch.

[JackBauer]

Habe das Ganze in 1.6 eingebaut, funktioniert bestens. Vielen Dank an web0null!

[TeeBlume]

Hallo zusammen,

ich habe in meiner product_navigator.html anstelle der texte buttons eingebaut. Das sieht so aus:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="product_navigator"}
<div class="productnavigator">
{*Anzeige mit text*}
<!--
{#product#}&nbsp;<strong>{$ACTUAL_PRODUCT}&nbsp;{#of#}&nbsp;{$PRODUCTS_COUNT}</strong>&nbsp;{#total#}<br>
{if $FIRST!=''}<a href="{$FIRST}">{#first#}</a>&nbsp;|&nbsp;{/if}
{if $PREVIOUS!=''}<a href="{$PREVIOUS}">{#back#}</a>&nbsp;|&nbsp;{/if}
{if $NEXT!=''}<a href="{$NEXT}">{#next#}</a>&nbsp;|&nbsp;{/if}
{if $LAST!=''}<a href="{$LAST}">{#last#}</a>&nbsp;|&nbsp;{/if}
-->
{*Navigation mit button*}

{#product#}&nbsp;<strong>{$ACTUAL_PRODUCT}&nbsp;{#of#}&nbsp;{$PRODUCTS_COUNT}</strong>&nbsp;{#total#}<br>

{if $PREVIOUS!=''}
        <a href="{$PREVIOUS}"><img src="{$tpl_path}buttons/{$language}/button_prev.gif" alt="" style="" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
{/if}
{if $NEXT!=''}
        <a href="{$NEXT}"><img src="{$tpl_path}buttons/{$language}/button_next.gif" alt="" style="" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
{/if}
{if $LIST!=''}
    <img src="{$tpl_path}img/pixel_trans.gif" alt="" style="" width="50" height="5" /> {* Abstandhalter *}
        <a href="{$LIST}"><img src="{$tpl_path}buttons/{$language}/button_return_to_product_list.gif" alt="zur Liste" style="" /></a>  
{/if}
</div>

Jetzt möchte ich anstelle der GIF-buttons natürlich auch hier die css-buttons einbauen.
Hat jemand einen Tipp, wie ich bspw.  'button_back_gif' aus der xtc_css_button.inc in die product_navigator.html einbaue?

Danke
TeeBlume

aktueller Shop 1.06 rev 4642

[bdb.de]

Habe jetzt alle Seiten durchgelesen nur finde ich leider keine Lösung..

Kann mir vielleicht zufällig jemand auf die schnelle sagen was falsch lief?
Manche Buttons funktionieren, andere sind nur noch Textlinks (siehe Bild)

Shopversion 1.06 und Modulversion 2.04
Bis jetzt nichts in den Moduleinstellungen verändert.

edit--- Problem gelöst.. Cache leeren vergessen