Beiträge von Sailor56

  • Hover-Effekt bei Beitragsbildern entfernen

    Ja... durch den Selektor 'Page ID' wirken diese Anweisung nur auf der Seite, die mit dieser ID ausgezeichnet ist. Wenn du diesen Selektor entfernst, dann wirkt die Anweisung auf alle Seiten, wo auch immer die angegebene CSS Klasse verwendet wird.
    Das musst du einfach ausprobieren, ob es unerwünschte Effekte gibt, wenn du das machst!

  • Hover-Effekt bei Beitragsbildern entfernen

    Also, wenn es dich dann nicht stört, dass bei hovern ein Teil der Animation wieder erscheint... dieses kleine Linksymbol... dann kannst du den Teil mit

    .featured_item_fadder .featured_ico_link {
    }

    einfach wieder löschen - oder durch /*.....*/ auskommentieren,
    Dann sollte der Link wieder funktionieren, aber wie gesagt, dann erscheint auch wieder das kleine Linksymbol - ich empfinde das nicht wirklich als störend.

    Frage 2: Ja, kann man ...

    .page-id-350 .featured_item_content {
    display: none;
    }

    Da ich nicht sicher bin, ob die Klasse .featured_item_content noch irgendwo anders benutzt wird, habe ich die Page ID .page-id-350 davor gesetzt, damit es nur auf der Startseite wirkt.

  • Hover-Effekt bei Beitragsbildern entfernen

    Du könntest versuchen folgendes im 'zusätzlichen CSS' einzutragen (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

    .page-id-321 .featured_item_fadder:hover img,
    .page-id-368 .featured_item_fadder:hover img {
    opacity: 1;
    }
    .page-id-321 .featured_item_fadder .featured_ico_link,
    .page-id-368 .featured_item_fadder .featured_ico_link {
    display: none;
    }
    .page-id-321 .featured_item_fadder .item_info,
    .page-id-368 .featured_item_fadder .item_info {
    display: none;
    }

    Das sollte die Hover-Animation in den von dir benannten 2 Bereichen deaktivieren.

  • Category-Page: Produktkurzbeschreibung als hover + Produkte gleich hoch?

    Dein Anliegen mit dem 'Mausüberfliegen' verstehe ich nicht! Was soll beim Mouseover (hover) wo und wie auftauchen?

    Frage 2... vom Augenschein hast du für die Zeilenhöhe ~ 1.5em vorgegeben. Wenn in dem Element, dass zur Zeit die Höhe bestimmt, zwischen 2 - 4 Zeilen vorhanden sind, dann könnte es helfen, wenn dieses Element mit einer minimalen Höhe (min-height) ausgezeichnet wird. Für maximal 4 Zeilen wären das dann 1.5em * 4.

    .title-wrapper .product-title {
    min-height: 6.0em;
    }

    Im zusätzlichen CSS könnte helfen.

  • Marcie Theme Sidebar verschieben und Content-Bereich vergrößern

    Zu deinem Problem Nr 1.! Mir ist aufgefallen, dass in deinem Quellcode (im <head>...</head> Bereich) eine entscheidenden Anweisung fehlt.
    Um de Seite für mobile Geräte tauglich zu machen müsste dort...

    <meta name=viewport content="width=device-width, initial-scale=1">


    als Anweisung stehen. Und das möglichst weit oben.. am besten direkt nach dem <head>.
    Da du ja mit einem Child Theme arbeitest, das ist im übrigen ok, wenn du CSS Änderungen auch dort durchführst, kannst in diesem Child Theme - ich vermute in der 'header.php' - die obige Anweisung einfach hineinkopieren! Wenn du da an der richtigen Stelle bist, dann wirst du erkennen, wo es hin gehört! Da sollte irgendwas in der Art...

    <!DOCTYPE html>
    <html <?php language_attributes(); ?> class="no-js no-svg">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    [COLOR=#ff0000]<meta name="viewport" content="width=device-width, initial-scale=1">[/COLOR]
    <link rel="profile" href="http://gmpg.org/xfn/11">

    <?php wp_head(); ?>
    </head>
    zu finden sein - und das Rote muss dann sinngemäß bei dir eingefügt werden!
    Probiere es und melde dich wieder..

    Zu deinem zweiten Punkt habe ich noch keine weitere Idee - ich kenne dein Theme nicht und weiß auch nicht, wie man dort die Beiträge manuell bearbeitet.
    Aber hast du nicht gesagt, dass du dort Beiträge manuell hineinkopiert hast, um sie in voller Länge anzeigen zu lassen? ... kann da was schief gelaufen sein?

  • Hintergrundbild einer Zeile ansprechen

    Wie vermutet handelt es sich um Hintergrundbilder, die mittels CSS durch 'background-image: url(https://.....)' eingefügt werden.

    Die Einfügung - auf deiner Startseite - erfolgt zu den Klassen (<div class="....">)
    .vc_custom_1519236504257, .vc_custom_1519231493915, .vc_custom_1519231509991

    Um hier das Verhalten des Hintergrundbides beim 'hover' zu verändern, könntest du zB folgendes in dein zusätzliches CSS schreiben (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

    .vc_custom_1519236504257:hover,
    .vc_custom_1519231493915:hover,
    .vc_custom_1519231509991:hover {
    background-size: 110% !important; [COLOR=#ff0000]/*oder was auch immer deinen Vorstellungen entspricht*/[/COLOR]
    }

    Und falls du unsicher bist, wie das gemacht wird, hier ein kleines Video!
    https://www.youtube.com/watch?v=KJpZT5IkOpc

  • Hintergrundbild einer Zeile ansprechen

    Tja... damit kann man wenig bis gar nichts anfangen :(! Da ist kein Bild - und wenn da ein ist dann ist es ein Hintergrund irgendeines der diversen div's, die du da eingebaut hast.
    Es fehlt das zugehörige CSS!
    Gib und den Link zur Seite, dann wird die Sache sicherlich schnell zu beantworten sein, aber so kann ich nur sagen.. identifiziere das Element, dass die beeinflussen willst und nutze :hover, um den gewünschten Effekt an diesem Element zu erzielen.

  • Marcie Theme Sidebar verschieben und Content-Bereich vergrößern

    So wie ich das sehe, ist auf der Seite, auf der die Proportionen nicht sind, wie du es möchtest, zusätzliche Elemente im HTML Code eingefügt, die nicht zum Grid-Layout passen.
    Im Grundaufbau sollte es so sein, dass du ein Elternelement hast (Grid Container) für dessen Kindelemente du das Grid definierst... in deinem Fall auf der funktionierenden Seite etwa so:

    <div id="content"....> <- das ist der Grid Container - mit der Anweisung, die du im CSS gemacht hast
    <section id="primary"...>...</section> <- die linke Spalte ... 8fr
    <section id="secondary"...>...</section> <- die rechte Spalte ... 2fr
    </div>

    dazu ein Bild, wie es in deinem Quellcode richtig aussieht!

    Auf der fehlerhaften Seite hast du nun den HTML Code anders aufgebaut... etwa so:

    <div id="content"....> <- das ist der Grid Container - mit der Anweisung, die du im CSS gemacht hast
    [COLOR=#ff0000]<section id="primary"...>...</section> <- das ist nicht die linke Spalte, sondern hier kommt jetzt der graue Kasten 'Recherche Tipp...'
    <main id="main"...>
    <article id="post-289"...>
    <section class="single-header"...>...</section>[/COLOR]
    <section id="primary"...>...</section> <- die linke Spalte ... aber eben nicht mehr mit 8fr
    <section id="secondary"...>...</section> <- die rechte Spalte ... aber eben nicht mehr mit 2fr
    [COLOR=#ff0000] </article>
    </main>
    </section> [/COLOR]
    </div>

    Das was ich rot gekennzeichnet habe gehört da nicht in... ich denke es ist der Eintrag, der eigentlich in der linken Spalte stehen sollte - also der Inhalt von <section id="primary"...>...</section>

    Und der dazu passende Screenshot von der fehlerhaften Seite:

    Ich hoffe, das war jetzt verständlich... aber in kurz... der HTML Code ist falsch/ nicht passenden zu dem, was du haben willst.

  • Marcie Theme Sidebar verschieben und Content-Bereich vergrößern

    Mit dem vorhanden Grid Layout lässt sich das Breitenverhältnis zwischen der rechten und dem linken Spalte mit

    #content {
    grid-template-columns: 8fr 2fr;
    }

    einstellen! Das sollte natürlich ins 'zusätzliche CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

    Für mehr Informationen siehe - https://www.w3schools.com/cssref/pr_grid…ate-columns.asp

    NACHTRAG / ERGÄNZUNG.

    Da das Theme responsive ist, muss die obige CSS Anweisung in eine MediaQuery eingefügt werden...

    Media only screen and (min-width: 57.5em) {
    #content {
    grid-template-columns: 8fr 2fr;
    }
    }

    damit es auch bei allen Bildschirmbreiten richtig angezeigt wird

  • Startseite Schriftzug/Schriftfarbe/Schriftgröße vom Seitennamen bzw. Logo ändern

    Kein Problem... das Forum ist ja für 'Neulinge' da! Und jeder ist mal so angefangen.. als Neuling.
    Schau dir deinen Quellcode an... der sieht an dieser Stelle etwa so aus!

    HTML
    <div class="title-block">


         <h1 class="site-title"><a href="http://www.segelpause.de/" title="Segelpause" rel="home">Segelpause</a></h1>


         <h3 class="site-description">von Herzen für Herzen</h3>
                
</div>


    Da siehst du, da ist ein <div class="title-block> und zwischen dem öffnenden Tag <div> und dem schließenden Tag </div> sind 2 Elemente eingefügt... ein <h1>..</h1> und ein <h3>...</h3>.
    Beide.. das <h1> und das <h3> sind dann Kindelemente von <div class="title-block">... oder anders herum, das <div> ist das Elternelement von den beiden Überschriften!

    Wenn du im CSS eines von beiden ansprechen willst, dann ist es sinnvoll, hier möglichst genau zu sagen, was du ansprechen willst - in dem Elternelement <div class="title-block"> das Kindelement <h3 class="site-description">...</h3>
    Das würde dann (vollständig) so aussehen...
    div.site-title h3.site-description {
    anweisung: wert;
    }
    oder (verkürzt)
    .site-title .site-description {
    anweisung: wert;
    }

    War das jetzt verständlicher? Die Informationen, die du brauchst, sind alle im Quellcode enthalten.

    Und wenn du meine obige Antwort mal genau liest, dann steht da schon ganz genau drin, wie du nur die <h3 class="site-description">von Herzen für Herzen</h3> schwarz bekommst!

  • eingebettetes Video

    gerade getestet... mit [FONT=courier new]iframe[src*="youtube.com"] funktioniert das - [size=14]aber du hast immer noch nicht den Fehler Nr1 (fehlende abschließende Klammer) beseitigt.[/SIZE]
    Der neue Code muss also so aussehen!

    ... aber solange du den Fehler darüber nicht bereinigst, wird das nicht wirken!

    Eine MediaQuery baut sich immer folgendermaßen auf

    Media screen and (max-width: xxx) { [COLOR=#ff0000]<- das ist die öffnende Klammer für die Query![/COLOR]
    [/FONT]
    [FONT=courier new][FONT=courier new] iframe[src*="youtube.com"] { [COLOR=#ff0000]<- das ist die öffnende Klammer für die CSS Anweisung![/COLOR]
    height: calc(100vw / 2.0);
    } [/FONT][/FONT][FONT=courier new][COLOR=#ff0000][FONT=courier\ new][FONT=courier\ new][FONT=courier\ new]<- das ist die schließende Klammer für die CSS Anweisung![/FONT][/FONT] [/FONT][/COLOR]
    [FONT=courier new][FONT=courier new]} [/FONT][/FONT][FONT=courier new][COLOR=#ff0000][FONT=courier\ new][FONT=courier\ new][FONT=courier\ new]<- das ist die schließende Klammer für die Query![/FONT][/FONT]

    [/FONT][/COLOR][FONT=courier\ new][COLOR=#000000]CSS ist da sehr sensibel... wenn die Syntax[/COLOR][/FONT] falsch ist dann wird die Anweisung entweder fehlerhaft oder gar nicht umgesetzt!
    [/FONT]
    [/FONT]

  • eingebettetes Video

    statt 'iframe#_dytid_9486' - was sich ja wohl dynamisch ändert..
    setzt du [FONT=courier new]iframe[src*="youtube.com"]
    siehe Beitrag #5 von @b3317133

    Sollte das auch nicht funktionieren... es gibt noch etliche weitere Möglichkeiten diesen IFrame im CSS anzusprechen!

    [/FONT]

  • eingebettetes Video

    Seh ich...
    Fehler Nr1: Du direkt vor der Stelle in deinem CSS, wo du den Code eingefügt hast, eine weiter @mediaQuery stehen

    HTML
    @media only screen and (max-width: 800px) and (orientation: portrait) {
#mein_hinweis {
display: block;
}


.x-alert-success {
    background : none;
  }
}


    Da hast du aus Versehen die abschließende geschweifte Klammer [COLOR=#ff0000]}[/COLOR] gelöscht!

    Fehler Nr2: Warum auch immer ist die ID des IFrames jetzt anders??? Hast du sonst irgendwas an der Seite geändert?
    Auf jeden Fall heißt das Element jetzt
    iframe#_dytid_9486
    das müsstest du in deinem CSS korrigieren.
    Sollte sich diese ID des IFrames nochmal ändern, was eigentlich nicht sein sollte, melde dich wieder, dann finden wir einen anderen Selektor!

  • eingebettetes Video

    Das ist ein bisschen Fummelkram, denn die Proportionen des Videos (Breite * Höhe) müssen ja irgendwie auch passen und erhalten bleiben, wenn das Display kleiner wird.
    Da das Video in einem IFrame läuft, sind dessen Proportionen ausschlaggebend - das Video im Frame nimmt sich dann den Platz, der ihm gegeben wird.
    Teste bitte mal folgendes (im 'zusätzlichen CSS'):

  • Widgets an den Seitenrand verschieben

    Ja... SirEctor hat da den Punkt getroffen! Das kann eine größere Baustelle werden und jede Änderung an einer Stelle kann an anderen Stellen zu unerwünschten Nebeneffekten führen.
    Zusätzliche Komplikationen kommen hinzu, dass viele Dinge absolut positioniert sind und mit JavaScript einiges an den Formaten geändert wird, wenn die Seite scrolled.

    Aber einen Versuch könnte man ja starten. Teste bitte mal folgendes in deinem 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)


    Wenn es nicht funktioniert und/oder deinen Erwartungen nicht entspricht, kannst du es ja ohne Nebenwirkungen gleich wieder löschen!

  • Startseite Schriftzug/Schriftfarbe/Schriftgröße vom Seitennamen bzw. Logo ändern

    Zunächst hast du schon mal (fast) alles richtig gemacht - nur hast du, so wie ich es sehe, folgendes in dein zusätzliches CSS geschrieben:

    .entry-header, .title-block {

    [COLOR=#ff0000]{[/COLOR]color:
    #000000;
    }

    [COLOR=#ff0000]{[/COLOR].title-block .site-title a, .header-image .title-block .site-title a, .title-block .site-description, .header-image .title-block .site-description {
    color: #000000;}

    Diese geschweiften Klammern { ([COLOR=#ff0000]rot markiert[/COLOR]) ganz am Anfang gehören da nicht hin und macht den gesamten folgenden Ausdruck unwirksam - CSS ist in diese Hinsicht sehr sensibel!

    So eine CSS Anweisung hat immer das Format und wenn diese Syntax nicht eingehalten wird, führt das zu Fehlern... die Anweisung wird nicht ausgeführt... oder sogar alle folgenden Anweisungen werden ignoriert!

    Selektor {
    Eigenschaft: Wert;
    }

    Wenn du diese 'falsche' Klammer gelöscht hast, wirst du feststellen, dass der gesamte Überschriftenbereich in schwarzer Schrift dargestellt wird, da deine Selektoren eben alles dort ausgewählt haben.

    Im Moment sieht das bei dir so aus..

    Das Element, dass du ändern willst ist das <h3 class="site-description">...</h3>
    Damit hast du schon mal die Möglichkeit gezielt auf dieses Element zuzugreifen - durch ... h3.site-description oder auch nur .site-description
    Um sicher zu gehen, dass du nicht noch ein anderes Element ansprichst, dass den selben Selektor verwendet, grenzt du etwas weiter ein und benennst noch das Elternelement deines <h3>.
    Das ist das umschließende <div class="title-block">... </div>.
    mit
    .title-block .site-description {
    Eigenschaft: Wert;
    }
    triffst du dann dein 'VON HERZ ZU HERZ'

    Mein Vorschlag - lösche die fehlerhaften Anweisungen, die ich oben erwähnt habe (die sind sowieso unwirksam - weil falsch) und schreibe stattdessen:
    .title-block .site-description {
    color: #000000;
    }