CSS voor de bedragen-knoppen

  • Resolved svvhhk

    (@svvhhk)


    11 months, 1 week ago

    Beste Michael,

    In deze gerelateerde vraag werd gevraagd hoe een button te stylen. Nou weet ik niet of ik het verkeerd doe, maar als ik de knoppen van de vaste bedragen individueel zou willen stylen, dan is de Id van die knoppen bij elke aanroep van de modal form anders. Bijvoorbeeld, de 4e bedrag-knop heeft nu de Id=value-fixed-sxjq0goghe-3, maar als ik dezelfde doneer-campaign straks open, dan heet-ie bijvoorbeeld value-fixed-9yvg14tfeh-3 etc. etc.

    Op die dynamische naamgeving kan ik volgens mij geen css baseren, of kan het misschien ook met wildcards in de css entry? Ik heb al iets als dit geprobeerd, maar dat werkt helaas ook niet:
    input[id^=value-fixed-],input[id$=-3] {
    background-color: #ff0000 !important;
    }

    Is er een manier waarop ik alleen die ene knop een andere kleur kan toekennen en de andere knoppen niet?

    Bedankt vast,
    Ed

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author iseardmedia

    (@iseardmedia)

    Hoi Ed,

    Het lijkt erop dat je er bijna bent, je hoeft alleen de CSS-specificiteit te verhogen door dit ervoor te zetten form[id^=kudos-form], anders zal het de standaardinstelling niet overschrijven.

    Bijvoorbeeld, om de achtergrondkleur van de specifieke invoer te wijzigen, moet je het op deze manier schrijven:

    form[id^="kudos-form"] input[id^="value-fixed"] + label {
  background-color: #ff0000 !important;
}

    Groet,

    Mike

    Thread Starter svvhhk

    (@svvhhk)

    Dank voor je reactie, alleen is het nog niet precies wat ik bedoelde, want met deze code worden alle 4 de knoppen rood. Als ik alléén de laatste knop met id eindigend op -3 wil veranderen, wat kan ik dan doen? Ik heb ook weer de optie met ,input[id$=-3] eraan toe te voegen, maar dat werkt niet. Sorry, ik ben nou eenmaal geen css-guru ??

    Zou het anders bijv. mogelijk zijn om het variabele deel van de id eruit te slopen? Ik ben niet bang om een beetje broncode te editten.

    • This reply was modified 11 months, 1 week ago by svvhhk.
    Plugin Author iseardmedia

    (@iseardmedia)

    Hallo Ed,

    Om één specifiek element te targeten, zou ik het laatste deel van de ID niet gebruiken, aangezien dit kan veranderen wanneer je cache wordt vernieuwd. Wat ik in jouw geval zou doen, is het “value” attribuut targeten, aangezien dit uniek en voorspelbaar zal zijn.

    Bijvoorbeeld:

    form[id^="kudos-form"] input[id^="value-fixed"][value="20"] + label {
  background-color: #ff0000 !important;
}

    Voel je vrij om dit voorbeeld aan te passen aan je specifieke behoeften.

    Groet, Mike

    Thread Starter svvhhk

    (@svvhhk)

    Super bedankt! Dat werkt inderdaad.
    Dank voor je hulp en ik hoop dat er in een volgende versie misschien wel wat meer van die knoppen bij kunnen komen (bijv. een instelbaar aantal).

    Groet, Ed

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS voor de bedragen-knoppen’ is closed to new replies.