XT:C 5 Design anpassen

[alfredooo]

Nachdem ich die xt:Commerce 5.0.0 - Beta 1 teste und ein paar Designänderungen machen möchte, wüsste ich gerne wo die gemacht werden. Bis XT:C 42 war das ohne Probleme möglich. Bei einem Upgrate auf die neuere Version möchte ich solche Anpassungen auch selber machen.

 

MfG

[jwinkel]

Da bin ich dabei. Speziell eine kurze Doku zu css und den .less Komponenten wäre sehr hilfreich.

[xt:Commerce]

Das XTC 5 Template verwendet less für die Erzeugung der css files (http://lesscss.org/).

Du hast 2 Möglichkeiten, das ganze ist auch simpel

1) einzelne bestehende Regeln der Template.css über die stylesheet.css zu überschreiben (mit fertigem css) - bei kleinen änderungen, und somit immer kompatibel mit dem standardtemplate zu bleiben (wichtig wenn man regelmäßig die libraries aktualisiert) oder

2) LESS Syntax in zb less/Layout.less direkt zu bearbeiten, und dann mit einem LESS compiler neue CSS Files zu erzeugen. 

Hierzu im Compiler einfach die Template.less (nur diese, da hier alle anderen referenziert sind) auswählen, und es wird eine neue Template.css generiert.

Compiler gibt es einige (kann auch jede IDE), ansonsten Standalone wie Winless (http://lesscss.org/usage/#guis-for-less-windows) 

Das less macht das Template auch bei anpassungen einfacher zu pflegen, da du zb alle variablen inhalte in Layout.less hast (Farben etc) und sich dort dann durch einzelne anpassungen (zb @brand-primary und @brand-secondary) vieles automatisch an diese Farben anpasst.

 

[alfredooo]

Vielen Dank fürs Erste

Das Design passt im Großen und Ganzen, es geht um kleine Anpassungen.

Schön langsam kommt der Durchblick. Mich hat im ersten Moment die Warnung in der Template.css abgeschreckt.

MfG

[alfredooo]

Fluch oder Segen

Ich würde gerne der top-search im header-top einen border-radius gönnen. Layout.less, Mixins.less, nirgendwo möglich? Die anderen 90 less Dateien aus dem Odner bootstrap sind ja tabu?

Wann kommt die Finale Version 5 entgültig auf den Markt?

[Alex@4tfm]

14 hours ago, alfredooo said:

Fluch oder Segen

Ich würde gerne der top-search im header-top einen border-radius gönnen. Layout.less, Mixins.less, nirgendwo möglich? Die anderen 90 less Dateien aus dem Odner bootstrap sind ja tabu?

Wann kommt die Finale Version 5 entgültig auf den Markt?

Das kannst du ja auch ohne less machen. Kannst ja individuelle Styles einfügen.

[alfredooo]

Habe bis jetzt alles in Less gemacht und das erste Versuchstemplate währe soweit mal fertig (verändert). Der border-radius ist bis jetzt das Einzige was nicht funktioniert hat.

[swinde]

In der Variables.less

/**
* BORDER RADIUS
*/
@border-radius-base: 10px;

setzen.?

in der Layout.less gibt es für #header 

&.top-search {
    @media (min-width: @grid-float-breakpoint) {
        .input-group {
            .form-control,
            .input-group-addon,
            .input-group-btn .btn {
                .input-lg();
                border-radius:@border-radius-base; 
//input-lg() überschreiben oder ganz löschen
            }
            
        }
    }
}

Das Mixin kommt aus Bootstrap.

@administrator danke für den Tipp mit dem Windows Compiler

 

[Ravemaster]

Könnt Ihr mir sagen wo man z.B. die Farbe definiert:

@gray-dark finde ich in keiner Less Datei

anstatt grau würde ich weiß verwenden wollen @white gibt es aber nicht , wo kommen diese Werte her?

Habe schon mal gegooglet aber nur was von einer theme.php gefunden welche ich aber nicht finde.

Kleiner Tipp wäre nett.

[jwinkel]

Es gibt zwei variables.less Dateien, in denen die Definitionen u.a. der Farben gemacht werden:

templates\xt_responsive\components\bootstrap\less\variables.less

und

templates\xt_responsive\less\Variables.less

Ich würde an ersterer nicht herumschrauben.

white kannst Du ohne @ benutzen (font-color: white;), das ist ein css-Default wie black, red, ...

 

[Ravemaster]

genau das klappt wunder bar. Man muss es nur einmal verstehen.

Hat jemand eine Ahnung wie man das Mega Menü einstellen kann. Gibt es da was im Backend?
 

Möchte das wenn man auf eine Kategorie klickt gleich diese Hauptkategorie angezeigt wird und wenn man nur mit der Maus rüber fährt sich das Menü aufklappt und die Unterkategorien angezeigt werden.

Geht das überhaupt?

Ich habe schon Bootstrap Menu Into a Mega Menu gesucht aber nichts gefunden z.B. hier:

http://bootbites.com/articles/6-ways-turn-bootstrap-menu-mega-menu

[NilsK]

Hallo liebe .less-Fans,

ich reihe mich hier mal ein, weil ich noch nicht so wirklich durchblicke, bzw. Änderungen ohne Auswirkungen bleiben oder als Fehlermeldung im Compiler zurückkommen, daß da noch was fehlt/nicht definiert ist. Grob verstanden habe ich es schon und auch schon einige Youtube Videos durch, aber hier in xtc sieht leider wieder alles anders aus.  

Welche Datei ändert Ihr nun wirklich, wenn man z.B. Textfarbe oder ein background-Image hinzufügen möchte (wo würde z.B. ein Hintergrundbild hinterlegt - habe hierzu leider auch nichts gefunden, noch nicht mal einen Codeschnipsel)?

Bei der Textfarbe habe ich z.B. herausgefunden, daß die im Bootstrap-Ordner unter less zu finden/definiert ist (templates\xt_responsive\components\bootstrap\less\variables.less), denn im normalen less Ordner ist sie ja nicht definiert (templates\xt_responsive\less\Variables.less) und wenn ich da was ändern möchte, erkennt der Compiler es als Fehler (der Compiler wirft übrigens auch bei den xtc-Originaldateien eine Fehlermeldung aus).

Müßen geänderte Dateien immer durch den Compiler?

Welche Datei wird letztendlich hochgeladen - alle geänderten wie sonst auch, oder noch etwas anderes?

Finde meinen Fehler noch nicht: Forum, Handbuch habe ich alles durch - ein nachvollziehbares Beispiel wäre super.

Klingt einfach & muß es doch auch sein!

Freue mich über jede Hilfe!!

Herzliche Grüße
Nils

[NilsK]

Juhuu!!

So, jetzt habe ich es gerafft und hoffe, es ist so richtig:

Unter...

templates/xt_responsive/less/ z.B. die Datei Variabless.less ändern,

...dann durch den WinLess Compiler nur die Template.less schicken und...

unter templates/xt_responsive/css/ findet sich dann die geänderte Template.css-Datei, hochladen, und schon ist alles geändert (Cache vorher löschen).

Schön wäre es, wenn das im Handbuch etwas genauer beschrieben werden würde.

 

Macht Ihr das genauso?  
(So macht .less schon richtig Spaß, zumindest, was ich kapiere )? 

 

Dann noch eine Frage, die Variables.less gibt es ja auch unter Bootstrap/less - hier scheint ja die Grundkonfiguration zu sitzen, aus der die Variables.less aus dem "normalen" less-Ordner gefüttert wird. Wann würde man an diese Datei(en) herangehen, oder macht Ihr das gar nicht?

Wie und wo kann man denn ein Hintergrundbild angeben, daß habe ich noch nicht herausgefunden - mit dem Firebug kommt man bei der less-Sprache leider nicht mehr so wirklich weiter (praktisch wie bei dem Standard 4.2er Template, daß man links & rechts ein Hintergrundbild hat).

Habe zwar das hier gefunden, aber ich weiß nicht, wo ich das einfügen muß:

@image-base-url: "../templates/xt_responsive/img/hintergrundbild.jpg";

.className1 {
    background-image: url("@{image-base-url}/hintergrundbild.jpg");

 

Hat das schon mal jemand gemacht oder könnte mir bitte jemand einen weihnachtlichen Vorfreude-Tip geben?

Würde mich sehr freuen!!

Herzliche Grüße
Nils

[NilsK]

Hallo,

in ganz kleinen Schritten komme ich zwar weiter, aber es fehlt noch so einiges...

Ein Hintergrundbild habe ich eingefügt, aber nun steht links und rechts noch ein (weißer) Bereich, den ich nicht zuordnen kann (wie eine Säule) - auch nicht, wie ich den Contentbereich(?) ohne Transparenz hinbekomme.

Gibt es irgendwo eine Übersicht, wie das xt_responsive Template aufgebaut ist, also welche Variablen/Ausdrücke/Bereiche was machen und wo diese definiert sind? Dies würde wirklich vieles vereinfachen und vor allem auch verständlicher machen.

Bin über sachdienliche Hinweise sehr sehr dankbar!

Herzliche Grüße
Nils

[NilsK]

Hallöchen,

so, mal ein kleiner Zwischenstand: Habe nun vieles hinbekommen - war nicht immer einfach und hat viele "Schlafstunden" gekostet, aber nun hat der Großteil super funktioniert.

Eine Kleinigkeit hätte ich noch, da komme ich nun wirklich nicht weiter, vielleicht funktioniert es aber auch nicht?

Bei dem 4.2er Template konnte man den Content-Bereich (Mittelteil) sehr einfach über den Header oder Footer verschieben, also überlagern ("drüber schieben") und hatte so auf die schnelle ein nettes Layout fertig.

Mit der xtc5er Version habe ich es nicht geschafft, hier bleibt der Content-Bereicht direkt am Header/Footer "kleben" und läßt sich leider nicht weiter drüber schieben. Weiß jemand, ob sich das überhaupt ändern läßt und vielleicht auch wie?

Freue mich über jeden Tip!

Herzliche Grüße
Nils

[NilsK]

Hallo,

gleich noch eine Frage:

Einige Boxen möchte ich auf der Startseite (Content-Seite) haben, verschieben hat wunderbar funktioniert. Allerdings werden die Boxen nicht nebeneinander angezeigt, sondern untereinander und das über die gesamte Bildschirmbreite (besser: Contentbereich) dargestellt. Dementsprechend werden auch die Produktbilder viel zu groß angezeigt - sieht natürlich nicht schön aus.
Wie oder wo kann man es denn einstellen, daß das genauso groß wie ein normaler Artikel angezeigt wird?

Und wie schafft man es denn, die Boxen wieder nebeneinander anzuzeigen oder als Beispiel: 4 Neue Produkte nebeneinander in der new_produtcs-Box (werden nur untereinander zum aufklappen angeboten).

Entschuldigt, wenn ich gerade mal wieder ein wenig blind bin und nix mehr sehe oder noch nicht gefunden habe...

Dankende Grüße
Nils

[Alex@4tfm]

Siehe bootstrap doku:

https://getbootstrap.com/docs/3.3/css/#grid

[NilsK]

Hallo Alex,

genau das war es - herzlichen Dank!!

Habe es noch in der gleichen Nacht umgesetzt.  

 

Lösung zum nachmachen:

Im gewünschten Plugin unter templates\boxes die "box_xt_..._products.html" mit folgendem Ausdruck "einrahmen"  

<div class="col-md-3 col-sm-6">
 {... }
</div>

md-3 steht dabei für 4 "Produkte/Reihen" nebeneinander, möchte man z.B. nur 3 nebeneinander haben, dann muß eine "md-4" dort stehen.

 

Neue Frage:

Lediglich die "Special_Products = Angebote" haben einen dunklen (Background) Hintergrund in der Überschrift, alle anderen sind hellgrau und die Schriftfarbe ist praktisch invers.

Unterschied liegt in der ".panel" - nur für die "hellgrauen" Boxen und die dunkle zieht sich zusätzlich noch die .panel-secondary - soviel habe ich herausbekommen.

Was ich nicht gefunden habe, "Wo" oder in welcher Datei kann das geändert werden? Ich meine jetzt nicht die .less Datei, daß ist klar, aber irgendwo ist das Plugin ja aufgebaut und zieht sich entweder das eine oder das andere und genau das habe ich nicht gefunden, um die Boxen einheitlich zu gestalten (sofern mein Denkansatz richtig ist, müßte ja irgendwo .panel oder .panel-secondary auftauchen?).

Wäre schön, wenn hier noch jemand eine Idee oder einen Denkansatz hat.  

Dankende Grüße
Nils

[Alex@4tfm]

Siehe bootstrap doku: 

https://getbootstrap.com/docs/3.3/components/#panels-alternatives

 

 

Update: "panel-primary" ist das xt:Orange , "panel-secondary" wurde von xtc hinzugefügt, damit man beide Hauptfarben in der variables.less definieren kann.

[NilsK]

Hey Alex,

Danke nochmals für die Erklärung.

In meinem Fall wollte ich, daß alle anderen Plugins die selbe dunkle Hintergrundfarbe in der Überschrift erhalten, wie bei "Special_products" (Angebote).

 

Lösung:

Die dafür verantwortliche Datei (ist ja in der entsprechenden Plugin-Datei unter templates\boxes die "box_xt_..._products.html") praktisch "includiert" (also, folgende Datei aufrufen: templates\xt_responsive\includes\box_sidebar_products.html).

Dort findet man dann direkt in Z.3 folgenden Ausdruck:

<div id="box_{$code}" data-visible-items="{$visible_items}"
class="products-box listing no-image-height-helper equalize-nothing panel panel-{if $code == 'xt_special_products'}secondary{else}default{/if} switch-area{if $classes} {$classes}{/if}">

Daraus habe ich dann folgendes gemacht (ich hoffe es ist richtig, zumindest funktioniert der Shop äußerlich  ):

statt "==" wurde "!=" und dann wurden die entsprechenden Plugins hinzugefügt:

{if $code != 'xt_special_products,...,xt_new_products'}secondary{else}default{/if}

Falls das falsch sein sollte, oder es einfacher geht, sage ich gerne noch mal "Dankeschön".

Dankende Grüße
Nils

[elektroede]

Hallo,

im Handbuch steht: "... Die Datei css/Template.css wird dynamisch über Less generiert. Die Less-Hauptdatei ist unter less/Template.less zu finden. In dieser Datei sind alle benötigten Dateien referenziert. Wenn Änderungen an den Less Dateien gemacht werden, muss sichergestellt werden, dass die Datei css/stylesheet.css automatisch aktualisiert wird. ...".

Warum muss denn die stylesheet.css automatisch aktualisiert werden? Und woher automatisch? Aus dem Less compiler wird doch nur die Template.css ausgegeben oder habe ich das falsch verstanden?

Danke vorab!

Viele Grüße,

Elektroede

 

[elektroede]

Schade, dass keiner hier ist. Ganz schön einsam....