Ich würde gerne im Conexco Responsive Template die Schritftart auf Open Sans als Standard-Font ändern. Templateänderungen hab ich jetzt soweit wohl verstanden. Muß ich die neue Schriftart in einer eigenen .css Datei einbauen und die Schrift-Dateien auf den Server legen (so hab ich’s im derzeitgen Design gemacht) oder kann ich das auch alles über den Adminbereich des Plugins machen? Wäre toll, wenn mir jemand auf die Sprünge helfen könnte. Danke.
Das ist ziemlich einfach zu machen: 1) Template erweitern Es muss die header.tpl erweitert werden um die Schriftart zu laden. Hierzu überschreiben wir den Block statt ihn zu erweitern damit die “alte” Schriftart nicht mehr geladen wird (wird ja nicht mehr benötigt). Sofern meine Subshops betrieben werden bzw. es kein Problem ist, wenn die Erweiterung sich auf alle Templates auswirkt kann die Erweiterung im _local-Verzeichnis vorgenommen werden, ansonsten muss es über das _theme-Verzeichnis erfolgen. Also im Verzeichnis “templates/_local/frontend/index” eine Datei “header.tpl” mit folgenden Inhalt anlegen: {extends file="parent:frontend/index/header.tpl"} {\*! Stylesheets and Javascripts \*} {block name="frontend\_index\_header\_css\_screen"} <link type="text/css" media="all" rel="stylesheet" href="%7Blink%20file='frontend/_resources/css/bootstrap.css'%7D?cachebreaker=%7B%24CacheBreaker%7D"><link type="text/css" media="all" rel="stylesheet" href="%7Blink%20file='frontend/_resources/css/flexslider.css'%7D?cachebreaker=%7B%24CacheBreaker%7D"><link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">{/block} 2.) Variable überschreiben Jetzt muss dem LESS-Compiler noch mitgeteilt werden, dass er eine andere Schrift verwenden soll. Hierzu müssen wir die vorhandene Variable überschreiben. Am einfachsten geht das übers Backend-Plugin im Reiter Expert und dem Feld “LESS/CSS Prepend”. Hier folgendes einfügen: @swf-font-family-base:"Open Sans", "Helvetica Neue", Arial, sans-serif; Danach auf speichern klicken - :shopware: Cache leeren 
und schon sollte die Änderung sichtbar sein (habs nicht bis zum Schluss getestet).
1 „Gefällt mir“
So hab ich es bereits (hätte ich dazu schreiben sollen). Ich würde die Font-Dateien aber gerne auf dem eigenen Server haben. Das geht dann wahrscheinlich nur über eine weitere .css-Datei.
Ich verstehe zwar nicht ganz warum man das machen sollte aber das Einbinden funktioniert vom Prinzip gleich. Die Schriftarten müssen zuerst „zur Verfügung“ gestellt werden und dann dem Compiler mitgeteilt werden, welche Schriftart er verwenden soll.
Hallo Zusammen, wenn wir die Standard Font durch eine andere Google Font ersetzen, klappt das einwandfrei, mit Ausnahme der Icons in den Buttons. (s. Screenshot) - diese fehlen dann leider. Habe bereits mehrere Fonts versucht und auch statt Latin-Zeichensatz den Latin-Extended-Zeichensatz. Leider erfolglos… 
Hat jemand einen Tipp?
Das liegt vermutlich daran das der Icon Font (FontAwesome) nicht mehr vorhanden ist. Entweder wird dieser nicht mehr geladen oder die Schriftart für die Klassen der Icons überschrieben…
[quote=„Shopaholic“]Das liegt vermutlich daran das der Icon Font (FontAwesome) nicht mehr vorhanden ist. Entweder wird dieser nicht mehr geladen oder die Schriftart für die Klassen der Icons überschrieben…[/quote] Gibt es hierzu schon eine Lösung?
[quote=“kayyy”][quote=“Florian Prediger”][quote=“Shopaholic”]Das liegt vermutlich daran das der Icon Font (FontAwesome) nicht mehr vorhanden ist. Entweder wird dieser nicht mehr geladen oder die Schriftart für die Klassen der Icons überschrieben…[/quote] Gibt es hierzu schon eine Lösung?[/quote] Du hast den kompletten Block warscheinlich überschrieben. Demnach musst du Fontawesome selber wieder einbinden. Oder den Block entsprechend nut erweitern mit deiner eigenen CSS. http://www.bootstrapcdn.com/#fontawesome_tab[/quote] Darf ich laienhaft noch fragen, wo ich diesen Schnipsel hier einsetze bzw. wie ich das mit Google Webfonts kombiniert bekomme? Sorry, ich bin noch am Lernen… Vielen Dank für die Geduld: {extends file=“parent:frontend/index/header.tpl”} {*! Stylesheets and Javascripts *} {block name=“frontend_index_header_css_screen”} {/block}
Einmal eine kurze Anleitung, wie man nun hier eigentlich überhaupt das Conexo anpasst und die Google Fonts ändert. Du benötigst folgende Ordner Struktur im /template Ordner: _theme/frontend/index/ In dem Ordner /index legst du eine Datei an: header.tpl In dieser header.tpl fügst du folgenden Code ein: {extends file="parent:frontend/index/header.tpl"} {block name="frontend\_index\_header\_css\_screen" append}<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">{/block} Mit diesem Code erweiterst du den vorhandenen Block, welcher die CSS Dateien lädt. Möchtest du die vorhandenen mitgelieferten Google Fonts nicht laden, musst du den kompletten Block überschreiben und nicht erweitern. Dazu schreibst du anstatt den obigen Code folgenden Code in deine angelegte header.tpl {extends file="parent:frontend/index/header.tpl"} {block name="frontend\_index\_header\_css\_screen"} <link type="text/css" media="all" rel="stylesheet" href="%7Blink%20file='frontend/_resources/css/bootstrap.css'%7D?cachebreaker=%7B%24CacheBreaker%7D"><link type="text/css" media="all" rel="stylesheet" href="%7Blink%20file='frontend/_resources/css/flexslider.css'%7D?cachebreaker=%7B%24CacheBreaker%7D"><link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> {/block} Hier haben wir nun die Google Fonts welche mitgeliefert werden rausgenommen und mit deiner Open Sans Google Font ersetzt. Wichtig ist, dass du niemals das Core Template überschreibst, sondern immer dein eigenes Template anlegst, welches das Core Template überschreibt. Die Google Fonts musst du dann noch entsprechend in der CSS angeben. Denn ansonsten weiss das Template ja garnicht welche Schriftart geladen werden soll. Wir müsssen es also dem Template mitteilen „Lade für alle Schriften die Open Sans Font“. Dazu legst du eine eigene CSS Datei an. Bspw. mit dem Namen „custom“. Lege dazu folgende Struktur an: _theme/frontend/resources/css/custom.css In diese Datei schreibst du folgenden Code: body { font-family: 'Open Sans', sans-serif; font-weight: 400; } So wird die neue Schrift geladen und auf alle Schriften angewendet. Diese CSS musst du nun auch noch im Template laden. Dazu öffnest du wieder deine angelegte header.tpl und fügst hinter den bereits vorhandenen CSS Dateien deine custom.css ein. {extends file="parent:frontend/index/header.tpl"} {block name="frontend\_index\_header\_css\_screen"} ..... ....<link rel="stylesheet" href="%7Blink%20file='frontend/_resources/css/custom.css'%7D?cachebreaker=%7B%24CacheBreaker%7D"> Wichtig ist, dass diese custom.css immer hinter der Bootstrap CSS geladen wird, da die custom.css die Core CSS ( bootstrap.min.css ) überschreibt. Am besten sollte die custom.css immer die letzte CSS in deinem CSS Block sein. Ich hoffe das ist verständlich 
2 „Gefällt mir“
Danke erst mal. Ich bin dran es umzusetzen nur leider bekomme ich jetzt immer folgende Fehlermeldung: Fatal error: Uncaught exception ‘SmartyCompilerException’ with message ‘Syntax Error in template “/livdgqdl/www.living-delights.de/templates/_theme/frontend/index/header.tpl” on line 3 “{block name=“frontend_index_header_css_screen”}” unmatched {block} {/block} pairs’ in /livdgqdl/www.living-delights.de/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php:657 Stack trace: #0 /livdgqdl/www.living-delights.de/engine/Library/Smarty/sysplugins/smarty_internal_compile_extends.php(88): Smarty_Internal_TemplateCompilerBase->trigger_template_error(‘unmatched {bloc…’) #1 /livdgqdl/www.living-delights.de/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(475): Smarty_Internal_Compile_Extends->compile(Array, Object(Smarty_Internal_SmartyTemplateCompiler), Array, NULL, NULL) #2 /livdgqdl/www.living-delights.de/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(249): Smarty_Internal_TemplateCompilerBase->callTagCompiler('extends in /livdgqdl/www.living-delights.de/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php on line 657 Meine header.tpl lautet: {extends file=“parent:frontend/index/header.tpl”} {block name=“frontend_index_header_css_screen”} {/block} Meine custom.css lautet: {font-family: ‘Dosis’, sans-serif;} {font-family: ‘Gentium Basic’, serif;} Dosis Light300 und Medium500 sollen die Überschriften werden Gentium Basic die Standardschrift Irgendwie muss ich doch zu einem Ergebnis kommen. Ich möchte beide Schriftfamilien laden und dann im Plugin unter “Schriften & Abstände” eingeben, wie ich es brauche. Ich bin mittlerweile echt am verzweifeln. Habe mir das Plugin doch extra gekauft, damit mir das erspart beleibt. Aber ich bleibe dran… Danke für Deine Geduld! Florian
Um eine Schriftart zu ändern brauch man doch kein Plugin Dein CSS Code ist generell auch falsch. Dieser muss bpsw lauten: body { font-family: 'Gentium Basic', serif; } Die Schriftstärke definierst du mit font-weight:…;. Die genauen Stärken der Schriftart siehst du bei Google Fonts: https://www.google.com/fonts#UsePlace:u … :Open+Sans Möchtest du nun bspw. Überschriften eine spezielle Font geben schreibst du in deine CSS bspw: h1,h2,h3,h4,h5,h6 { font-family: 'Dosis', sans-serif; font-weight:500; } Aber sowie ich das auf deiner Shopseite sehe verwendet du ja hier auch das Emotion Template und nicht das Conexo Template ?