Neu Link zur Startseite als Icon

[schwenk]

Servus,

hat jemand eine Idee, wie man ein CSS Icon einsetzt, statt einen Text für den Link auf die Startseite. Einen Text wie z.B. "Startseite" kann ja über die Linkgruppe megamenu eingefügt werden, aber wie kann ich darauß ein CSS Icon machen?
Herzlichsten Dank!

( Shop Version 4.04)

Exemplarisch:

 

[+dp+]

Hallo, mich beschäftigt das selbe Problem. Gibt es inzwischen eine Lösung?

LG

 

[Ugenmeister]

Hallo Jungs.

Ich habe das so gelöst. Vielleicht gibt es bessere Lösungen, aber es funktioniert genauso wie ich das wollte.

- Datei /templates/ ChildTemplate/snippets/categories_mega.tpl öffnen
- Nach "{strip} {assign var=max_subsub_items value=5}" das hier einfügen:

<div id="home">
    <a href="LinkZurStartseite"><i class="fa fa-home fa-2x" aria-hidden="true">&nbsp;</i></a>
</div>

- Im Theme-Editor noch das hier einfügen:

#home {float: left;margin-top: 8px;}

Bei "LinkZurStartseite" kann man natürlich auch die entsprechende Variable einbauen.

ERGEBNIS:


Gruß

 

[+dp+]

Hallo Ugenmeister,

vielen Dank für die Antwort!
Wo befindet sich denn ter Theme-Editor? Ist damit die CSS des Themes gemeint?

Grüße

 

[Ugenmeister]

Hi. Gerne.
Er befindet sich unter PLUGINS.
Ja, das ist gemeint.

Gruß

 

[+dp+]

Soll der Code "
#home {float: left;margin-top: 8px;}" dann zu Variables.less oder base.css?

LG

 

[+dp+]

Ich habe auch mal versucht ihn direkt zu categories_mega.tpl als Style einzufügen. Leider wird mir das "Haus" bisher dennoch nicht angezeigt.

 

[Ugenmeister]

Soll der Code "
#home {float: left;margin-top: 8px;}" dann zu Variables.less oder base.css?

Wenn du ihn im EVO THEME EDITOR (im Shop-Backend) einträgst und dann "Datei speichern", "Theme kompilieren" klickst, ist alles wie es sein soll.

PS: Arbeitest du mit einem Child-Template oder mit CUSTOM-Dateien?

 

[+dp+]

Ich arbeite mit einem Child-Template

 

[+dp+]

Anbei ein paar Bilder wie es bei mir aussieht.

 

[windpocke02]

Hallo,
ich hätt die Home-Funktion auch gerne.
Wenn ich den Code in der .tpl so erfasse kann ich meine Website gar nicht mehr aufrufen.
Eine base.css habe ich zudem im Theme-Editor nicht, nur eine theme.less und eine variables.less.

Hat jemand eine Idee was ich da falsch mache ??
Danke

 

[Mirko.Schmidt User deaktiviert]

Wenn die Website sich nicht mehr aufrufen lässt, dann wurde etwas falsch eingefügt und kann hiermit besser analisiert werden.

CSS Änderungen immer in der custom.css einfügen, dann muss nichts kompiliert werden oder in der theme.less. Das ganze aber über ein Child Template immer lösen.

 

[Ugenmeister]

@+dp+:
1.) Trage den CSS-Code in der "theme.less" im Theme-Editor ein. Speichern, kompilieren.
2.) Da hast du einen Fehler in der tpl-Datei! Die geschweifte Klammer "}", die bei dir momentan hinter "</div>" steht, muss hier weg und hinter "value=5" stehen.

 

[windpocke02]

Vielen Dank, jetzt hat es geklappt. Allerdings ging es nicht wenn ich den Code in die tpl-Datei im Child-Template eingetragen habe. Das ging nur im normalen Evo-Template.

Kann ich irgendwie die Farbe von dem Icon ändern ?

 

[css-umsetzung]

Du musst das Child auch aktivieren.

 

[windpocke02]

Das ist aktiviert, deshalb wundert mich es ja.
Welcher Teil der tpl-Datei muss den in der Child-tpl enthalten sein ? alles oder nur die ersten paar Zeilen ?

 

[css-umsetzung]

Es gibt zwei Varianten, die komplette oder als extended

Nutzt du die extended Variante werden nur einzelne Blöcke die du einträgst übernommen. Alles außerhalb dieser Boxen wird nicht übernommen.

 

[Ugenmeister]

Bitteschön

Farbe des ICONs ändern...

CSS:

#home .fa {color: red;}

Wichtig ist auch, dass du die geänderte TPL-Datei in Deinen Child-Ordner kopierst (/templates/ChildTemplate/snippets/) und nicht in deinen EVO-Ordner (/templates/Evo/snippets).

Welcher Teil der tpl-Datei muss den in der Child-tpl enthalten sein ? alles oder nur die ersten paar Zeilen ?

Nimm einfach die Original-TPL-Datei aus Deinem EVO-Verzeichnis (sofern Du an DIESER TPL-Datei noch keine Änderungen bisher gemacht hast) und setze den Code (siehe oben) in diese Datei an der besagten Stelle ein. Speichere die Datei und kopiere sie in dein Child-Verzeichnis.

Gruß

 

[windpocke02]

OK, da der Code über einem Block steht wird das die Ursache sein. Dann übernehme ich den ganzen Inhalt der tpl-Datei iin das Child-Template - und siehe da es funktioniert. Danke für deine Hilfe.

 

[Ugenmeister]

Freut mich; sehr gern