Support » Allgemeine Fragen » CSS Anpassungen für das Post Carousel nur in Elementor sichtbar

  • Gelöst flowjo81

    (@flowjo81)


    Hallo Zusammen,

    Ich hatte ein paar CSS Anpassungen für das Post Carousel (befindet sich ganz unten auf der Home/Startseite) im Customizer (grauer Text Hintergrund, keinen Eckradius usw.) gemacht und diese werden nur im Bearbeitungsfenster von Elementor korrekt dargestellt. Im Customizer, der Elementor Vorschau und auf der Website selbst sind sie nicht sichtbar und das Post Carousel hat wieder einen weißen Hintergrund und abgerundete Radien. Woran könnte das denn bitte liegen? Ich habe vor ein paar Tagen die globalen Farben und die globalen Schriftarten deaktiviert und stattdessen in den Elementor Theme Styles die gewünschte Typo eingestellt (kann es damit ggf. zusammenhängen) Ich verwende OceanWP und die kostenlose Elementor Version.

    Vielen Dank im Voraus für eure Hilfe!
    Schöne Grüße
    Flo

    • Dieses Thema wurde geändert vor 3 Jahren, 2 Monaten von flowjo81.
    • Dieses Thema wurde geändert vor 3 Jahren, 2 Monaten von flowjo81.

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

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Thread-Starter flowjo81

    (@flowjo81)

    Anbei noch mein bisherigen CSS Code Anpassungen im Customizer:

    .widget_categories li:first-child {
        border-top: none;
    }
    .widget_recent_entries li:first-child {
        border-top: none;
    }
    .widget_archive li:first-child {
        border-top: none;
    }
    .oceanwp-widget-recent-posts-li, .widget_categories li, .widget_recent_entries li, .widget_archive li, .widget_recent_comments li, .widget-recent-posts-icons li, .site-footer .widget_nav_menu li {
        padding: 6px 0;
        border-bottom: 1px solid #232323;
    }
    .single .entry-title {
        margin: 0 0 0px;
        border-bottom: none
    }
    .blog-entry.large-entry .blog-entry-readmore a {
    	  background-color: #7a7a7a;
        color: white;
    	  border: none;
    	  font-size: 16px;
    		line-height: 1.7;
    	  border-radius: 0px;
    	  text-transform: uppercase;
    	  letter-spacing: 8px;
    	  padding-top: 12px;
        padding-right: 16px;
        padding-bottom: 12px;
        padding-left: 27px;
    }
    .blog-entry.large-entry .blog-entry-readmore a:hover {
    	  background-color: #B39573;
    }
    .single .entry-content {
        margin-top: -8px;
    }
    
    .lae-posts-carousel.lae-classic-skin .lae-posts-carousel-item .hentry {
        background: #101010;
    	  border-radius: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    
    .category #main.site-main,
    .archive #main.site-main {
        padding-top: 50px;
    }
    
    element.style {
        border-bottom: none;
        padding-bottom: 3px;
    }
    .single-post ul.meta {
        border-bottom: none;
    }
    
    .related-post-title a {
        font-size: 16pt;
    	  font-family: "Oswald";
    }
    
    input[type="submit"], .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button {
        font-family: 'oxygen';
    	  border-radius: 0px;
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        padding: 17px 18px 17px 26px;
        border: 0;
        cursor: pointer;
        text-align: center;
        letter-spacing: 0.5em;
        line-height: 1.7;
    }


    Moderationshinweis: Kannst du demnächst Code bitte formatieren? Das wäre sehr nett. Danke.

    • Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von Bego Mario Garde. Grund: Code formatiert

    Deine CSS-Regel ist nicht spezifisch genug und wird durch die CSS-Regeln des Plugin Addons for Elementor überschrieben. Das kannst du ändern, indem du die Regel noch spezifischer machst – z.B. durch Hinzufügen einer weiteren CSS-Klasse:

    .elementor-widget-container .lae-posts-carousel.lae-classic-skin .lae-posts-carousel-item .hentry {
        background: #101010;
    	  border-radius: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    Thread-Starter flowjo81

    (@flowjo81)

    Aha…super, vielen Dank. Ich bin mit dem CSS echt etwas überfordert. Ich hätte noch eine Frage zu der unterschiedlichen Darstellung von dem Text „das könnte dir auch gefallen“ in den Blogbeiträgen.

    Einmal wird er so dargestellt (sehr groß, entsprechend den Blog Titeln auch „schreibe einen Kommentar“ ist viel zu groß): https://fd-design.com/stil-sichere-notizbuecher/

    und einmal so (klein und dezent, in anderem Font): https://fd-design.com/hello-world/

    Was habe ich denn da verbockt? Ich verstehe nicht wie das zustande kommt?

    • Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von flowjo81.

    Du hast in einem Elementor-Widget mit font-size: 45px eine recht üppige Größe ausgewählt:

    /* /wp-content/uploads/elementor/css/post-147.css */
    .elementor-kit-147 h3 {
        font-family: "Oswald", Sans-serif;
        font-size: 45px;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.7em;
        letter-spacing: 1.2px;
    }

    Mitunter musst du im Menü Elementor > Werkzeuge das CSS erneuern.
    Vielleicht hast du dich auch nur in den viele Einstellungsmöglichkeiten verheddert.

    Ich nutze Elementor aus Gründen nicht und wir haben im Supportforum wenig aktive Beteiligung von Elementor-Benutzer:innen. Aber es gibt eine Facebook-Gruppe Elementor Deutsch, die dir bei Fragen zu Elementor besser weiterhelfen kann.

    Thread-Starter flowjo81

    (@flowjo81)

    Danke nochmals für die schnelle Antwort. Die Schriftgröße hatte ich gewählt, weil sie mir auf der Startseite recht passend erschien. Aber vielleicht sollte ich sie wirklich etwas reduzieren. Ich habe das CSS mal erneuert, aber der Darstellungsfehler bleibt leider erhalten. Mich wundert nur, dass diese Schriftgröße einmal angewendet wird und einmal eben nicht?
    https://fd-design.com/stil-sichere-notizbuecher/
    https://fd-design.com/hello-world/

    Danke auch für den Facebook Tipp.

    Kennst du zufällig eine seriöse Anlaufstelle, wo ich zum Abschluss meine Homepage (gegen Bezahlung) mal prüfen und ggf. verbessern lassen könnte (z.B. nach Fehlern im CSS, Ladegeschwindigkeit, Auffindbarkeit bei den Suchmaschinen usw.)? Ich merke, dass ich mir etwas zu viel damit vorgenommen habe.

    Mich wundert nur, dass diese Schriftgröße einmal angewendet wird und einmal eben nicht?

    Du hast sie scheinbar für ein Elementor-Widget vergeben.

    Die normale Größe wird über

    .theme-heading {
        font-size: 14px;
        letter-spacing: 1.3px;
        margin: 0 0 20px;
        text-transform: uppercase;
    }

    definiert – Schriftgröße hier also 14px.

    Du hast aber für das eine Widget angegeben

    /* /wp-content/uploads/elementor/css/post-147.css */
    .elementor-kit-147 h3 {
        font-family: "Oswald", Sans-serif;
        font-size: 45px;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.7em;
        letter-spacing: 1.2px;
    }

    Elementor-Kit-147 ist dann ein sehr spezifischer Selektor für ein einzelnes Widget.

    Noch ein Hinweis: Jobangebote sind hier unerwünscht. Wenn du Dienstleister suchst, können wir dir hier nicht helfen. Unter https://forum.wpde.org/#jobs.64 findest du aber eine Jobbörse.

    Thread-Starter flowjo81

    (@flowjo81)

    Ok, vielen Dank für die ganzen Tipps Bego Mario Garde! Ich denke der Selektor Elementor-Kit-147 hängt dann mit dem Theme Style in Elementor zusammen. Dort hatte ich die Werte (45px usw.) nämlich für die H3 Überschriften angelegt. Ich hatte nur gehofft, dass diese Theme Style Anpassungen sich dann auch auf alle H3 Überschriften (auf Seiten und Beiträgen) auswirken.

    Thread-Starter flowjo81

    (@flowjo81)

    Danke und schöne Grüße, Flo

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Das Thema „CSS Anpassungen für das Post Carousel nur in Elementor sichtbar“ ist für neue Antworten geschlossen.