Card Button Class

[wwonderfull]

How to add class attribute to a button inside the card. Although I would love to edit the html but I can only change the cards html not the buttons html individually.
Predefined style also seems disabled for Card Button by default.

[crispy68]

I'm pretty sure you cannot add css to a card button. You would need to edit the html or add via javascript like:

Code: Select all

<script>
var button=document.getElementById("Card16-card-item3");
button.classList.add("crispy68");
</script>

[wwonderfull]

That does give a solution @crispy thank you for sharing. In absence of that I had to use multiple id in css method as a replacement for class.

[wwonderfull]

I'm pretty sure you cannot add css to a card button. You would need to edit the html or add via javascript like:

Code: Select all

<script>
var button=document.getElementById("Card16-card-item3");
button.classList.add("crispy68");
</script>

As the script works for one single ID I was searching..
What code would it be if I want to string multiple ids and add one class to them.

[crispy68]

@wwonderfull,

There could be several ways to achieve this and it also depends on how many cards you have. We are also assuming the cards look identical with the button essentially in the same spot on each card. Although, with the code below, you could simply change the "item" number to match where the button is.

This solution is using just javascript and no jQuery.

So for example, lets say the card has a Title, text and button. The button will be "card-item3" in the code since the button is in the 3rd position. So in this example lets rename the ID"s of the cards to: Card1, Card2, Card3. When published, the ID of the first card button will look like: #Card1-card-item3.

so if you have a small number of cards you could do something like this:

Code: Select all

var buttons=document.querySelectorAll("#Card1-card-item3,#Card2-card-item3,#Card2-card-item3");
for(const button of buttons){button.classList.add("crispy68");}

Just change the "#Card1-card-item3" above to match what you have.

Now, if you have a large # of cards (like 50!) then I would have to put together a different solution to make it easier.

[crispy68]

So if you have a large number of cards where adding each one to the first line of the code above would be too much and, using the same set up as before where each button is card-item3 (3rd position), you can do something like the following:

Code: Select all

var buttons=document.querySelectorAll("[id$=card-item3]");
for(const button of buttons){
button.classList.add("crispy68");}

This will target all of the buttons that are "card-item3" regardless what the ID is and add the class.

You may ask "I have 20 cards. What if 10 of my cards the button is item-3 and the other 10 are item-4"?

Then you would write your code as such:

Code: Select all

var buttons=document.querySelectorAll("[id$=card-item3],[id$=card-item4]");
for(const button of buttons){
button.classList.add("crispy68");}

[wwonderfull]

I did find that code also in stack overflow but didn't figure out how to use it for the cards button in wwb.

Thank you @crispy for the detailed functions and information. This is more like a tutorial for me so learned from another wwb expert. Thank you again