Beiträge von Sailor56

  • Videogröße bearbeiten

    Versuche bitte folgendes CSS im 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

    HTML
    .youtubevorschaubilder {
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
}
.video-wrapped {
  width: 32%;
  max-width: 32%;
  margin: 3px auto;
}

  • ShopSeite Full Width

    Das liegt daran, dass bei dir Container mit der ID #main an diversen Stellen im CSS mit einem Padding ausgezeichnet ist.
    Mit

    HTML
    #main {
    padding: 0px 0px 0px 0px;
}


    im 'zusätzlichen CSS' könnte man das 'ausschalten'. Ich kann das aber schlecht abschätzen, wie sich das auf andere Unterseiten auswirkt, auf denen mit Sicherheit auch ein Container #main vorhanden ist.
    ggf. müsst man den Selector (#main) noch etwas modifizieren, damit er nur auf der Shop-Seite wirksam ist.

  • ShopSeite Full Width

    Das könnte daran liegen, dass in deinem CSS für das/die Element(e) '.products-4 > li' eine Breite von 24.25% vorgegeben ist. Damit füllen diese Elemente nicht die 100% des verfügbaren Platzes aus (4*24.25% = 97%)!
    Teste mal ...

    HTML
    .products-4 > li {
    width: 25.0%;
}

  • Theme twenty seventeen : Farbe des Menü Icons ändern

    Also ich würde dieses Ding 'back to top Button' nennen... aber ob dir das hilft die Farbe zu ändern?
    Klick doch mal einfach in der Desktopansicht und reduzierter Bildschirmbreite mit der rechten Maustaste auf das Symbol - wähle 'Element untersuchen' (oder sinngemäß, Bezeichnung ist abhängig vom Browser) und schau dir an, welche Selektoren du verwenden kannst, um mit CSS dann an die Farbe zu kommen.

  • Produkt Abstände

    Funktioniert nicht? ... hmmm... sollte es aber.
    Kann es sein, dass du den CSS Code an einer falschen Stelle (also nicht im zusätzlichen CSS) eingefügt hast - oder die Seite nach der Änderung nicht aktualisiert und ggf. den Cache Speicher nicht geleert hast?

    ... so sollte es aussehen. Die weiße Linie zwischen den Bildern ist eine Border um das <ll></li> - auch die bekommt man noch weg...

    Und der letzte Punkt - die Bilder bildschirmbreit würde auch gehen. Dazu müsstest du dem 'li' zusätzlich eine Breite von 25% geben

    HTML
    .products-4 > li {
   margin-right: 0px;
   border: 0px;
   width: 25%;
}


    und
    für die Elternelemente

    HTML
    #main {
  padding: 20px 0px 20px 0px;
}
#main .fusion-row {
  max-width: 100%;
}


    Die letzten beiden Vorschläge sind allerdings mit Vorsicht zu genießen - da musst du prüfen, ob auf anderen Unterseiten diese nicht zu unerwünschten Nebenwirkungen führt. Wenn ja, müsste man den/die Selektor(en) etwas näher spezifizieren, so dass die Änderungen nur auf der Shop-Seite wirken.

    Beim Ausprobieren ist mir aufgefallen, dass deine Seite bei einer Bildschrimgröße < 1024px die Anzeige einspaltig wird ... tja... und dann irgendwie grottig und mickrig aussieht :(!
    Du könntest mal versuchen, ob du diese Anzeige etwas aufhübschen kannst, wenn du mal mit der Breite etwas variierst.. zB

    HTML
    @media screen and (max-width: 1024px) {
  .fusion-body .products li {
   width: 50%;
}
}

  • Produkt Abstände

    Versuche bitte mal

    HTML
    .products-4 > li {
   margin-right: 0px;
}


    Ins 'zusätzliche CSS (Dashboard -> Design -> Customizer -> zusätzliches CSS) einfügen.
    Was meinst du mit 'ganz am Bildschirmrand'?

  • Link Hover Effekt mit CSS?

    Das hier solltest du noch zu deinem CSS Code... bitte unter den vorherigen Code einfügen, damit die Linkanzeige auf einer deine Unterseiten (ich glaube es war das Ticketsystem) wieder richtig funktioniert.

    HTML
    .page-id-554 .wpb_wrapper a {
  padding: 20px 0px 25px 85px;
}


    Sollte dir sonst noch etwas auffallen, das durch die Änderungen jetzt ungewollt mit verändert wurde, bitte Bescheid geben.

    Zu diesem Twitter Style bräuchten wir nicht den Link zum Plugin, sondern auch wieder den Hinweis, wo auf deiner Seite die Änderungen gemacht werden sollen?

  • Link Hover Effekt mit CSS?

    So.. jetzt doch - schneller als erwartet.
    Hier der an dein Design angepasste Code:


    .. und ja... wie @SEpp55 nochmals aufgezeigt hat... der Code gehört ins 'zusätzliche CSS'!

  • Link Hover Effekt mit CSS?

    Im Prinzip sollte es genau so gehen... du musst dir das passende CSS aus dem Codepen heraussuchen und ggf dieses CSS und deinen eigenen Code entsprechen anpassen.
    Du müsstest dann entweder deinen Links die Klasser '.move-horzontal' geben, was aber sicherlich zu umständlich und auch unnötig wäre... oder du musst das '.move-horizontal' durch deinen Selctor (.wpb_wrapper a) ersetzen. Dazu musst du noch die entsprechenden Formatierung für 'span' mit hinzufügen, denn im Codepen wird der animierte Teil ja mit <span class="move-horizontal"> gekennzeichnet.
    Tja... und dann muss natürlich noch alles das auf dein Design angepasst werden... Schriftgröße.. Zeilenhöhe... Farben.. margin... padding und was auch immer noch!
    Ich habe mal auf die Schnelle das relevante CSS aus dem Codpen rauskopiert und schon mal den Selector angepasst - ABER(!!!) eine Anpassung an dein Design habe ich noch nicht gemacht.


    Füge das mal testweise in dein zusätzliches CSS ein, dann wirst du schon sehen, was ich unter 'anpassen ans eigene Design' meine.
    Da ist noch einiges zu machen, für das ich im Moment leider nicht die Zeit habe.

  • Link Hover Effekt mit CSS?

    Dann teste bitte folgendes:

    HTML
    .wpb_wrapper a {
  color: red;
}
.wpb_wrapper a:hover {
  color: yellow;
}


    im Customizer im 'zusätzlichen CSS'.
    Damit solltest du gezielt die Links auf dieser Seite (im Text) ansprechen können.
    Ich habe da jetzt nur die Schriftfarbe zum testen eingetragen, um zu sehen, ob es überhaupt erfolgreich ist. Das musst du dann natürlich anschließend durch dein 'Wunsch-CSS' ersetzen.

  • Ushop

    Prinzipiell gibt es mehrere Möglichkeiten über CSS eine zentrierte Ausrichtung zu erzielen, wenn das die Einstellungen im Theme nicht hergeben.
    Was nutzt du denn, um dein jetziges Layout zu realisieren.. irgendein Grid System... Bootsrap oder sowas
    Das Einfachste wäre, wenn du einen Container (Elternelement) identifizieren könntest und dem dann über CSS das Format 'text-align: center;' zuweist.
    Den Kindelementen innerhalb dieses Containers... deinen Produkten... müssten dann per CSS das Format 'display: inline-block; bekommen bzw werden diese wahrscheinlich schon haben.
    Gibt aber noch weitere Möglichkeiten, wenn das nicht funktioniert.
    Wenn du keinen Link geben kannst, dann poste doch mal den relevanten Teil des Quellcodes, vielleicht kann man daraus ein bisschen was ableiten.