Any way to do this with CSS?

I don’t think this was covered in our Notion, but @Lucas_Pires has this set up like a year ago :wink: He may help you.

2 Likes

@Lucas_Pires ! Could you help me?

When I sit in my pc tomorrow morning I send to you!

2 Likes

Thank you! I hope for that friend

Asking @Serpa because I guess he has this one easy-get than me :grin:

1 Like

@Jorge_Hernandez Here it is:

  1. Create a template column and paste the CSS below
CSS Code
</div></div></div>
<div style="background-image: url(COVER-IMAGE-URL);
   -moz-border-radius: 50%;
   -webkit-border-radius: 0%;
   width:120%;
   height:200px;
   background-attachment:scroll;
   background-size: cover;
   background-position: center center;
   position: relative;
   z-index:1;
   opacity:1;
   transform:translate(-50%,-55%);
   left:50%;
   margin-top: 12px; border: 3px solid #c3c3c3; background-color:red;"></div>

<div style="background-image: url(IMAGE-URL); 
-moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 top: -200px;
 width:80px; 
height:80px;
 background-attachment:scroll;
 background-size: cover;
box-shadow: rgb(0 0 0 / 45%) 0px 2px 4px;
 background-position: center center;
 position: relative; 
z-index: 1; transform:translate(-50%,245%);
 left:50%; margin-top: -147px; border:4px 
solid #f3f3f3; background-color:white ;"></div>

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

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

[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}
  1. Replace COVER-IMAGE-URL and IMAGE-URL for the Cover and Image you wanna add respectively.
  2. :warning: Important: Add a Rich text component at first in your screen (above all components!)

Result

image


  • Doc in Notion with the CSS :point_down:t3:

Powered by @Serpa

6 Likes

Oh man. This is beautiful. I thank you in my soul, Lucas. All the best!

1 Like

Is there an easy way to capture the url for an image that has been entered on a Glide table? I can view and copy the image urls for those on a Google sheet, but I always save images in Glide tables now that we can, and this would make it much easier to use the CSS above. In the table I can only view the actual image, not the url. Thanks!


When I scroll the image goes down on my screen as well. Is there a way to correct that?

You can do this simply with a column template

1 Like

I have updated the code and add one more important step. Plz take a look :point_down:t3:

3 Likes

Genius! @Lucas_Pires

2 Likes

If there are any more magic coming from @Serpa, and if he allows it, please upload it to our Notion :wink: Thanks a lot for the update bro!

4 Likes

I had not seen Mr. @Serpa but this is really magic. Thankful to you, gentlemen!

2 Likes

Oh wow Lucas :star_struck:

You are superb :facepunch:

1 Like

Always there’s magic coming from @Serpa and @Pedroydzito for sure!

5 Likes

@kabookie a lil trick is click on the image cell in glide tables and do the command to copy (Ctrl/Cmd+C), when you paste it, you’ll see the link there :wink:

5 Likes
2 Likes

Great :ok_hand:Is it possible to “make” that forefront image clickable? (I prefer when anything in UI is useful) I mean by say adding an invisible button right there that could edit Profile/trigger Sign in/Navigate to help/home screen?
And maybe use a template col to catch the current user’s Profile pic to condition the url in the CSS?

Thks Lucas.
And BTW, welcome to my LinkedIn! You found me! Cool surprise :cherry_blossom:

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.