The CSS I am using these days

[Darren_Murphy]

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.

[ThinhDinh]

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

[baremeter]

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 …

[baremeter]

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

[ThinhDinh]

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

[baremeter]

OH YES - ah the brackets then !!

[baremeter]

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

Thanks

[ThinhDinh]

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

[Mike_Greene]

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

[baremeter]

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

[AyS_0908]

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

[ThinhDinh]

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

[Lucas_Pires]

This is only in the builder @AyS_0908

Btw, happy birthday

[AyS_0908]

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!

[Nadir_Abdelrahman_MD]

This is really great.