Stylesheet: Shop weniger breit machen ?

[Tocker]

Hallo,

ich würde gerne den Shop in meine normale Homepage (Wordpress) einbinden welche nur eine Breite von 700px bietet. Ich habe das Standard Layout und schon die rechte Seite leer. Hab schonmal ein bischen in den Stylesheets gesucht, aber nichts gefunden wo die breite angegeben ist. Weiß da jemand was ?

 

Viele Grüße

[rumata]

Hallo,

 

es gibt die Datei

deinthema/css/grid_prestashop.css

 

darin ist das ganze Gitternetz beschrieben. In der Zeile 11 z.b. ist die Gesamtbreite definiert. Allerdings haben die Änderungen dort große Auswirkungen, denn mit der Gesamtbreite veränderst du nicht die Breite der einzelnen Elemente, es müssen an diversen Stellen noch weitere Anpassungen einzelner Elemente vorgenommen werden. MIt entsprechenden Kenntnissen geht das schon, aber bitte vorsichtig sein

 

Gruß

[Tocker]

Hallo und vielen Dank. Ich habe es nach längeren Hick Hack geschafft. Geht ja quasi gar nicht um eine gesamtgröße sondern um eine Aufteilung in verschiedene Zellgrößen.

 

Nur während der Bestellung und dem Login wird es wieder groß. Komme nicht weiter.

 

Weiß da jemand vielleicht etwas ?

 

Viele Grüße

[prestamax]

Bei solchen Fragen ist es immer hilfreich, einen Link zu posten. Das sind Sachen, die meist mit CSS zu tun haben, das kann nicht allgemein beantwortet werden, sondern ist speziell von deiner Seite abhängig. Wenn man die nicht kennt, dann kann man dazu auch schlecht einen Rat geben.

[Tocker]

Hallo. Link geht nicht weil es noch nicht online ist. Aber es geht um das Standard Theme.

[guest*]

@ Tocker - Bitte bei Fragen auch immer die Prestashopversion mit angeben. Es sind nicht alle gleich und User die dann eine andere Version verwenden suchen sich dann einen Wolf oder ändern Dinge komplett falsch.

 

Danke

[Tocker]

Hallo zusammen. Sorry, meine Version ist: PrestaShop™ 1.5.2.0

[rumata]

Hallo Tocker,

 

wie gesagt: es ist alles in der grid-Datei drin, dort ist die gesamte Aufteilung der einzelnen Zellen, und der daraus entstehenden Gesamtbreite. Der einfachste Weg ist es, mit Firebug, der dem Firefox nativen Web developer (die Werkzeuge von Chrome und IE kann man in die Tonne treten, aber zur not geht das damit auch) die die Breite anzeigen zu lassen.

 

inder Zeile 51 der genannten Datei wird eigentlich die Gesamtbreite geregelt, auch für den Bestellberich geregelt. aber du musst proportional auch die anderen grids einstellen. Also wenn deine Gesamtbreite (grid_9) 700 statt 980 ist, sollte z.b. grid_5 nicht mehr 757px sondern ca. 500 betragen, also ein Dreisatz ausrechnen.

 

Leider gibt es im gesamten Shop aber trotzdem Elemente, die feste Breiten haben und sich nicht relativ zu den grids verhalten. Diese kann man aber alle mittels Firebug anpassen, ist aber schwer, das "blind" im Forum zu machen, da musst du schon den Link posten, damit man einen Blick reinwerfen kann

 

 

Gruß

[guest*]

Anmerkung für diejenigen, die nicht das Default Theme verwenden:

Bei responsive Themes (z.B. mit theme Maker erstellt) gibt es diese Datei nicht. Bitte Anpassungen direkt beim Designer erfragen.

[Tocker]

Danke für die Antworten. Also ich glaube ich habs ja schon ganz gut hinbekommen. Nur der Warenkorb wird einfach nicht schmahl und bleibt zu breit. Finde den nicht in den CSS Dateien.

 

Meine Grid sieht so aus - hab ich ein Fehler drinnen ?

 

/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_9 {
margin:0 auto;
width: 700px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9 {
display:inline;
float: left;
position: relative;
margin-right: 20px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* Grid >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .grid_1 {width:60px;}
.container_9 .grid_2 {width:160px;}
.container_9 .grid_3 {width:240px;}
.container_9 .grid_4 {width:320px;}
.container_9 .grid_5 {width:400px;}
.container_9 .grid_6 {width:480px;}
.container_9 .grid_7 {width:560px;}
.container_9 .grid_8 {width:640px;}
.container_9 .grid_9 {width:580px;}

/* Prefix Extra Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .prefix_1 {padding-left:80px;}
.container_9 .prefix_2 {padding-left:160px;}
.container_9 .prefix_3 {padding-left:240px;}
.container_9 .prefix_4 {padding-left:320px;}
.container_9 .prefix_5 {padding-left:400px;}
.container_9 .prefix_6 {padding-left:480px;}
.container_9 .prefix_7 {padding-left:560px;}
.container_9 .prefix_8 {padding-left:640px;}

/* Suffix Extra Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .suffix_1 {padding-right:80px;}
.container_9 .suffix_2 {padding-right:160px;}
.container_9 .suffix_3 {padding-right:240px;}
.container_9 .suffix_4 {padding-right:320px;}
.container_9 .suffix_5 {padding-right:400px;}
.container_9 .suffix_6 {padding-right:480px;}
.container_9 .suffix_7 {padding-right:560px;}
.container_9 .suffix_8 {padding-right:640px;}

/* Push Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .push_1 {left:80px;}
.container_9 .push_2 {left:160px;}
.container_9 .push_3 {left:240px;}
.container_9 .push_4 {left:320px;}
.container_9 .push_5 {left:400px;}
.container_9 .push_6 {left:480px;}
.container_9 .push_7 {left:560px;}
.container_9 .push_8 {left:640px;}

/* Pull Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .pull_1 {left:-80px;}
.container_9 .pull_2 {left:-160px;}
.container_9 .pull_3 {left:-240px;}
.container_9 .pull_4 {left:-320px;}
.container_9 .pull_5 {left:-400px;}
.container_9 .pull_6 {left:-480px;}
.container_9 .pull_7 {left:-560px;}
.container_9 .pull_8 {left:-640px;}

/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
/*clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;*/
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix { display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
*/