Magento Forum

   
modern theme & css buttons mit bildern
 
Dscho
Sr. Member
 
Avatar
Total Posts:  236
Joined:  2007-10-05
Singen, Germany
 

Hallo,

ich verwende das modern Theme. Allerdings sind alle Buttons als Grafik ausgelegt.
Allerdings ist der Shop zweisprachig - wie kann ich recht einfach die Buttons in css mit
Grafik und Text umstellen?
Bei shop.jack-wolfskin.de wurde dies ja umgesetzt.

Hat das von Euch schon jemand gemacht? Bin für jeden Tipp dankbar.

Gruß
Dscho

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Hast du schon mal versucht mit der Maus über die Grafik zu fahren und dann den Dateinamen herauszufinden? Diese suchst du dann in der Haupt-CSS. Am besten per Tastaturkurzbefehl “Strg+F” alternativ bei Mac “Apfel+F”. Dann eben die Grafikverknüpfung entfernen.

Falls du Photoshop hast, gibt es da noch eine Alternative. Hast du Interesse?

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dscho
Sr. Member
 
Avatar
Total Posts:  236
Joined:  2007-10-05
Singen, Germany
 

Hallo Daniel,

danke für Dein Posting - mittlerweile habe ich mal etwas nachgeforscht.

1. Variante jack-wolfskin
Eine Grafik, aber die Aufteilung die dafür benötigt wird finde ich zu umständlich.

2. Variante http://bencosweb.com/franz/liquid_buttons_2/index.html
Gefällt mir nicht, da man 3 unterschiedliche Grafiken benötigt.

Nun habe ich meine eigene Variante entwickelt, die mit einer Grafik auskommt.
Aus Photoshop kann ich die Grafik über “für Web speichern...” in einem Schritt speichern, was zum Beispiel
bei der Variante 1 nicht funktioniert.

Das Basis CSS sieht so aus:

.button {
  float
left;
  
clearboth;
  
backgroundurl(images/bg.pngno-repeat -5px -5px
  
padding0 0 0 10px;
  
margin5px 0;
  
height46px;
}

.button a{
  float
left;
  
height40px;
  
line-height40px;
  
padding0 1px;
  
color#000;
  
font-size1.3em;
  
text-decorationnone;
}

/* Remove Firefox Borders */
.button a:focus { -moz-outline-stylenone}

.button span {
  background
url(images/bg.pngno-repeat -445px -5px;  
  
floatleft;
  
width10px;
  
height40px;
  
margin-right: -40px;
  
height45px;
}

und mit Hover-Effekt:

.button:hover span {
  background
url(images/bg.pngno-repeat -445px -60px;
}

.button:hover {
  background
url(images/bg.pngno-repeat -5px -60px;
}

Beispiel:

http://magento.tmedia-shop.de/examples/css_button/index.html

Jetzt muss man dies “nur noch” in das Tenplate integrieren wink

Image Attachments
bg.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Sieht doch gut aus. Wo ich noch etwas vorsichtig wäre ist das Format PNG. Der IE macht angeblich noch immer Probleme damit wobei dem Format absolut die Zukunft gehört wenn man sich damit mal auseinander setzt.

Hintergrundinfo: Ende der 90er hat das W3C eine Ausschreibung veräußert. Das Ziel war ein Bildformat, dass die Vorteile von JPG und Gif vereinigt. Macromedia (Ende 2005 von Adobe aufgekauft) hat das Format entwickelt und das Ergebnis kann sich mehr wie sehen lassen.

- Man kann mit Transparenzen arbeiten (Gif)
- Man kann mit einer Vielfalt von Farben arbeiten (JPG)
- Kein Qualitätsverlust beim Speichern (Gif)

Wenn dieser IE nicht wäre… grin

Das was ich vorhin mit Photoshop meinte, sind die Original PSDs die zu den Themes selber ebenfalls zum Download angeboten werden. Das sind dann Buttons inklusive der Testebenen, die man dann beliebig abändern kann.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dscho
Sr. Member
 
Avatar
Total Posts:  236
Joined:  2007-10-05
Singen, Germany
 

Hi,

danke für Deine Info - ist es nicht so, dass in Magento das PNG-Fix enthalten ist?

http://www.magentocommerce.com/boards/viewthread/25554/#When:07:49:00Z

Nun habe ich meinen CSS-Code etwas umgeschrieben und in einer meiner Entwicklungsseiten
getestet. Ausser dass der Button noch zu groß ist, funktioniert das einwandfrei. (Siehe Screenshot)
Jetzt kommt nur noch die Fleißarbeit alle .ptml Files zu bearbeiten :-(

Danke für Deine Unterstützung - Du bist hier im Forum ein treue Seele.

Viele Grüße
Dscho

Image Attachments
button.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top