Hi there, I’m finding that my page numbers (where they appear) are being set to the same colour as the background of the app page. I’ve tried a few different ways to CSS this away and find a solution, but I can’t seem to get anything that works at all - it doesn’t help that I’m very much a novice for such things!
Ideally I’d like to either:
- Change the colour of the ‘selected’ number (e.g. make it white too, so it can be seen on the background), or
- Apply a different colour to the box the number sits in (e.g. make that white, so the blue number no longer, or
- Apply any formatting to the numbers in general (e.g. change the colours more generally on this element) to make either the selected or non-selected numbers stand out appropriately
I guess bonus points if we would also be able to target the buttons which are defaulting to the card/black colour for me? (It’s not a big deal but it’s kind of irritating me I can’t swap them, either!)
TIA for any and all help, appreciate it.
1 Like
To be honest I think it’s a bug. Have never seen this before. Have you tried reporting this as a bug?
1 Like
Are you using a custom accent colour?
3 Likes
Yes I’m using a custom accent colour; #577ACF if that’s of any use!
I’ve not reported as a bug but I definitely can do. Have also reached out to support to see if it is solvable by them, so will post there if it’s still busted!
1 Like
I don’t think support will help you.
Once you select a custom accent colour, basically all bets are off and you are on your own.
Glide used to show a warning about this when you select a custom colour, but that seems to have disappeared.
1 Like
Your custom accent color #577ACF works fine on my side.
The issue is more likely caused by some CSS leaking from another rule.
4 Likes
Ooh this is interesting to know, thank you, Darren. I received no such warning!
@Himaladin - thank you for spotting this, I’ve been able to resolve a couple of issues that way. I’ve also increased the list size to like, 999, for some pages to bypass the need for pagination.
I think that when using the accent colour for the container background, it can work - however I’m having to use an image background for the container (just a flat image of that specific colour) to then get the cards in the container to behave as I’d like them to, without pulling through the wrong highlight/dark mode colour.
And I think that’s what is causing the issue - the pagination on image-backed containers is pulling through weirdly as it’s using the accent colour.. which is the same as the background I’m putting it on. But I’m then struggling to override that with CSS. Maybe I’ll just have to make do and work around it!
You’re welcome. So, are you still using the image background, or did you switch back to the accent color?
I wouldn’t recommend increasing the page size to 999. The default page size of 24 is also to ensure fast loading times. Your app will become very slow by increasing it like that. Also, do you HAVE TO work with the image background for your app?
Sorry for the delay here @Himaladin ! For some components, I’ve been able to move away from the image background and just use accent, but it doesn’t work for everything.
@jb_1mprove I’ve tried to do it moderately - I had meant to type 99 as opposed to 999, but in reality I don’t have quite that many items, even. But I do take the point. Using the image background is the only way I’ve been able to get a suitable look and feel for my use case (which is a kids encyclopaedia app) - I need the ‘card’ style, but don’t want the built-in combinations I’ve been able to see (e.g. the black card shape)
Customer support has said to reach out here for help in identifying a consistent CSS selector for the pagination section - I guess it would be super helpful to know if I can impact the ‘selected’ state on the pagination - either to swap the colour of the number, or else the box around it. If anyone is able to help with that element, I’d be very appreciative!
.custom-class button.selected-page-number {
color: var(--gv-text-contextual-dark);
}
If you also want to change the background, then you need to add: !important;
Thank you for this @Himaladin . However, I can’t seem to get it to work. I’ve tried swapping the colour to other bits, and adding the ‘custom-class’ to the CSS Class in my Collection but that hasn’t pulled it through either unfortunately. I’m conscious I’m likely missing something here as I’m no expert in this field - do you have any other suggestions at all?
Can you show some screenshots of what you have set up on your end? Thank you.
1 Like
