Shop front bearbeiten

[Torsten67]

Guten Abend

 

wie kann Ich den Shop breiter gestalten und farblich anpassen..Ist mir zuviel Weiss drin,,

danke für jeden hinweis

 

Gruss

Torsten

[*guest]

Hier werden Programmierkenntnisse in CSS vorausgesetzt. Alles was du dazu benötigst, findest du unter /themes/default/css - global.css.

 

Ohne Programmierkenntnisse, kann ich dir den Theme Maker empfehlen: http://presta-theme-maker.com

[Whiley]

Hallo Thorsten,

 

alles kein Problem. Zuerst mal die Shopverbreiterung:

Du öffnest in einem Editor (vorzugsweise notepad++, wenn du den nicht hast bekommst du ihn hier) zuerst die Datei (ich unterstelle mal du arbeitest mit dem default-theme / ansonsten eben analog vorgehen):

 

/themes/default/css/grid_prestashop.css

 

Dort findest du ca bei Zeile 11

 

.container_9 {
    margin:0 auto;
    width: 980px;

 

Sagen wir du möchtest den Shop um 100 pixel verbreitern, dann änderst du den width-Wert auf 1080, sieht dann also so aus:

 

 

.container_9 {
    margin:0 auto;
    width: 1080px;

 

in der gleichen Datei findest du ca bei Zeile 41:

 

/* Grid >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .grid_1 {width:91px;}
.container_9 .grid_2 {width:202px;}
.container_9 .grid_3 {width:313px;}
.container_9 .grid_4 {width:424px;}
.container_9 .grid_5 {width:535px;}
.container_9 .grid_6 {width:646px;}
.container_9 .grid_7 {width:757px;}
.container_9 .grid_8 {width:868px;}
.container_9 .grid_9 {width:980px;}
 

 

Hier erhöhst du die Werte bei grid_5 und grid_9 ebenfalls um die 100 Pixel, sieht dann so aus:

 

/* Grid >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .grid_1 {width:91px;}
.container_9 .grid_2 {width:202px;}
.container_9 .grid_3 {width:313px;}
.container_9 .grid_4 {width:424px;}
.container_9 .grid_5 {width:635px;}
.container_9 .grid_6 {width:646px;}
.container_9 .grid_7 {width:757px;}
.container_9 .grid_8 {width:868px;}
.container_9 .grid_9 {width:1080px;}
 

 

Die Datei kannst du speichern und ev übertragen.

 

Als nächstes öffnest du die folgende Datei:

/modules/blocktopmenu/css/superfish-modified.css

 

Dort findest du ca bei Zeile 15:

 

 

.sf-menu {
    margin: 10px 0;
    padding:0;
    width:980px;

 

 

 

Analog die 980 wieder auf 1080 ändern:

 

 

.sf-menu {
    margin: 10px 0;
    padding:0;
    width:1080px;

 

Speichern und ev. übertragen.   FERTIG

 

Das Ganze sieht etwas kompliziert aus aber im Grunde hast du nur 4 Zahlen (oben rot markiert) übertippt!!!

 

Wenn du dir deinen verbreiterten Shop anschauen möchtest solltest du unbedingt vorher im BO

Erweterte Einstellungen --> Leistung --> Smartcache löschen und den Button bei SmartyCache Kompilieren erzwingen aktivieren und speichern (später wieder rückgängig machen). Nach dem Aufruf deines Shops im Browser die F5 Taste drücken.

 

Grüsse Whiley

 

PS Das mit der Farbe kommt gleich - der Beitrag wird sonst so lang.

[Whiley]

 

...und farblich anpassen..Ist mir zuviel Weiss drin,,

 

Am meisten bringt es ja dann den Hintergrund einzufärben:

 

Du öffnest mit deinem Editor die Datei:

 

themes/default/css/global.css

 

Ca bei Zeile 56 findest du:

 

body{

    font:normal 11px/14px Arial, Verdana, sans-serif;

    color:#222;

    background:#FFF;

}

 

 

Der Hex-Farbwert hinter background bestimmt die Shophintergrundfarbe. Änderst Du das z.B. so:

 

 

body{

    font:normal 11px/14px Arial, Verdana, sans-serif;

    color:#222;

    background:#f8bfcb;

}

wird der Hintergrund in Marzipan-Rosa gefärbt.

 

 

Möchtest du den Mittelteil des Shops wieder andersfarbig (z.B. Pastell-Gelb) fügst du am Ende der global.css folgendes ein:

 

 

#header, #columns, #footer {background:#fdfdc9; }

 

Die Farbwerte kannst du zB.  hier  ablesen.

 

Grüsse

Whiley

[Torsten67]

Guten Abend 

 

Danke füe den guten und ausführlichen Tip , werde es Morgen gleich umsetzen.

Noch einen schönen 2.Advent

Gruss

Torsten