Addons Manager Nightly

  • Guten Abend,

    mit Interesse habe ich diesen Thread überflogen.

    Eine Frage hätte ich zu dem Bild aus diesem Beitrag: Addons Manager Nightly

    Wie spreche ich die Umrandung (im Code) an, die sich bei "Hover" zeigt? Ich möchte den Rahmen noch verbreitern.


    Für die Code FX 70 u. 71 war ja diese Zeile zuständig:

    Code
    1. addon-list addon-card > .addon.card
    2. {
    3. width: 94vw !important; /* bringt die Container bis zum rechten Rand */

    Diese 94 vw habe ich für die Verbreiterung angesprochen!

  • Diese 94 vw habe ich für die Verbreiterung angesprochen!

    Hier im Nigtly mit dem neuen Code dieses:


    Code
    1. /* Ausdehnung der Container zum rechten Rand hin ****/
    2. .addon.card {
    3. width: 1567px;
    4. }

    Für Hover und Umrandung verwende ich das Paket:


  • Wie spreche ich die Umrandung (im Code) an, die sich bei "Hover" zeigt? Ich möchte den Rahmen noch verbreitern.

    Im Code aus Beitrag Nr. 73:


    CSS
    1. addon-list section addon-card div.card.addon addon-options panel-list panel-item:hover {
    2. background: green !important;
    3. color: white !important;
    4. border-radius: 80px!important;
    5. }

    Farbe etc. musst du dir dann natürlich anpassen.

  • So sieht der kompl. aus:


    CSS
    1. addon-list section addon-card div.card.addon addon-options panel-list panel-item {
    2. background: green !important;
    3. color: white !important;
    4. border-radius: 80px!important;
    5. }
    6. addon-list section addon-card div.card.addon addon-options panel-list panel-item:hover {
    7. background: red !important;
    8. }
  • Den Wert aus Beitrag Addons Manager Nightly von 1567 habe ich schon ohne Wirkung auf 2567px erhöht.

    Vielleicht habe ich mich unklar ausgedrückt:

    Den Code aus dem Vorbeitrag habe ich ausprobiert. Ich möchte den Rahmen um die grüne Füllung nach rechts verschieben (s.a. Pfeil!)

  • von 1567 habe ich schon ohne Wirkung auf 2567px erhöht.

    Wenn ich den Wert auf 2000 erhöhe, dann erweitert sich der Container so weit, dass ich die rechte Umrandung nicht mehr sehen kann. Und achte mal drauf im Bild, die blauen Button gehen auch mit nach rechts (sind fas nicht mehr zu erkennen).


  • @Büssen


    Ich kann hier den letzten Stand des Codes anbieten. Hierin sind alle Änderungen enthalten, die ich heute mit Andreas Hilfe ausgearbeitet habe.


  • Vielen Dank vorerst für eure Einlassungen.

    Mir wird es momentan zu wuselig - scheinbar hat sich durch die diversen Änderungen (bei mir) einiges verbogen.

    Ich mache dann mal Feierabend.

    Bis dann!

  • Die Breite der Add-on-Liste kann man mit folgendem Hack auf die Gesamtbreite ausdehnen:


    CSS
    1. :root {
    2. --section-width: -1px !important;
    3. }


    Dann kann folgender Block entfernt werden:


    CSS
    1. /* Ausdehnung der Container zum rechten Rand hin ****/
    2. /* addon-list addon-card > .addon.card {
    3. width: 1567px !important;
    4. }*/


    Edit: Ok, gibt noch ein paar Seiteneffekte :/, muss nochmal überprüfen...

  • Das Problem mit der falsch dargestellten Theme-Seite, ergibt sich dadurch, dass die Größe (insbesondere die Höhe) des Theme-Vorschaubildes durch den negativen Wert der Breite falsch berechnet wird und daher nicht dargestellt wird.


    In der Entwicklungsumgebung kann ich das Problem mit einer zusätzlichen Regel lösen. Sobald ich aber die gleiche Regel in die userContent.css einfüge, ignoriert er alles. Hängt vielleicht auch irgendwie mit den Frames zusammen...:/


    Die Regel lautet:

    CSS
    1. .card-heading-image
    2. {
    3. width: -1px;
    4. height: 100px;
    5. object-fit: cover;
    6. }


    Hier mal ein Screenshot, wo die Darstellung richtig ist:




    Vielleicht sieht ja jemand sofort wo der Fehler ist.


    Ansonsten war es vielleicht doch zu sehr gehackt...

  • Aarrgh....Ständig füge ich überflüssige '!important'-Anweisung hinzu und genau dann, wenn sie wirklich notwendig wären, lasse ich sie einfach weg :)


    Bitte mal testen: so sollte es jetzt funktionieren....

    CSS
    1. .card-heading-image {
    2. height: 100px !important;
    3. }