Beautiful Design App

[Community_Fridge]

how do i get the image centered?

[ThinhDinh]

It’s a CSS trick, as you may have found many examples from this thread

[Community_Fridge]

Can you show me how to Center the profile image ?

[PabloMFalero]

Blockquote[quote=“Lucas_Pires, post:46, topic:16191”]

<center><div style="background-image: url(AVATAR); 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border: 1px solid white; 
width:200px; 
height:200px; 
background-repeat: 
no-repeat, center; 
back ground-attachment:scroll; 
background-size: cover; 
background-position: center center;"></div>
<h2>NAME</h2>
TITLE

[/quote]

Use a template column and replace Name, Avatar and Tittle with your values from user’s tab. Then place the template on a Rich text component

[Drearystate]

Does anyone know the ccs name for inline lists. Im trying to shrink the length of an inline list to not go full screen but only 90% of the screen. And have it scroll within itself.

[Robert_Petitto]

There are different variations of them…a horizontal list vs a vertical list have different class names, for example.

[Tuttografica]

I congratulate you, your applications are always great and solve specific problems.
Cheers
Dario

[Drearystate]

Vertical inline

[Drearystate]

Thank you sir, I try to make them something worth using and not just a waste of time for you guys.

[Robert_Petitto]

Which layout?

[Uzo]

I think mine is very deferent than most of Apps here, take a look:

E-store

[Uzo]

wow! where do you put the code???

[Darren_Murphy]

In a Rich Text element.
Typically, these types of CSS tricks are used with Template columns - which then allows you to use substitutions to make them more dynamic.

Note that Glide doesn’t officially support CSS in Rich Text elements, and the class names could change at any time. So use at your own risk.

[Uzo]

@Robert_Petitto

<pre><span><style>
.tile-image-area :nth-child(1) img {
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px;
}

[data-test="tile-item"] {
border: solid 1px #9ec1cc;
}

[data-test="app-tag-overlay"] {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 10px;
text-transform: unset;
}
.tile-title {
position: absolute;
top: 10%;
right: 10px;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 150px;
font-weight: 700 !important;
font-size: 1.3rem !important;
line-height: 1.5rem !important;
}

.tile-image-area {
height: 170px;
}

cool, but is affecting whole tab… this trick is good if you only have a 1 list for whole tab
anyway… is nice tnx

[Darren_Murphy]

You can target individual components if you’re prepared to dig through the source and discover the class/element names. But again, it’s not officially supported so you need to be careful.

[Uzo]

is there a gallery of this kind of codes somewhere ?

[Darren_Murphy]

You’ll find lots of examples in this thread, actually.
Those that use it a lot tend to maintain their own “cheat sheets”, I think. (I do).

[Robert_Petitto]

Right. I have my own Google Keep library with my CSS:

[Lucas_Pires]

And now I want this non-aligned-card design too!

[Robert_Petitto]

Called “masonry” layout. Ya, that’d be nice.