Beautiful Design App

[Deena]

Thanks to @Lucas_Pires:

[_eric]

How do you do the circle profile pic?

[Lucas_Pires]

[Robert_Petitto]

Several ways. Depends what else is on the screen. You can use an image component and then style it. I’m using a round tile component, setting it to 2 tiles per row and then creating a Rich text box with this CSS:

.fdeRBK {
    grid-template-columns: repeat(1, 1fr);
    width: 200px;
    margin: auto;
}

If you want the colored background, I placed the rich text box with the CSS at the very top and included this CSS:

<pre>
<span><style>
[data-test=app-markdown-view] {
background-image: url("https://www.colorbook.io/imagecreator.php?hex=ff5723&width=1054&height=548");
position: absolute;
height:100px;
width: 100%;
}

So the entire code in the Rich text box is

<pre>
<span><style>
.fdeRBK {
    grid-template-columns: repeat(1, 1fr);
    width: 200px;
    margin: auto;
}
[data-test=app-markdown-view] {
background-image: url("https://www.colorbook.io/imagecreator.php?hex=ff5723&width=1054&height=548");
position: absolute;
height:100px;
width: 100%;
}

Note, you can change the background image to whatever you want. The one I included, you can change the hexcode to match your theme!

Variations:

[_eric]

This is incredible! Thanks so much for sharing this info.

[Lucas_Pires]

Oh, wow! Never seen that lol

@_eric I use CSS and Template column

<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

Replace in template column each one (Avatar, Name, Title)

[Jen_NYCP]

How do you get the white text box to overlay on the image like that? The one right below the social icons, and can it work for the title and details of an inline list?

[Trustin]

Hi! I am new to the community!
As a coffee home brewer, i love to trying out new beans but find it difficult to track and keep the bags
I spend a month creating an app to help me to just that. Keep track of my brew.

Brew Better App

Feedbacks are welcome!
Learning so much from all of your sharing! Keep it coming!

[ilimp]

Great! But one question. If I have two lists on same page. They are both become using this style (1 column centered). How to make only one list using this style?

[SantiagoPerez]

Thanks for sharing! That is awesome!!!

[SantiagoPerez]

Hey @Deena,

Would you share how you accomplish this?

It is gorgeous!!!

[Deena]

Sure, the Gif or the profile layout?

[SantiagoPerez]

Both if you don’t mind.

[Deena]

1. @Lucas_Pires sent me the code. It won’t let me copy paste here, so you can grab it from this file:

Profile Layout Code

2. Screen recording on iPhone

3. Template in Mojo app
   

   

4. Converted video to GIF in Gif Maker
   

   

[SantiagoPerez]

Thanks!

[SantiagoPerez]

These are great. Only thing I can’t display the picture.any ideas on what I’m doing wrong?

@Deena @Lucas_Pires

[gvalero]

Put your CSS code here to check it @SantiagoPerez

[Deena]

You have to go into the code and insert the URL for the picture you want to use. Did you try that? I’m like the blind leading the blind lol.

[SantiagoPerez]

Yes! @Deena

Here it is @gvalero

[Deena]