Hallo. Mit tatkräftiger Unterstützung von @Torben (Gambio) ist folgendes für die Community herausgekommen. "Tatkräftige Unterstützung" meint, dass das Verhältnis Torben / Devil so 90:10 steht Hinweis: Funktioniert nur im "Boxed Layout". Das ihr mit Styledit3 für euren Shop ein Hintergrundbild definieren könnt, wisst ihr ja bestimmt schon. Wie man dieses Bild aber klickbar macht, es als Link nutzt, war die Frage. Die Datei index.html im Ordner \templates\Honeygrid\ kopieren und als index-USERMOD.html speichern. Dann folgenden Code HTML: <div class=“banner“> <a href=“link“ target=”_blank”></a> </div> vor HTML: <div id="outer-wrapper" {if $TOPBAR && $TOPBAR !=''}class="topbar-active"{/if}> <header id="header" class="navbar"> (fast ganz oben) hinzufügen. Dann fügt ihr im Styledit3 "eigenes CSS" hinzu. PHP: .banner { background: url(Pfad/zu/deinem/Bild) no-repeat center; height: 100%; width: 100%; position: fixed; top: 0;}#outer-wrapper { position: relative;} ======= 2 Bilder (links und rechts) mit unterschiedlichen Linkzielen Wenn ihr links und rechts jeweils ein anderes Hintergrundbild haben wollt, dann folgendes in der index-USERMOD.html einfügen. HTML: <div class=“banner-left“> <a href=“link1“ target=”_blank”></a> </div> <div class=“banner-right“> <a href=“link2“ target=”_blank”></a> </div> und in Styleedit3 unter "eigenes CSS hinzufügen" das folgende einfügen. PHP: .banner-left {background: url(Pfad/zu/deinem/Bild) no-repeat;height: 100%;width: 50%;left: 0px;top: 0px;position: fixed;}.banner-right {background: url(Pfad/zu/deinem/Bild) no-repeat;height: 100%;width: 50%;right: 0px;top: 0px;position: fixed;}.banner-left a, .banner-right a { display: block; height: 100%;} Vielen Dank nochmals an @Torben (Gambio) ! Happy Linking
Du solltest konkret sagen was du haben möchtest. Dann kann man das umsetzen. Pauschale Fragen sind nicht ziehlführend. Daher pauschale Antwort - Machbar is alles
Ich möchte mein Hintergrundbild des Headers verlinken, sodass ich auf meine Startseite zurück gelange. Ich habe mein Logo nicht über die Logo Funktion eingebaut, da ich auf diese Weise das gewünschte Layout nicht realisiert bekomme. Über die Variante das Logo über das Hintergrundbild im Header einzufügen, habe ich aktuell Schwierigkeiten dieses zu verlinken. Daher bin ich aktuell dabei oben genannte Variante zu versuchen. Nun ist mir allerdings aufgefallen, dass dies nur im Boxed Layout funktionieren soll, was ich allerdings nicht nutze. Hier der Link zum Shop: amila-porter.com Vielleicht gibt es noch eine andere Variante bzw. mir greift mal wieder einer unter die Arme Bin über jede Hilfe dankbar.
du könntest versuchen einfach ein transparentes Bild (ohne Inhalt) als Logo zu laden. Das würde dann über dem Hintergrund liegen und Du hättest einen Link
Mein 1. Tipp NIEMALS solche Dateinamen benutzen 1 Logo 21.10.png Leerzeichen und Punkte sollte man da weglassen. Nimm was sinnvolles das auch das Bild beschreibt. shopname-logo.png oder so.
Das habe ich schon versucht. Schwierigkeit dabei ist dann dieses zu zentrieren, sodass die Verlinkung nur angezeigt wird, wenn man auf Höhe des zentrierten Logos ist und nicht bereits am linken Rand meines Headers beginnt.
ps. dann weiß auch google immer was auf dem Bild zu sehen ist. Marken stärkung damit dein Logo kommt wenn man nach dir sucht und nicht sonst was. Bitte bei allen Bildern so machen, - Das war SEO für Anfänger Teil 1
Hab es jetzt über css im StyleEdit gelöst. Bild als Logo angenommen und fleißig umgebaut. Hier mein css Code: Code: #navbar-brand { @media (min-width: $grid-float-breakpoint) { width: 100%; height: ($gx-brand-height - 20px); padding: 0; } a { display: block; margin-left: floor($grid-gutter-width / 2); width: $gx-brand-width-mobile; height: $gx-header-height-mobile; // medium resolutions @media (min-width: $grid-float-breakpoint) { width: 100%; height: ($gx-brand-height - 20px); margin: 40px 390px; } // scale and align logo background-position: 50% 0%; background-repeat: no-repeat; background-size: contain; // transition for resizing @include transition(300ms ease all); } } @media (min-width: 768px){ #search.collapse { margin-top: 6px; margin-bottom: -40px; margin-left: 390px; }}