Beautiful Design App

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.

6 Likes

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

6 Likes

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

I thought only we did this :rofl:

3 Likes

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 -------*/
19 Likes

BEAUTIFUL!

Thank you, Lucas!

2 Likes

THANKS LUCAS!

4 Likes

You’re welcome bro! :grin:

2 Likes

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

Thank you!

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

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

2 Likes

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;
}
12 Likes

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).

7 Likes

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;
}
8 Likes

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 ?

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

Wrote too fast everything is working fine :slight_smile: Thanks !!

1 Like

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?

2 Likes

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 !

1 Like

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

1 Like

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…

2 Likes