Logo ändern im Standardtemplate

Hallo, ich versuche mich gerade vergeblich daran in einem emotion template das Demo logo in ein anderes zu ändern. Vorab, das sind meine ersten Schritte im Bereich Shopware, bitte also um Nachsicht … Die Erklärung im Wiki ist leider nicht wirklich eine Hilfe. Ich habe ein emotion_grey in einen neuen Ordner emotion_name kopiert. Hier geht es schon los, das in der wiki ein kleiner code in die name.css eingetragen werden soll. Was ist mit den anderen in der emotion_grey.css befindlichen Zeilen ? Die css kann doch sicher nicht NUR aus dem Codeschnipsel der wiki bestehen, oder ? Ich ich habe also den Code für das Logo zu ändern zusätzlich in die emotion_grey.css eingetragen zwischen HEADING BOX und TABLE. Den Logo namen geändert, und Bild ins image Verzeichnis geladen. In der header.tpl habe ich die name.css angepasst. Es geht nun schon damit los, das das neue template in Backend nicht angezeigt wird. es wurden gleich 3 weitere emotion grey angezeigt. Erst durch viel Sucherei im Forum erfuhr ich, das man in der info.json den Templatenamen ändern kann. In der Vorschau wurden dann immer das orange template angezeigt. Man denkt also man liegt permanent falsch. Zumindest habe ich es nun geschafft, das das neue Template korrekt geladen wird, leider aber ohne das neuen Logo. Was mache ich falsch ? Edit: Nun ist wieder das orange Template zu sehen. Man kann F5 drücken wie man will. Keine Änderung. es bleibt orange

die css datei die man selbst erstellt wird über die ursprügnliche datei drübergeladen. Man muss deshalb nicht eine komplette neue css datei erstellen sonder gibt nur die änderungen die man machen möchte in seiner css an.

drüberladen würde bedeuten, das nur der code für den header drin wäre. demnach würde der Rest der css ja fehlen. Das soll fuktionieren ? ergänzen, so wie ich es gemacht habe funktioniert jedenfalls nicht. und warum ist nur noch das orange template zu sehen ? egal welches template ich auswähle, es wird immer orange angezeigt. wenn ich Home aufruf habe ich z,b orange, wenn ich ein der kategorien anklicke, kommt das emotion grey, F5 hilft auch hier nicht. Einkaufswelten auf Startseite werden auch nicht angezeigt.

ich würde dir empfehlen einfach alles zu löschen was du bisher gemacht hast. dann erstelle einen eigenen templateordner. Eine fertige Ordnerstruktur kannst du dir hier runterladen: http://wiki.shopware.de/files/downloads … 768651.zip dann machst du hier im tutorial die punkte 1 - 5 http://wiki.shopware.de/Schnelleinstieg … 6_486.html Jetzt hast du deinen eigenen Templateordner und deine eigene css datei erstellt. Weil du die Farben haben möchtest wie im emotion_grey musst du jetzt einfach den Inhalt dieser css datei Kopieren und in deine erstellte css datei einfügen. jetzt musst du nur noch dein Logo hochladen und dann die css anweisung geben wie es im tutorial beschrieben ist: #header #logo a { background: url(…/images/logo.jpg) no-repeat; width: 151px; height: 41px; margin: 40px 0 0; }

uff, wollte eigentlich nur ein Logo ändern. der Weg dahin ist aber sehr weit. Danke erstmal.

Hallo mobile, einfacher geht es z.B. mit meinem Plugin Logo im Header. Da müssen keine Templates oder CSS-Dateien angepasst werden. Gruß Marco

hallo erstmal. ich weiß nicht ob das hier direkt hinpasst, finde aber nicht das richtige forum :confused: Also ich hab das logo im shop im header gelöscht und ein kompletten header hochgeladen, sodass das logo größer und anklickbar ist. aber jetzt habe ich einen schriftzug über dem logo welchen ich nicht weg bekomme. das sieht dann so aus: http://balloony.de/ kann mir da wohl wer helfen? ich verzweifel hier grad echt. liebe grüße und vielen dank, nina

nimm den Textlink raus und bearbeite den CSS. Ich hab gestern auch den ganzen Tag mit dem logo zugebracht. Heute Nacht habe ich es endlich geschafft und das Demo Logo mit dem richtigen ersetzen können (siehe spanische Version) und das Suchfeld auch perfekt implementiert. Hier der CSS Code wie es bei mir klappt. #header #logo a { background: url(../images/deinlogo.png) no-repeat; width: 500px; height: 100px; margin: 0px; } Bitte beachte das das Logo auch im richtigen Ordern liegen muss. Ausserdem kannst Du die Ausrichtung mit margin und/oder padding auch noch anpassen falls notwendig.

hab des jetzt mal genauso gemacht wie bei dir, nur halt den namen des logos geändert, aber es klappt leider nicht. und ich möchte das logo ja weg bekommen. also transparent sozusagen damit man das logo der headerdatei sieht. aber zumindest ist der schriftzug nicht mehr direkt auf dem logo :smiley: danke trotzdem :slight_smile:

…dann lösche doch einfach das Logo aus der entsprechenden CSS. Dann sollte es verschwinden.

hab ich. sowohl in der emotion css als auch in der style css. alles doppelt und dreifach überprüft. das logo ist ja jetzt auch weg. dafür steht aber da wo das logo war ein link („balloony“) den ich nicht weg bekomme. :confused: ich hab bestimmt irgendwo nen kleinen fehler den ich nicht finde. :frowning: #header .inner {width: 998px; height: 115px;margin: 0 auto;position: relative;} #header #logo {margin: 0;} #header #logo a {/* background: url(…/images/logo.jpg) no-repeat: */ width: 500px; height: 100px;margin: 0px 0 0;} so siehts bei mir jetzt aus.

Hallo Nina, ich habe mir gerade mal dein Problem angeguckt und mir sind ein paar Dinge aufgefallen. Du solltest dein Logo nicht im Header-div einfügen, wie du es hier in der CSS getan hast: #header { background: url("../images/backgrounds/header\_logo.jpg") no-repeat scroll center top rgba(0, 0, 0, 0); [...] } Das Bild sollte dort weg, schreibe hier einfach, ähnlich wie im Standard: #header { background: no-repeat scroll center top #fff; [...] } Nun ist dein Logo erstmal weg, daher fügst du dieses dem „#header #logo a“ hinzu: #header #logo a { background: url("../images/backgrounds/header\_logo.jpg") no-repeat scroll 0 0 transparent; height: 100px; left: -10px; margin: 0; position: relative; width: 500px; text-indent: -9999px; } Du wirst bemerken, dass ich noch „position: relative;“ und „left:-10px;“ hinzugefügt habe. Damit wird dein Logo einheitlich links mit der restlichen Website eingerückt. Außerdem dient das „text-indent:-9999px;“ dazu, dass dieses „baloony“ verschwindet. Bevor nun aber das Logo da schön angezeigt wird, musst du dein Logo vernünftig zuschneiden. Momentan ist das ein zu großes Bild mit viel Weiss. Ich vermute eine Auflösung von 190x80px sollte passen. Sobald du das Bild ersetzt hast, sollte es links erscheinen. Wenn dir die Position des Logos noch nicht gefällt, kannst du hier: background: url("../images/backgrounds/header\_logo.jpg") no-repeat scroll 0 0 transparent; ändern. Das „scroll 0 0“ gibt die Position des Hintergrundbildes an. Die erste Zahl ist die x-Position, die zweite die y-Position. Willst du also das Logo 10px tiefer, änder es auf „scroll 0 10px“. Hoffe du kannst mir folgen. MfG Zanktus

ah super! danke! da war der fehler :smiley: um den rest kümmer ich mich später. und ja oben das ganze weiße mit dem logo drauf ist komplett als header hochgeladen. also 1920 x 250 pixel. Vielen lieben dank für die hilfe! :slight_smile: