Hallo miteinander,
ich habe in einer less die CSS-Styles eingebaut, die ich für die Einkaufswelt auf der Startseite benötige. Dort werden die Styles auch korrekt angezeigt. Kopiere ich nun diese Einlaufswelt und lasse sie in einer Kategorie anzeigen, dann funktionieren die CSS-Anpassungen plötzlich nicht mehr.
Daher die Frage: Muss für eine Einkaufswelt auf einer Kategorienseite, der CSS-Code in einer anderen less eingebunden werden?
Danke für Eure Hilfe
Sijandi
Ich glaube schon weil die startseite nicht als kategorie gilt. Das ist die home.less
Nein, die CSS-Anweisungen müssen nicht in eine andere Less-Datei eingebaut werden. Die unterschiedlichen Less-Dateien dienen nur der Übersichtlichkeit. Im Endeffekt werden dieses vom Compiler einfach hintereinander in eine Datei kopiert. Es kann also sein, dass man mit einer zweiten eigenen Less-Datei die Anweisungen einer vorherigen Less-Datei im eigenen Theme überschreibt. Das ist der einzige Punkt, den es bezüglich CSS-Anweisungen in unterschiedlichen Less-Dateien zu beachten gilt.
Die verwendeten Selektoren müssen so gewählt werden, dass diese in Kategorien und auf der Startseite greifen. Das kann man durchaus steueren.
Nein, die CSS-Anweisungen müssen nicht in eine andere Less-Datei eingebaut werden. Die unterschiedlichen Less-Dateien dienen nur der Übersichtlichkeit. Im Endeffekt werden dieses vom Compiler einfach hintereinander in eine Datei kopiert. Es kann also sein, dass man mit einer zweiten eigenen Less-Datei die Anweisungen einer vorherigen Less-Datei im eigenen Theme überschreibt. Das ist der einzige Punkt, den es bezüglich CSS-Anweisungen in unterschiedlichen Less-Dateien zu beachten gilt.
Die verwendeten Selektoren müssen so gewählt werden, dass diese in Kategorien und auf der Startseite greifen. Das kann man durchaus steueren.
Hallo Hth,
das wird es demnach vermutlich sein, ein paar Styles werden durchaus übernommen, aber Margin, Padding und Shadow zum Beispiel nicht. Könntest du erläutern wie das mit den Selektoren gemeint ist? Der entsprechende CSS Code sieht aktuell so aus.
.content--home{
.unitize(margin-top,15);
// ekw element with dropshadow
.has--dropshadow{
// boxes drop shadow
&:after{
display:block;
position:absolute;
width:100%;
height:15px;
content:'';
left:0;
background-image:url('../../img/backgrounds/bg_startpage_content_big.png');
background-repeat:no-repeat;
background-size:100% 15px;
}
}
.home--banner-slider{
padding-left:0px !important;
.emotion--banner-slider{
display:inline-block;
&:after{
display:block;
position:absolute;
width:100%;
height:15px;
content:'';
bottom:0;
left:0;
background-image:url('../../img/backgrounds/bg_startpage_content_big.png');
background-repeat:no-repeat;
background-size:100% 15px;
}
.banner-slider--container{
margin:16px;
width: 98.5% !important;
}
}
}
.cat-teaser--box{
position:relative;
&:after{
width:calc(100% - 5px);
left:15px;
}
.emotion--html{
.unitize-padding(3,3,10,3);
.unitize(height,240);
overflow-Y:hidden;
.html--content{
.displayflex(flex,column,wrap,center,start,start);
width:100%;
}
h3 {
.unitize(font-size,14);
.unitize(height,35);
.unitize(line-height,18);
.unitize-margin(5,0);
//border: 1px solid;
width: 100%;
display: inline-block;
text-align:center;
text-transform: uppercase;
@media screen and (min-width:@tabletLandscapeViewportWidth){
text-align:left;
}
}
a{
color:@brand-primary;
display:inline-block;
&:hover{
color:darken(@brand-secondary,10%);
}
}
.img{
float:left;
width:100%;
//width: calc(100% + 25px);
img{
display:block;
margin:0 auto;
}
}
.txt{
width:100%;
}
.txt-inner{
.displayflex(flex,column,wrap,start,start,start);
.unitize-padding(0,10);
width:100%;
.dot-ellipsis{
.unitize-height(75);
overflow: hidden;
.readmore{
display:none;
}
&.is-truncated{
.readmore{
display:block;
}
}
}
}
}
}
.home--new-products,
.home--facebook{
&:after{
width:calc(100% - 5px);
left:15px;
}
.emotion--html{
.unitize-padding(15,15);
background:#FAFAFA;
overflow:hidden;
h3{
margin:0;
.unitize(font-size,14);
}
p{
.unitize(line-height,20);
}
a{
color:@brand-primary;
display:inline-block;
&:hover{
color:darken(@brand-secondary,10%);
}
}
[class*="tinymce-editor-image"]{
display:inline-block;
float:left;
.unitize(margin-right,10);
}
}
}
.home--seo-text{
.emotion--html{
.unitize-padding(15,15);
a{
color:@brand-primary;
display:inline-block;
&:hover{
color:darken(@brand-secondary,10%);
}
}
[class*="tinymce-editor-image"]{
display:inline-block;
float:left;
.unitize(margin-right,10);
}
}
}
}
Schau Dir einfach mal mit den DEV Tools die genauen Pfade an…, dann wirst Du schnell feststellen, woran das liegt.
Hallo @Drachenhort !
Die Anweisungen des geposten Less-Codes greifen ausschließlich auf der Startseite, da diese alle „über“ .content–home definiert werden (1. Zeile). Falls irgendeine der Änderungen auf der Kategorieseite greift, dann nur weil die Kombination der CSS-Selektoren einen höheren Hierachielevel bedingt als die Shopwarestandard-Definitionen an dieser Stelle.
content–home ist eine Container-Klasse auf der Startseite, die gibt es nicht in Kategorielistings - deswegen auch das home im Namen.
Viele Grüße
Hallo Hth,
alles klar, verstehe. Dann macht es ja eigentlich nicht viel Sinn die Styles mit .content–home zu bezeichnen, da ich diese nicht nur auf der Startseite verwenden möchte. Hast du mir einen Ansatz wie ich dies für alle Einkaufswelten (egal ob Startseite oder Kategorie) benennen müsste?
Gruss
Sijandi