Neu Logo vergrößern / Bild im Header

Manitou400

Aktives Mitglied
5. Oktober 2017
24
0
Hallo bin neu hier und arbeite noch mit einem Testshop. Der Aufbau gefällt mir schon recht gut nur möchte ich das Logo größer dargestellt haben und evtl ein Bild daneben einfügen.
Habe schon viel Beiträge gefunden, leider steht da immer was von CSS. Wo muss ich den da hin um die ganzen beschriebenen Felder zu ändern oder muss man sich etwas downloaden um diese CSS Datei umschreiben zu können.

Vielen Dank schon mal :)
 

robertw

Aktives Mitglied
17. Februar 2016
50
8
Hallo Manitou,
schön, dass du dich mit dem Thema beschäftigst. Bei der Formulierung deiner Frage merkt man, dass du noch ganz am Anfang stehst. Ich rate dir daher lieber erstmal ein paar grundlegende Tutorials zum Thema Webentwicklung und Webdesign durchzuarbeiten, da es sonst einer sehr langen Erklärung bedarf, wie du da jetzt im Header die Logogröße verändern musst.
Ich versuche das mal am Beispiel eines Autos:
"Hallo ich bin neu hier und arbeite noch mit einem Testauto. Der Aufbau gefällt mir schon ganz gut aber ich möchte gerne andere Reifen draufziehen. Ich habe schon viel zu Reifenwechsel gelesen, leider steht dort immer was von Schrauben. Was sind denn das für Schrauben und wo bekomme ich die her?"
... ich denke du verstehst worauf ich hinaus will. Es wird dir hier sicherlich gern geholfen aber vielleicht könntest du versuchen dir erstmal ein paar Grundkenntnisse anzueignen.

Viele Grüße!
 

wsnr

Aktives Mitglied
7. Oktober 2017
2
0
@robertw

Mir gehts genauso wie Manitou. Ich habe rudimentäre Kenntnisse aber guck oft noch wie ein Schwein ins Uhrwerk. Könntest du vllt stichpunktartig auflisten, was so man so an Basics lernen sollte?

Vielen Dank
 

Manitou400

Aktives Mitglied
5. Oktober 2017
24
0
Ja bin gerade wieder mit einem Freund hier der hat sich seine Seite via Internet selbst gebaut, jedoch kommt er hier auch nicht klar.
Wo muss man den hin um diese Werte zu ändern. Denke dann würden wir das schon hin bekommen da der Rest gut erklärt zu finden ist was geändert gehört.
 

robertw

Aktives Mitglied
17. Februar 2016
50
8
@wsnr
Also die Basics in HTML & CSS wären schon sinnvoll. Auf https://www.codecademy.com gibt es gut kostenlose Kurse. Man kann auch bezahlte Kurse durcharbeiten aber für die Basics reichen die free courses. Auf https://wiki.selfhtml.org gibt es dann eine komplette Liste mit Beschreibung und Anleitung von allen Befehlen.

@Manitou400
Also es ist immer ratsam für sämtliche Templateänderungen ein Child-Template zu erstellen um updatesicher zu bleiben. Dazu gibt es von JTL ein ganz gutes Wiki (http://developer.jtl-software.de/projects/template-dev/wiki/Wiki)
Es gibt dann verschiedene Ansätze. Du kannst das Plugin von JTL (evo Theme Editor) verwenden. Je nachdem, welches Theme verwendet wird hast du dann dort folgende Style-Anweisung:

#logo a img {
max-height: 60px;
width: auto;
}​

Hier ist beispielsweise das Logo auf eine Höhe beschränkt. Du kannst den Wert jetzt ändern und danach das Theme neu kompilieren. Oder du überschreibst den Wert in einer custom-css-Datei, die du im child-Template einbindest. Für ein Bild daneben verwende ich z.B. immer das Plugin Dropper. Das ist für mich am einfachsten und updatesicher. Du kannst aber auch in dem Child-Template im in der layout/header.tpl den entsprechehenden Code hinzufügen.
 
  • Gefällt mir
Reaktionen: ots

minne6

Aktives Mitglied
25. November 2014
81
1
Hallo in die Runde,

kann mir jemand sagen, wie ich das Logo im Shop 5 vergrößern kann? In den Css Dateien habe ich schon diverse Versuche gestartet, aber leider hatte keine Anpassung bislang Auswirkungen.

Hat schon jemand Erfahrung damit gemacht oder kann helfen? Ich bin schon am überlegen doch wieder auf Shop 4 zu schwenken, da der 5er sehr begrenzt ist in seiner Gestaltungsfunktion.

Gruß Simon
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
1.323
458
Hallo @minne6

Hast du dir schon ein Child-Template angelegt und den Theme Editor schon mal genutzt?

Du kannst die Variablen einfach überschreiben, indem du dem Tutorial folgst um die Primärfarbe zu ändern: https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_templates/primary_color.html

Statt $primary musst du dann nur folgende Variablen nach deinen Wünschen anpassen:
$navbar-padding-y-lg
$navbar-image-height-lg

Dafür solltest du am besten die neuste Version des master benutzen (im Tab "dev"): https://build.jtl-shop.de/#shop/dev , da im RC3 in der Richtung noch ein paar Variablen fehlen.

Die zweite (etwas unsauberere) Variante wäre in die custom.css soetwas in der Art zu schreiben und dort die Größen anzupassen:
Code:
@media (min-width: 992px) {
  header .navbar-brand {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  header .navbar-brand img {
    height: 3.125rem;
  }
}
Das führt aber wahrscheinlich dazu dass das Logo beim Laden der Seite kurz etwas in der Größe "springt".

Viele Grüße
Michael
 

Cassiopeia

Sehr aktives Mitglied
9. Mai 2017
407
62
Hallo in die Runde,

kann mir jemand sagen, wie ich das Logo im Shop 5 vergrößern kann? In den Css Dateien habe ich schon diverse Versuche gestartet, aber leider hatte keine Anpassung bislang Auswirkungen.

Hat schon jemand Erfahrung damit gemacht oder kann helfen? Ich bin schon am überlegen doch wieder auf Shop 4 zu schwenken, da der 5er sehr begrenzt ist in seiner Gestaltungsfunktion.

Gruß Simon

Ich werde mir auch ein Child Template machen müssen.

Vestehe nicht warum JTL die Funktion nie integriert mit der Logo Größe... das ist so eines der ersten Sachen die man macht wenn man sich seinen Shop einrichtet.