Beautiful Design App

[Darren_Murphy]

@Robert_Petitto

That homescreen is SICK!

Care to share the CSS?

As far as getting the image full screen goes, I stole the following from @Mark_Turrell:

<div class="background"></div>
<pre><span><style>
.background {
  position: fixed;
  margin-top:0;
  margin-bottom:50px;
  width: 100%;
  height:100%;
  top:0;
  right:0; 
  left: 0%;
  z-index:-100;
  filter: brightness(100%);
  background-image: url("URL"); 
  background-size: cover;
  background-position: center center;
}

<pre><span><style>

[data-test="glide-app-bar"] :nth-child(1) {
    display: none;

}
#app-root div[opacity='1'] {
  color: transparent; 
}

<pre><span><style>
.class{
    font-family: 'Source Sans Pro', sans-serif;
}

Results in:

There is probably a bit of fluff in there that isn’t required, but I needed something quick and dirty at the time, and haven’t been back to experiment with it since.

[Robert_Petitto]

Ya…messing around with some CSS and placement of items…

[Lucas_Pires]

Funny seeing Netflix using emojis also in “tab’s name” lol

I thought only we did this

[Lucas_Pires]

I used this sequence of components in the screen to work well:

• 1st - A single Rich text with the code below
• 2nd - Image component (I used 3:2 format in this case)
• 3rd - Text (as header upper the image)

Copy and put it in one rich text component.

Separated by /*----- What this is for ------*/ you can identify what which one can do.

<a style="position: absolute; width:100%; top: 125px; right: 0%; z-index:-1; opacity: 1;" target="_blank">
<div style="background-color: white;  padding-bottom: 40vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div>
/*-----White rounded border bg -------*/
 </a>

<pre><span><style>
[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}  /*----- Nav-bar hidden -------*/

#app-root div[opacity='1'] {
  color: transparent;
} /*----- Nav-bar name hidden -------*/

[data-test="nav-bar"] {
  content: "";
  display: flex;
background-image: url(URL);
  background-size: 45px 45px;
  background-repeat: no-repeat; 
background-position: center, center;
;} /*----- Nav-bar icon -------*/

div[id*='screenScrollView'] > div > div:nth-of-type(2){
z-index: -2 !important;
opacity: 1 !important;
margin-top: -105px !important;
} /*----- Image to the Top -------*/

div[id*='screenScrollView'] > div > div:nth-of-type(3) {
z-index: -1 !important;
margin-top: -115px !important;
} /*----- Text to the Top -------*/

[Robert_Petitto]

BEAUTIFUL!

Thank you, Lucas!

[ThinhDinh]

THANKS LUCAS!

[Lucas_Pires]

You’re welcome bro!

[Jesus_Or]

Hola me encantaron los botones redondeados, te importaría compartirme es css, te lo agradecería muchísimo

[Pedroydzito]

Thank you!

<span><style>
[data-test=app-button-view] {border-radius: 25px;
</style></span>

[Lucas_Pires]

Thank you!, man! Simple but beatiful detail
Gonna try it

[ThinhDinh]

White entry components (text + image picker + phone) on full background.

<pre><span><style>
[data-test="app-text-field"] > .tf-inner {
border-bottom: 1px solid white;
background-color: transparent;
}
[data-test="app-text-field"] > .tf-inner >div {
color: white;
}
[data-test="app-text-field"]  .tf-inner :nth-child(1) {
color: white;
}
[data-test="app-text-field"]  .tf-inner .ta-inputbox {
color: white;
}
[data-test="app-file-picker"] >div {
color: white;
}
[data-test="app-file-picker"] :nth-child(1) {
opacity: 1;
color: white;
}
[data-test="app-file-picker"] :nth-child(2) {
color: white;
}
[data-test="app-hint"] .hint-header {
color: white;
}

[ThinhDinh]

Personalized welcome message at the top + circle profile image.

Preset: 1st item in the screen is an inline list with welcome message being the details field, title and caption are filled by a template empty character taken from https://emptycharacter.com/.

Code:

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) .imageBaseStyle {
border: solid 3px #0962A9;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

[data-test="list-item"] .textDetailStyle {
font-weight: 800;
color: #0962A9;
font-size: 23px;
line-height: 1.8rem;
white-space: break-spaces;
}

Thanks to previous ideas from @Lucas_Pires and @Robert_Petitto (for styling nth-component and customizing the border of the image).

[ThinhDinh]

Update: If you want the text under the welcome message.

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) .imageBaseStyle {
border: solid 3px #0962A9;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) .textDetailStyle {
font-weight: 800;
color: #0962A9;
font-size: 23px;
line-height: 1.8rem;
white-space: break-spaces;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) .textCaptionStyle {
font-weight: 600;
color: black;
opacity: 0.6;
white-space: break-spaces;
}

[AymenM]

How sick is that ! I’ve tried to reproduce it but it didn’t work the same way than on your pictures. Is the text under the Welcome message an action or rich texte ?

[ThinhDinh]

Do you mean for the first or second code? For the second one it’s the caption of the inline list.

[AymenM]

Wrote too fast everything is working fine Thanks !!

[Darren_Murphy]

One for the CSS gurus… @Lucas_Pires @Manu.n @ThinhDinh

I’m trying to stop that “Wed” from wrapping, and can’t for the life of me figure it out. Here’s my current CSS:

.calendar__date {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(7, minmax(10%, 1fr));
  grid-gap: 10px;
  box-sizing: border-box;
}

.calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  font-weight: 600;
  color: #262626; 
}

Note that the Days of Week use the .calendar__day class, which inherits from .calendar__date.
I’ve tried adjusting the font-size, I’ve tried setting nowrap, but nothing seems to work.

Any clues?

[Manu.n]

H @Darren_Murphy
It’s curious,
Can be a padding: 0px;
or a slightly larger Width
or a white-space: pre-wrap! important;

Edit
But the base is a List component or HTML ?
It may be correct to make a new discussion on the forum !

[ThinhDinh]

Can you give us the HTML code of that calendar to test? Thank you.

[Darren_Murphy]

here’s what the HTML template looks like:

<div class="calendar">
  <div class="calendar__picture">
    <h2>{Year}</h2>
    <h3>{Month}</h3>
  </div>
  <div class="calendar__date">
    <div class="calendar__day">Sun</div>
    <div class="calendar__day">Mon</div>
    <div class="calendar__day">Tue</div>
    <div class="calendar__day">Wed</div>
    <div class="calendar__day">Thu</div>
    <div class="calendar__day">Fri</div>
    <div class="calendar__day">Sat</div>
    {ListDays}
  </div>
</div>

One thing I realised is that the wrapping issue is only present in the builder - when I view on my IOS phone, it’s fine. So maybe I’m worrying about nothing…