# CSS card list Scoreboard style

**URL:** <https://community.glideapps.com/t/css-card-list-scoreboard-style/56089>\
**Category:** Ask for Help\
**Created:** [December 27, 2022, 4:48pm UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089 "2022-12-27T16:48:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [December 27, 2022, 4:48pm UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/1 "2022-12-27T16:48:02Z")

</div>

![Screenshot 2022-12-27 at 17.40.06](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/a/8af7063c3381d4d251ab06617c5b19f7411f5f2a.png)  
I have made this awesome-looking app with CSS, but the CSS only works on my computer, and when I publish the app it doesn’t show.

```auto
<pre><span><style>

//The image area
.rOCYe { 
flex-direction: row;
}

//The actual image 
.rOCYe .image {
width: 140px !important;
position: relative !important;
padding:12px;
}

//the cards image container
.card-image-container {
background-color: rgb(30,34,43) !important;
width: 35% !important;
padding-bottom: 0% !important;
}

//The bottom area of the cards list
.rOCYe .bottom-area {
flex-direction: row;
}

//card title container
.rOCYe .card-title-container:not(:last-child) {
position: absolute;
top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//The actual card title
.rOCYe .card-title {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.1rem;
}

//The small avatar image in cards list
.ijoIwu .placeholder, .ijoIwu > img, .ijoIwu > canvas {
width: 100px;
height: 100px;
border-radius: 0px;
margin-right:0px;
}

The small avatar image container
.rOCYe .card-footer .bottom-left-overlay {
flex-direction: row;
}

```

I already know what the problem is, I think. Texts like “.rOCYe” and “.ijoIwu” are only being triggered on my computer. But what can I do to replace this, so it still gets triggered?

Information:  
I’ve used a cards list with:

- Image (Squared)
- Tittle
- Avatar image

I really need some help, thanks

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 27, 2022, 6:41pm UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/2 "2022-12-27T18:41:01Z")

</div>

Looking good?

 ![Cards CSS](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c7e13183afc31c44e180bb7aeb0cfd2900cc2c4b.jpeg) ![scoreboard dark theme](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/db2a6740d1a2b4778f7d70b9f4c2c7c7151c8805.jpeg)

tested in Chrome, Safari… Mobile and Desktop… you owe me a beer! 😉

**[Code BOOK](https://code-book-desktop.glideapp.io)**

[![beer button](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/628f80dbbf71c07ddb7269668578af4019f49e55.png)](https://code-book-desktop.glideapp.io/dl/54886d)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 28, 2022, 12:03am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/3 "2022-12-28T00:03:36Z")

</div>

Looks okay…you just can’t use unnamed classes (the .rOCYe etc.) just used the named classes. Some styles need to be marked important. Know that when Glide converts apps to Pages in 2024, this is going to break.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 28, 2022, 12:14am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/4 "2022-12-28T00:14:34Z")

</div>

I already fix it to good classes 😉 they will DELETE APPS ??? @Robert_Petitto

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [December 28, 2022, 1:09am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/5 "2022-12-28T01:09:55Z")

</div>

Yes apps will be phased out by end of next year. Pages will be the main product and you won’t be able to create a new “app”. Existing apps will become “Legacy Apps” and supported for an undetermined amount of time.

The timelines were a little vague but that info is from David himself.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 28, 2022, 1:12am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/6 "2022-12-28T01:12:55Z")

</div>

oh… ok, lots of people will be very angry if they lose CSS, many of them paid big $ to make great Apps!  
By the end of this year, we will create an alternative platform, that will have CSS elements, so I’m not worried about that… just feel bad for those who paid for Glide Apps… but if they stay as legacy, that’s good.

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [December 28, 2022, 2:15am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/7 "2022-12-28T02:15:18Z")

</div>

Yes if they stay Legacy that would be great but eventually the support could be dropped. There were mentions of an Apps to Pages converter which sounded much more powerful/ productive than what we have today. I’m not counting on it though 😉

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [December 28, 2022, 10:45am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/8 "2022-12-28T10:45:50Z")

</div>

I do owe you a beer. And I hope my css will help people in the future, I took me a LONG time to get that CSS working😆

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 28, 2022, 1:39pm UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/9 "2022-12-28T13:39:17Z")

</div>

Enjoy! Thanks to your beer, I can make more codes 😉

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 8, 2023, 1:37am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/11 "2023-01-08T01:37:54Z")

</div>

Clever. How would you create something like this using images and text that are all in the same row? Say:

| img1 | img2 | team1 | team2 | score1 | score2 |
| --- | --- | --- | --- | --- | --- |
| 🥵 | 🥶 | Fire | Ice | 10 | 8 |

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 8, 2023, 1:38am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/12 "2023-01-08T01:38:22Z")

</div>



---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 8, 2023, 1:43am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/13 "2023-01-08T01:43:10Z")

</div>

hmmm… cards have two images… you can move them into one row and adjust the sizes… or calculate positions in the inline list and make a horizontal card list with 6 columns… either way a lot of playing with CSS 😉

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 8, 2023, 1:59am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/14 "2023-01-08T01:59:54Z")

</div>

I’d probably do a HTML table. But I guess you need each row to be clickable?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 8, 2023, 2:12am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/15 "2023-01-08T02:12:58Z")

</div>

Could be done with a custom collection and html.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 8, 2023, 2:15am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/16 "2023-01-08T02:15:25Z")

</div>

oh, yes. I’ve been struggling to find a good use case for a Custom Collection. But that’s _definitely_ a good one 👍

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 8, 2023, 2:23am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/17 "2023-01-08T02:23:51Z")

</div>

Ooo…good call. I’m getting warmer!

 ![CleanShot 2023-01-07 at 21.23.05@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/23120c9de8fa5ae22d6052d80f06dc0e6cd7034f.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 8, 2023, 2:33am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/18 "2023-01-08T02:33:52Z")

</div>

Template column = success!

Alignment…not so much…

 ![CleanShot 2023-01-07 at 21.33.17@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/7/a75a5a4f8b2d6f01efeba45fa2292b786ab02a97.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 8, 2023, 3:11am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/19 "2023-01-08T03:11:13Z")

</div>

just use my CSS in Code BOOK 😉

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 8, 2023, 3:21am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/20 "2023-01-08T03:21:20Z")

</div>

Your code book doesn’t have what i’m looking for.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 8, 2023, 3:27am UTC](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089/21 "2023-01-08T03:27:07Z")

</div>

it looks like what I did at the top of this post…

[Next page](https://community.glideapps.com/t/css-card-list-scoreboard-style/56089.md?page=2)