I built the main page of my website with a Softr “List with horizontal sliding cards” block. It displays cards with job information coming from my Airtable database. I am looking for a way to change the color of the first item/card in that list.
The website is weworkinspace.com. I have tried inspecting the source code in my browser, but couldn’t find any pointers.
Is it possible to use CSS (or with another method of custom code) to give the first item of the list a different appearance? How do you reference to specific elements of such a list of cards in code?
Hi
You can reference it with css-xxxx like in the screenshot. Each card has a different one.
You should use the method
document.getElementsByClassName(“css-xxx”);
Dear Matthieu,
Thanks for your quick reply!
On weworkinspace.com I cannot seem to find this reference. It appears to be build up differently? When inspecting the elements in my browser, I do not come across similar code like you showed in your screenshot.
Hope you can help me point to where to look…
Is MuiBox the name of your List block on Softr? Mine is called list3.
What card do you want to change exactly? A card on hover ? On click ?
Are you sure this is a list with horizontal sliding cards and not a list with horizontal cards?
And do you have the last update for this list block?
It does say “List with horizontal sliding cards” in Softr. Here’s a screenshot from my account:
I would like to change the color of one of the list items, as to highlight one of the jobs advertised on the website. So all of the list items now have a white background with black text. I want to change the background color of one of the items, or of the top item, into light orange for example, so it stands out.
Thanks for pointing me at the Block version. I do not use the latest update of this list block yet. I was afraid it would cost me a lot of time to re-arrange and reconfigure stuff if I update the block… Perhaps that is part of the problem here?
Yes you should update it so you can properly point to the right element.
So you want the first item (item at the top) of the list to have a different background color? Am I right?
Okay, I’ll try updating the block today and try again, thanks.
Yes that is correct. Either:
- the first item (item at the top) of the list, or,
- a specific item in the list.
depending on what is most feasible.
Tell me when it’s done so that I can retry to create the needed code
I created a test page with the updated List block here: https://www.weworkinspace.com/test
This page contains a block of custom code and a list block using the same Airtable as before. The custom code I used is the following:
<style>
.css-blhqza {
background-color: yellow;
}
</style>
I tried to create a yellow background for one of the elements with this code, but it will use it for all items on the list, not just the one I thought I’d picked (the top one).
Can you try this one:
Replace #list1 by the name of your block. To be put in the “code inside header” of the page or in a custom code block
<style>
#list1 > section > div > div > div.filters-middle-section.container.MuiBox-root.css-0 > div > div > div > div > div > div:nth-child(1) > div > div {
background-color: #FFD580;
}
</style>
Or this one (both should work by the way)
<style>
#list1 > section > div > div > div.filters-middle-section.container.MuiBox-root.css-0 > div > div > div.content-section > div > div > div:nth-child(1) > div > div {
background-color: #FFD580;
}
</style>
In the inspector, once you choose what seems to be the right element, right click on this element and choose the option “copy”. Inside “copy” you will find “copy selector”. Click on it.
This is what you will insert in the css code.
To find the first element I use the css pseudo class :nth-child(). If you wanted the second element, for example, you would write :nth-child(2) and so on.
Wauw, this is fantastic! It works perfectly! Thank you very much. I would have never found out how to work this out by myself… Thanks!
Hey Matthieu, thanks for your solution. Is there a better way to reference to specific element by its content? As soon as I change filters in a list block it will always change the look of the first item, but I want to achieve that it changes the look of only a specific item. Unfortunately I could not find any unique ID for each element in the list block. It’s hard to add custom code via CSS or JSS.
