Also in Desktop / Table view
Yes, absolutely. I’ve been asked to do this, and I have a hard time explaining why I can’t.
That homescreen is SICK!
Care to share the CSS?
Yeah! Im not on pc right now. When I get it, I send it here
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.
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 -------*/
BEAUTIFUL!
Thank you, Lucas!
You’re welcome bro!
Hola me encantaron los botones redondeados, te importaría compartirme es css, te lo agradecería muchísimo
Thank you!
<span><style>
[data-test=app-button-view] {border-radius: 25px;
</style></span>
Thank you!, man! Simple but beatiful detail
Gonna try it
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;
}
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).
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;
}
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 Thanks !!