The CSS I am using these days

Upload to Glide - ?
I always use Google Drive - is there a Glide upload ?

Note in particular:

1 Like

There seems to be a contradiction…!

We do not recommend hosting your images outside of Glide. While it’s possible to make it work, services like Google Drive are not designed to share images in this way, and it’s difficult to configure.

It’s possible to use an external service like Dropbox, Google Drive, or Imgur to host your images. All you need is a shareable link to your online image that is public, so anyone can view it with the link. For example:

But if I need to add the URL to use in the header, then that has to be an external link…

No, there’s no contradiction. It’s possible to host images external to Glide, but not recommended.

You don’t have to add a URL, you could use the CSS in a template column, and use a replacement variable to insert the image at runtime. In fact, that’s the way this is usually done. The source can be a URL, yes. But it can also be another Glide column.

Hola a todos!

I could find a way to see images saved in GD using CSS code.

Instead of using this syntax:
https://drive.google.com/file/d/FILE-ID/view?usp=sharing

You must use this instead:

https://drive.google.com/uc?export=view&id= FILE-ID

All my APPs use this syntax and Google Drive as image storage.

Saludos

1 Like

I’ve found that the following works fine:

https://drive.google.com/uc?id={id}

But, I only use GDrive for images when I’m forced to.

2 Likes

Have you tried to change the theme as I suggested to see if it works?

Hi Tried but I must have something wrong - I have tried a link to Google Drive and then to an online URL !


Then entered a rich text element linking to the header column …

Hi
Yes I have tried but not working for me …
Can you just check my code ?

<pre><span><style>
#app-root div[opacity='1'] { 
color: transparent; 

} 

#app-root div[opacity='1'] {

content: ""; 

display: block;

height: 45px;

background-image: xpicture;
                               
background-size: 100px 20px;

background-repeat: no-repeat;

background-position: 55% 45%;

;}

(I have tried with and without " " )

xpicture =

https://image.hestia.immo/IMFFY5a315y98qLQ1IXEmTpyvk2FBnVsE-qIXnLewoA/w:200/h:150/rt:fit/aHR0cHM6Ly9jZG4uaGVzdGlhLmltbW8vaW1hZ2UvVEVOM1hQTkMvMjAyMS0wMy9ET0NBV0RXMFMyQ1cuanBlZw.jpg

1 Like

Please try this directly in a rich text component.

<pre><span><style>

[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}

.nav-bar-root {
  content: "";
  display: flex;
  background-image: url(https://image.hestia.immo/IMFFY5a315y98qLQ1IXEmTpyvk2FBnVsE-qIXnLewoA/w:200/h:150/rt:fit/aHR0cHM6Ly9jZG4uaGVzdGlhLmltbW8vaW1hZ2UvVEVOM1hQTkMvMjAyMS0wMy9ET0NBV0RXMFMyQ1cuanBlZw.jpg);
  background-size: 45px 40px;
  background-repeat: no-repeat; 
  background-position: center, center;
}

2 Likes

OH YES - ah the brackets then !!

Ok - I now have the image in situ - any way that I can center the text “BAREMETER”

Thanks

<pre><span><style>

[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}

[data-test="glide-app-bar"] >div >div >div >div {
text-align: center;
}

.nav-bar-root {
  content: "";
  display: flex;
  background-image: url(https://icon-library.com/images/speedometer-icon-png/speedometer-icon-png-8.jpg);
  background-size: 45px 40px;
  background-repeat: no-repeat; 
  background-position: center, center;
}

3 Likes

Many thanks, as usual, you have been extremely helpful.
Always knocked over by your knowledge!
Loving Glide.

2 Likes

Hi
Love your CSS … Can you help in reducing spacing between rows in a form ?

Hi, I am trying to use your CSS magic with one of my image, but I keep having this white line on the top.
Do you have any idea on how I can get rid of it?
Many thanks

image

Can you show me the list of components you have on that screen? Is your rich text on top of the image?

1 Like

This is only in the builder @AyS_0908

Btw, happy birthday :grin:

1 Like

Thanks @Lucas_Pires @ThinhDinh.
You’re both right: my CSS was at the end of the builder + the line disappears on the live app!

Thanks!

2 Likes

This is really great.

1 Like