Beautiful Design App

You’re welcome bro!

Hello @Robert_Petitto. Will you have one that works for the title but in inline list view cards?

I made cards like this for an instagram style feed …

5 Likes

Care to share? :slight_smile:

2 Likes
<!--Card-->

<!--Description-->
<span><style>
[data-test=card-item-subtitle] {
position:absolute;
padding-left: 40px;
bottom: 7px;
</style></span>

<!--Title-->
<span><style>
[data-test=app-avatar-text] {
position:absolute;
padding-left: 32px;
bottom: 28px;
</style></span>

<!--Favorite Button-->
<span><style>
[data-test=app-toggle-icon-overlay] {
position:absolute;
padding: 14px;
bottom: 12px;
margin-left: -35px;
background:#1e232a;
filter: drop-shadow(rgba(0, 0, 0, 0) 0px 0px 0px)
</style></span>
6 Likes

I still can’t limit the width of the text so that it doesn’t pass the favorite button, so for now I just changed the button’s background to the card color…

That’s great! I would only set background color to transparent; and change drop-shadow a bit slightly

I guess @Robert_Petitto meant the code of how you did those ones together

2 Likes

Ouh… KKKKKKKK

3 Likes
<!--Image-->
<p style="position: Absolute;
width: 43px;
left: 50%;
margin-top: 0px;
margin-left: -140px;
transform: translate(-50%, 0%)">
<img src="https://i.imgur.com/FvPtAkr.png" /></p>

<!--Progress Bar-->
<pre><span><style>
.fckzPp {position: absolute;
background: #13161d;
height: 9px;
width: 261px;
left: 50%;
border-radius: 100px;
margin-right: -50%;
margin-left: 26px;
transform: translate(-50%, 0%)}
</pre></style></span>

And the text I created a template column, to be updated as the tasks are done.

<!--Text-->
<center><h5><font color="#efbc00">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FINISHED% Concluído<font color="#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; CONCLUDED/REMAINING Tarefas

Certainly there is a better way to make the spacing better, but it worked, except for the fact that the size is tiny when it is on its side, but I still have to fix it …

5 Likes

Has anybody ever been able to increase the number tiles or cards going across from 4 tiles to something like 7 tiles? I thought I saw it done once, but I can’t find anything in the forum.

1 Like

Maybe @Robert_Petitto !

Hmm, looking closer, that might be hardcoded in the div tag layout. I’m not sure I can override that.

1 Like

Sure have!

8 Likes

Yes!!! Go over to Jeff’s magic calendar concept thread. We have taken it a bit further. With your help, we could make the calendar 7 wide.

2 Likes

Open the treasure bucket :smiling_imp:

2 Likes

Is that a vertical or horizontal orientation on the list? Vertical with 7 wide and up to 6 rows would be preferred, but I could maybe make work with horizontal and multiple lists if need be.

1 Like

It’s horizontal, but i could probably finagle it to be a vertical list. Let me play with it a bit.

1 Like

In a vertical list, each row is a div tag with only the number of column under that tag, so I don’t think we can alter that much. I think I try to get something working with the horizontal layout.

1 Like

treasure bucket :sweat_smile:

1 Like

Getting there.

image

6 Likes