Button

[Thunder]

Hallo zusammen,

Presta 1.5.4.1

ich möchte gerne die rechteckigen Button so haben,das die Ecken abgerundet sind.

Es sind die Buttons ,wo zb Neue Produkte steht oder Verkaufshits usw.

Im Grunde möchte ich das Layout ändern mit anderen Buttonformen....Das Template an sich soll bleiben wie es ist.

Danke im vorraus.

[Luca]

Hallo Thunder,
herzlich willkommen im Forum.

ich möchte gerne die rechteckigen Button so haben,das die Ecken abgerundet sind.

Das ist so eine Frage, bei der ich gar nicht weiß auf welchem Niveau ich antworten soll.
Man kann auf mehrere Arten Ecken rund machen. Eine Möglichkeit ist, es über css 3.0 umzusetzen. Eine weitere, Grafiken einzubinden. Css 3.0 verstehen nicht alle Browser gleich, man muß also für die verschiedenen Browser unterschiedliche Codes in die css schreiben. Ältere Browser verstehen kein css3.0 und der Iceweasel für Linux auch nicht. Grafiken haben den Nachteil, dass für jede Grafik in der Regel eine Serveranfrage läuft, was Ladezeiten kostet. Hier muß man an einer gut durchdachten Grafikstruktur arbeiten, um gute Seitengeschwindigkeiten im Vergleich zur Informationsmenge hin zu bekommen.

Die von Dir angesprochenen Bereiche "Neue Produkte" oder "Verkaufshits" sind keine Buttons, sondern Links, deren p-Tag mit einem Hintergrund eingefärbt sind. Das dazugehörige css findest Du für die Prestashop Version 1.5.4.1 und das default Thema in der global.css ab Zeile 292.

Mit welchen Werkzeugen arbeitest Du um zu codieren? Das zu wissen wäre bei weiteren Fragen hilffreich.
Viele Grüße

[Thunder]

Lieben Dank für die Antwort.

Ich Arbeite mit dem HTML Kit. Da ich noch nie mit css gearbeitet habe und es auch Neuland für mich ist, fuchse ich mich durch die einzelnen Seiten um zu verstehen wie in Presta was funktioniert und wo es steckt. Schaue auch im Google Chrome unter "Element untersuchen" um zu finden was ich möchte. Habe mir das Template Graphileom THGR 27O im Prestashop herunter geladen. So möchte ich es gerne haben....die p-Tag. Anbei dieser Link zum schauen wie ich es meine. http://www.freeprestathemes.com/page/4/ dort sind die p-tag´s abgerundet.

Probiere viel im css aus um es hinzubekommen. Bin aber nicht so Profisionell wie Ihr...hier erstmal mein Respekt zu dieser Arbeit.

Freue mich auf eine baldige Antwort und verbleibe MFG

[Thunder]

Ich ncohmal.... hier der Link zu besseren schauen. http://www.graphileom.fr/demo1.5/thgr00027o/index.php Alles was orange ist ist abgerundet. So würde ich es mir wünschen.

MFG

[Luca]

Hallo Thunder,

Ich Arbeite mit dem HTML Kit.

ok, den kenne ich nicht. Scheint aber soweit gut zu sein. Wenn Du im Prestashop etwas am Design ändern möchtest kannst Du Dich im wesentlichen auf den oder die Themenordner im Ordner /themes beschränken. Hier findest Du die angepassten tpl-Dateien, Javascripte und css Dateien. Die tpl-Dateien sind smarty-Templates. Hier kommst Du gut mit html Wissen und Grundwissen in einer ablauforientierten Programmiersprache aus. In diesem Zusammenhang ist ein p-Tag eine Absatzmarkierung in html. Tag - im Sinne von "Markierung/Kennzeichen" - ist ein html Element z.B. wie hier zur Textstrukturierung. Gundlagen zu html werden auf der Seite Selfhtml sehr gut vermittelt.

Einfach ausgedrückt weißt man dann mit Hilfe von css z.B. html-Tags ein besonders aussehen zu. Das könnte man auch direkt im jeweiligen Tag mit der Anweisung "style", aber dann müßte man bei gleichen Tags den Style immer wiederholen. Css hat eine eigene Struktur, die darauf ausgelegt ist, html-Tags möglichst effizient ein bestimmtes Aussehen zu verleihen. Nähere Informationen dazu findest Du auch hier unter Stylesheets. In Deinem Beispiel wir mit Hilfe von css z.B. der html-Tag h4 (h steht für Head also hier die Überschrift der 4. Kategorie) folgender css-Code zugewiesen.

Code: [Auswählen]

.block h4 {
    background: none repeat scroll 0 0 #FC610A;
    border-radius: 17px 17px 0 0;
    color: #FFFFFF;
    font-size: 12px;
    padding: 6px 11px;
    text-shadow: 0 1px 0 #000000;
    text-transform: uppercase;
}
Das bedeutet im Groben:
block für die übergeordnete Klasse.
h4 für den html Tag
background Farbe und Verhalten
border-radius macht hier die oberen Ecken mit einem Wert von 17px rund
color ist die Schriftfarbe
font-size ist die Schriftgröße
padding ist der Abstand 6px oben und unten 11px rechts und links
text-shadow definiert einen Schattenschlag im Text
text-transform ist eine Ausrichtung

wenn Du diesen css nun für den entsprechenden p Tag des default Template anpasst, hast Du runde Ecken.
Viele Grüße

[Thunder]

Herzlichen Dank für die erstklassige Ausführung. Werde ich umsetzen so wie von Dir beschrieben. Ist immer wieder schön mit Profis zu Arbeiten.

Danke und einen schönen Abend noch.

LG