# Does this Favorites button CSS still work or is this from an older version of Glide?
**URL:** https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407
**Category:** Ask for Help
**Created:** [January 22, 2025, 9:49am UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407 "2025-01-22T09:49:03Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)
#### Post date: [January 22, 2025, 9:49am UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407/1 "2025-01-22T09:49:03Z")
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.
> **[CSS Library by LowCode Agency](https://css-library.glide.page/dl/library/s/8836b3/r/Jx06xD44S7-bHr6NY3CB1A)**
* * *
[data-testid=“wire-container-favorite-onTop”] {
margin-top: 0px !important;
}
.favorite-onTop \> div \> div \> .button-box {
position: absolute;
top:-240px;
left: auto;
right: 0;
}
.favorite-onTop svg {
fill: red;
}
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 23, 2025, 2:49am UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407/2 "2025-01-23T02:49:26Z")
@Himaladin Do you still remember what size of custom collection card you used for this?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [January 23, 2025, 3:28am UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407/3 "2025-01-23T03:28:14Z")
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):
```auto
/*Adjust Image in Container*/
[data-testid="wire-container-favorite-onTop"]:first-child {
margin-top: 0;
}
[data-testid="wire-container-favorite-onTop"] {
padding: 0;
}
/*Adjust button position*/
[data-testid="wire-container-favorite-onTop"]:nth-child(2) {
position: absolute;
top: 0;
}
/*Button icon*/
.favorite-onTop [data-testid="wbb-button"] svg {
fill: red;
}
```
---
### Author:  [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)
#### Post date: [January 23, 2025, 11:20am UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407/4 "2025-01-23T11:20:49Z")
> [@Himaladin](#):
>
> `wire-container-favorite-onTop`
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 \*/
}
/\* Make the button transparent _/
.favorite-onTop [data-testid=“wbb-button”] {
background: transparent; /_ Remove background _/
border: none; /_ Remove border _/
box-shadow: none; /_ Remove shadow _/
padding: 1; /_ Remove padding for tight icon alignment _/
z-index: 20; /_ Ensure visibility above other UI components _/
cursor: pointer; /_ Ensure button remains interactive \*/
}
/\* Style the favorite button’s SVG icon _/
.favorite-onTop [data-testid=“wbb-button”] svg {
fill: #27B6F4; /_ Set the icon color _/
width: 24px; /_ Adjust size for visibility (optional) _/
height: 24px;
transition: fill 0.1s ease; /_ Smooth color transition \*/
}
/\* Optional: Add hover effect for better interactivity _/
.favorite-onTop [data-testid=“wbb-button”]:hover svg {
fill: #27B6F4; /_ Darken color on hover \*/
}
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 23, 2025, 11:47pm UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407/5 "2025-01-23T23:47:41Z")
What’s your component setup for this? I tried adding it to a button block but your code doesn’t do anything.
---
### Author:  [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)
#### Post date: [January 25, 2025, 11:43pm UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407/6 "2025-01-25T23:43:37Z")
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.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [January 28, 2025, 2:09am UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407/7 "2025-01-28T02:09:56Z")
> [@ToOFa\_Apps](#):
>
> /\* 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 \*/
> }
>
> /\* Make the button transparent _/
> .favorite-onTop [data-testid=“wbb-button”] {
> background: transparent; /_ Remove background _/
> border: none; /_ Remove border _/
> box-shadow: none; /_ Remove shadow _/
> padding: 1; /_ Remove padding for tight icon alignment _/
> z-index: 20; /_ Ensure visibility above other UI components _/
> cursor: pointer; /_ Ensure button remains interactive \*/
> }
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.
---
### Author:  [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)
#### Post date: [January 28, 2025, 1:31pm UTC](https://community.glideapps.com/t/does-this-favorites-button-css-still-work-or-is-this-from-an-older-version-of-glide/79407/8 "2025-01-28T13:31:49Z")
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👍