Widget lädt unterschiedliche Befehle

  • Gelöst Lynnv

    (@lynnv)


    vor 1 Jahr, 11 Monaten

    Hallo Ihr Spezialisten,

    ich habe das Widget im Theme Twenty Twenty-One benutzen wollen, aber es reagiert unterschiedlich !

    Auf einer Seite zeigt er die Icons korrekt in der Farbe weiß an, auf anderen Seiten nicht ???

    Hier das Widget:

    <aside class="widget-area">
	<section id="block-9" class="widget widget_block">

<div class="elementor-widget-container" style="width: 1200px; font-size:18px;">
<div class="elementor-widget-container" style="text-align: center;">
<div style="display: inline-block; text-align: center;">

<a style="color: #808080;" href="https://www.rialogo.de/Neu/">Startseite</a>&nbsp;&nbsp;&nbsp;<a style="color: #808080;" href="https://www.rialogo.de/kontakt/">Kontakt</a>&nbsp; &nbsp;<a style="color: #808080;" href="https://www.rialogo.de/Neu/impressum/">Impressum</a>&nbsp; &nbsp;<a style="color: #808080;" href="https://www.rialogo.de/Neu/datenschutzerklaerung/" aria-current="page">Datenschutzerklärung</a>

</div></div>

<div style="text-align:center;margin-top:50px;">
    
<a class="elementor-icon " href="https://www.xing.com/profile/Sabrina_Morhart">
<i class="fab fa fa-xing" style="font-size: 22px;color: #ffff;" aria-hidden="true"></i> </a>

<a class="elementor-icon " href="https://www.facebook.com/LogopaedieundLerntherapiefreiburg/">
<i class="fab fa-facebook-f" style="font-size: 22px;color: #ffff;" aria-hidden="true"></i> </a>

</div>

<p style="color: #808080;font-size:14px; text-align:center;margin-top:20px;">rialogo | Zechenweg 6 | 79111 Freiburg | Telefon: 0761 15283979 | E-Mail: kontakt(at)rialogo.de</p></div></section>	
</aside>

    Muss der Code hier nicht immer gleich sein, also im Browser ?

    Auf der Seite „Team“, da wo es korrekt läuft kommt

    
element.style {
    font-size: 22px;
    color: #ffff;
}
.fa.fa-xing, .fa.fa-xing-square, .fa.fa-youtube, .fa.fa-youtube-play, .fa.fa-youtube-square {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}
.elementor-icon i, .elementor-icon svg {
    width: 1em;
    height: 1em;
    position: relative;
    display: block;
}
.fa, .fas {
    font-weight: 900;
}
.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}
.fab {
    font-family: "Font Awesome 5 Brands";
}

    Und nun vom „Impressum“

    
element.style {
    font-size: 22px;
    color: #ffff;
}
.elementor-icon i, .elementor-icon svg {
    width: 1em;
    height: 1em;
    position: relative;
    display: block;
}
dfn, cite, em, i {
    font-style: italic;
}
*, *::before, *::after {
    box-sizing: inherit;
}
User-Agent-Stylesheet
i {
    font-style: italic;
}

    Hier fehlen die „fa“ für die Icons ???

    Die sollten doch vom Widget immer gleich erstellt werden, oder ?

    LG sendet

    Lynn

    • Dieses Thema wurde geändert vor 1 Jahr, 11 Monaten von Lynnv.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 1 Jahr, 11 Monaten

    Du verwendest

    <i class="fab fa fa-xing"       style="…

    und 

    <i class="fab    fa-facebook-f" style="…

    Beim zweiten Icon fehlt also die CSS-Klasse fa.

    Thread-Starter Lynnv

    (@lynnv)

    vor 1 Jahr, 11 Monaten

    Guten Abend Bego Mario Garde,

    aber warum funktioniert es bei der Seite „Team“ ???

    LG sendet

    Lynn

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 1 Jahr, 11 Monaten

    Deine Fragen sind eher etwas für ein CSS-Forum.

    Warum ist bei 

    .fa.fa-xing, .fa.fa-xing-square, .fa.fa-youtube, .fa.fa-youtube-play, .fa.fa-youtube-square {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}

    das Icon fa-facebook-f nicht mit aufgeführt?

    Wieso verwendest du dann 

    .fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}

    (was nicht greift, weil die erste Regel spezifischer ist)?

    Scheinbar wird auf der einen Seite mit FontAwesome gearbeitet, auf der anderen nicht. Wieso, kann ich anhand der Code-Schnipsel nicht erkennen und der von Elementor erzeugte Code ist so verschachtelt, dass ich auch nicht auf Anhieb durchsteige.

    Thread-Starter Lynnv

    (@lynnv)

    vor 1 Jahr, 11 Monaten

    Hi Bego Mario Garde,

    also das WIDGET ist ja im Theme und nicht im Elementor.

    Das CSS funktioniert ja, wenn es korrekt geladen wird, aber das Widget tut dies aber unterschiedlich.

    Wenn ich bei „Team“, da funktioniert es, mit den DevTools mir den Code ansehe, dann wird hier nach dem <i……. > </i> noch ein „::before“ – dies kommt auf den anderen Seiten nicht.

    Warum sagt das Widget einmal ::before und einmal nicht ?

    Es erscheint unlogisch 🙁
    Ein Code sollte doch immer gleich ablaufen – hmmmm.

    VG sendet

    Lynn

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 1 Jahr, 11 Monaten

    also das WIDGET ist ja im Theme und nicht im Elementor.

    Prima. Macht aber den von Elementor erzeugten Code auch nicht lesbarer?
    Wir beantworten hier Fragen in unserer freien Zeit – für mich sind das z.B. Pausen beim Programmieren. Diese Pausen reichen aber nicht, um „mal eben“ in einen reichlich verschachtelten Code einzusteigen. – Vielleicht meldet sich jemand anders, der gerade mehr Zeit aufbringen mag.

    Das CSS funktioniert ja, wenn es korrekt geladen wird, …

    Davon gehst du aus. Aber hast du das auch getestet?
    Kommentiere doch mal alle CSS-Änderungen, die du gemacht hast, mit /* … */ aus und schau, was sich ändert.

    Dein Browser arbeitet CSS-Regeln sehr logisch ab, Bugs sind weitgehend ausgeschlossen. Erfahrungsgemäß sitzt die Ursache vor dem Monitor. 😉

    Thread-Starter Lynnv

    (@lynnv)

    vor 1 Jahr, 11 Monaten

    Hallo Bego Mario Garde,

    hmm, alle Styles von mir sind im Widget direkt verdrahtet, sind ja nicht viele.

    Es macht keinen Sinn die rauszunehmen, denn wenn ich die rausnehme, macht er auch auf der „Team“ nichts mehr.
    Es geht ja auch nur um den Befehl color:#fff, der wohl ausgeführt wird, aber irgendwie nur in der „Team“-Seite 🙁

    Na dann warte ich mal ab, vielleicht hat ja Jemand so etwas komisches wie mich schon vor dem Monitor sitzen sehn 😉

    Dir vielen Dank und einen schönen Abend.

    Gruß

    Lynn

    Thread-Starter Lynnv

    (@lynnv)

    vor 1 Jahr, 11 Monaten

    Also der Fehler ist, dass bei der Teamseite im Elementor ein Icon verwendet wird, bei den anderen Seiten nicht.

    Nach dem nun alle Seiten ein Icon bekommen haben, funktioniert es überall.

    Grüße
    Lynn

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Das Thema „Widget lädt unterschiedliche Befehle“ ist für neue Antworten geschlossen.