Theme Canape: Probleme mit Design & Social Media Menü

nadine18

Hallo!
Ich mache zurzeit eine Website für eine Freundin im Rahmen meiner Diplomarbeit. Leider funktioniert nicht alles so, wie es soll.

Folgende Probleme:
Bei den Menüpunkten wurden eigentlich immer rechts daneben so breite V´s angezeigt. Im CSS hab ich jedoch die Schrift etwas vergrößert, danach wurden die V´s zu Vierecken. Auch als ich die Schrift wieder zurück verkleinert hab, gingen die Vierecke nicht weg.

Weiters habe ich unten im Footer ein Social Media Menü erstellt, das Social Media Icons anzeigen soll. Auch diese Symbole wurden zu Vierecken. Mehrmaliges Löschen & neu machen hat nix gebracht. Ich kann nicht genau sagen, ob das mit den Menü V´s zusammenhängt, denke aber schon.

Ich bin am Ende mit meinem Latein und am verzweifeln.

Ich hoffe, hier auf Hilfe zu treffen !! :) Das wär genial.

Hier der Link zur Website: http://www.natural-horsing.de

Ganz liebe Grüße,
Nadine

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sailor56

Diese 'Viereck' wird erzeugt durch das Preudoelement ::after - welches in deinem CSS mit dem "content: '\f431'; " angegeben ist.
\f431 ist jedoch in der UTF-8 Zuordnung nicht definiert und deswegen wird dieses Fehler-Viereck angezeigt.
Schreibe mal in dein zusätzliches CSS im Customizer folgendes...

HTML

.main-navigation li a:not(:last-child)::after {
    content: '\2B9F';
}

Das sollte dir das V wiederbringen... und wenn du ein anders Symbol haben willst suche dir was passendes aus der UTF- 8 Tabelle aus.

b3317133

Diverse Dateien Deiner Seite werden derzeit über ein CDN ausgeliefert, warum auch immer:

Code

http://secureservercdn.net/160.1XX.1XX.170/1XX.a6a.myftpupload.com/wp-content/...
https://s0.wp.com/wp-content/...
https://c0.wp.com/c/5.2.3/wp-includes/...

Sowas führt oft zu Problemen mit Webfonts, und wenn Webfonts nicht mehr geladen werden, sieht man solche Quadrate.

Evtl. laufen irgendwelche "Cache"- oder "Optimierungs"-Plugins, die falsch eingerichtet wurden, z.B. Jetpack o.ä. - Schalte diese Plugins mal komplett ab.

Sailor56

Zitat von b3317133

Sowas führt oft zu Problemen mit Webfonts,....

Kann schon sein... in diesem Fall ist allerdings 'Calibri' als Font-Family angegeben - also eine Standard MS Schriftart, die normalerweise auf einem Windows System schon installiert ist.
Meines Wissens hat 'Calibri' kein Navigations-Pfeil nach unten Symbol.. aber UTF-8 hat, wenn man den richtigen Hex-Code nimmt.
Ein Facebook Icon ist soweit ich weiß weder in Calibri noch in UTF-8 verfügbar - hier muss man wohl auf FontAwesome ausweichen. Wird aber schon auf der Seite des TE installiert.
Um das Problem zu lösen (sollte die Vermutung von @b3317133 nicht zutreffen) könnte dann folgender CSS weiter helfen:

HTML

.main-navigation li a:not(:last-child)::after {
    content: '\2B9F';
}
.social-links ul a[href*="facebook.com"]::before {
    font-family: "FontAwesome";
    content: '\f230';
    /* oder alternatives Icon */
    /*content: '\f09a';*/
}

b3317133

@Sailor56 Im original style.css des Themes wird dort "Genericons" als [FONT=Courier New]font-family[/FONT] verwendet, und damit passt der vorhandene [FONT=Courier New]content[/FONT] Wert dann auch.

Es wurde da offenbar etwas mehr verändert, als nur zu "vergrössern/verkleinern"...

Sailor56

@b3317133 ... auch eine logische Möglichkeit - habe ich aber nicht nachgeschaut, was da in den original Stylesheets steht :(

b3317133

@nadine18 Beim grossflächigen Ersetzen diverser Schriftarten bist Du offenbar über das Ziel hinausgeschossen. Suche diese vier Stellen in Deiner Datei style.css und ersetze dort jeweils [FONT=Courier New]Calibri[/FONT] wieder durch [FONT=Courier New]Genericons[/FONT] dann sollten die Symbole wieder funktionieren.[FONT=Courier New][/FONT]

Code

.menu-toggle:before {
    content: '\f419';
    font-family: Calibri;
    margin-right: 8px;
    ...


.social-links ul a:before {
    border-radius: 50%;
    color: #aa2727;
    content: '\f415';
    display: block;
    font-family:Calibri;
    font-size: 18px;
    ...
  
.format-link .entry-title a:after {
    content: '\f442';
    font-family: Calibri;
    font-size: 36px;
    ...
  
    .main-navigation li a:not(:last-child):after {
        content: '\f431';
        font-family: Calibri;
        font-size: 13px;
        ...

Alles anzeigen

Generell sollte man keine Änderungen direkt in der style.css Datei des Themes machen, da bei Theme-Updates alles überschrieben wird. Dafür legt man ein Child-Theme an oder man schreibt die Überlagerungen der CSS Regeln in Design > Customizer > Zusätzliches CSS.

nadine18

Vielen lieben Dank, ich habs geschafft!

Dank dem CSS-Code von @Sailor56 konnte ich die Vs wieder zurückbringen und durch De- und Reaktivieren des Jetpack-Plugins waren die Social Media Icons wieder da.
Witzig, ich dachte, ich hab im Jetpack noch gar nie was gemacht.

Aber recht soll es mir sein! :)

b3317133

Lass Jetpack einfach deaktiviert, dieses Plugin bringt nur jede Menge Probleme bzgl. DSGVO. Nicht DSGVO-konform sind derzeit auch die og. CDN-Auslagerungen, die in der Datenschutzerklärung komplett fehlen.

Die saubere Lösung für die Icons wäre die Nutzung des im Theme mitgelieferten Zeichensatzes [FONT=Courier New]Genericons[/FONT], so wie es im original style.css ursprünglich gemacht wurde, siehe auch Beitrag #7.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme Canape: Probleme mit Design & Social Media Menü

Jetzt mitmachen!