I’ve tried this CSS but it doesn’t seem to be working. This to me looks like an older version of glides components, but custom collections came after the favorite button was Phased out if i remember correctly, so i thought i’d ask the community.
Can anyone offer assistance with this.
Here is the link to the CSS Library page and i’ll add the code below.
I don’t remember exactly which thread the code was posted in. It’s probably a custom collection that contains images and button blocks (with a ‘heart’ icon) that can be toggled. It seems that Glide may have updated its DOM hierarchy, but the .button-box class is still there. Try using the selector without the div.
Or try this new code (results achieved with eyes closed):
This is great, thanks for that. It didn’t work at first so i asked Chat GPT to check, Chat GPT also suggested some variations. I’ll put the code below:
[Add a button box and an image to a custom collection and it positions the buttons on top of the image. Make button transparent. The two buttons have an action that checks or un-checks a boolean column, and you can increment count each check (or use ITE column to either increment up if boolean is false or increment down if boolean is true). So when you click the fav/follow icon it sets the boolean as true, increments the counter column up (this is to track how many people are following), and the fav icon action is set to hide if boolean is true, vice versa for the unfav/unfollow.]
Here is the code:
/—FAVORITE BUTTON—/
/* Ensure container has proper stacking context /
[data-testid=“wire-container-favorite-onTop”] {
position: relative; / Establish stacking context for the container /
padding: 0;
margin-top: 0;
z-index: 1000; / Elevate container to ensure visibility */
}
/* Adjust button position to be on top /
[data-testid=“wire-container-favorite-onTop”]:nth-child(2) {
position: absolute; / Position relative to the container /
top: 180%; / Center vertically relative to the container /
right: -1; / Align to the far right /
transform: translateY(-70%); / Adjust vertical alignment /
z-index: 10; / Ensure visibility above other elements */
}
I used a button block and an image component on a custom collection. It basically places the button block directly on top of the image. Then the css makes the button block backing transparent so all you see is the heart icon. Use conditional viz to hide the button if the boolean column is true and the other button to hide if the boolean column is false.
The background styling of the button block is no longer necessary. You can achieve this directly through the component panel settings with a minimalist style and proper alignment.
Oh yes, you’re right. Problem is i wouldn’t know how to separate out the different functions. Will leave as is (if it ain’t broke, don’t fix it). Thanks though👍
