The CSS I am using these days

I have a Notepad doc open with the CSS I use in the app (and some I am thinking of using but have not deployed yet). And big thanks to the community for these! I have not worked out any of them myself :slight_smile:

I am copying these across a bit quickly so I hope I have not got anything wrong!

CSS Used in Covessa

Adjust Title - narrow Image

<pre><span><style>

[data-test="app-summary"] >* {

margin-top: -150px;

{

Remove Top and Tab

<pre><span><style>

[id="tabBar"]{

display: none;

}

[data-test="glide-app-bar"] :nth-child(1) {

display: none;

}

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

color: transparent;

}

Remove Only Top


<pre><span><style>

[data-test="glide-app-bar"] :nth-child(1) {

display: none;

}

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

color: transparent;

}

Remove only Tab

<pre><span><style>

[id="tabBar"]{

display: none;

}

Move Floating Help button to Top Right

<pre><span><style>

.fab-target >:nth-child(1) {

position: fixed;

top: 14% ;

right: 2%

}

Remove Top & Tab & Move Help * Keep line breaks in Hint text

<pre><span><style>

[id="tabBar"]{

display: none;

}

[data-test="glide-app-bar"] :nth-child(1) {

display: none;

}

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

color: transparent;

}

.fab-target >:nth-child(1) {

position: fixed;

top: 14% ;

right: 2%

}

<pre><span><style>

[data-test='app-hint']{

white-space: break-spaces;

}

Change separator color

<pre><span><style>

[data-test="app-hr"] .sep-line {

background-color: blue;

opacity: 0.5;

}

Retain Line Breaks for Hint Text

<pre><span><style>

[data-test='app-hint']{

white-space: break-spaces;

}

Force Landscape

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {

html {

transform: rotate(-90deg);

transform-origin: left top;

width: 100vh;

overflow-x: hidden;

position: absolute;

top: 100%;

left: 0;

}

}

Reduce Opacity of overlay title in Image in tile

< pre >< span>< style >

.tile-overlay {

background: rgba(0, 0, 0, 0.2) !important;

}

CSS Improve Image Carousel - background color, highlight images


<pre><span><style>

[data-test="app-image-carousel"] .tag{

opacity: 1;

animation: none;

bottom: 10px;

}

CSS Add color background to entry field

<pre><span><style>

[data-test="app-text-field"]{

position: center;

backdrop-filter: blur(0px);

background: #F2BE24;

border-radius: 50px;

width: 60%;

padding: 2px 20px 12px;

}

CSS LOGO IN HEADER

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

} 

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

content: ""; 

display: block;

height: 45px;

background-image: url("INSERT URL");

background-size: 100px 20px;

background-repeat: no-repeat;

background-position: 55% 45%;

;}

CSS to Stop user Scrolling

<pre><span><style>

div[id*='screenScrollView'] {

overflow-y: hidden; !important;

}

Modal Popup - nice for help to appear with a toggle

<div style =" position: fixed;

top: 40%; width: 90%; opacity: 1;

background-color:white; border-radius: 10px;

padding-top: 10%;

padding-bottom: 10%;

padding-left: 7%;

padding-right: 7%;

text-align: center;">

<h3><font color=red>TITLE</h3>

<font color=0e0e0e>DESCRIPTION

</div>

<bg><a style="position: fixed; width:100%; top: 0%; right: 0%; z-index:-1; opacity: 0.9">

<div style="background-color:#131313; margin: 0%; padding:100%;">
29 Likes

tnx for sharing…
you can try in action CSS codes… change parameters… and see effect, by clicking this image:

Code BOOK

SA book copy

6 Likes

I fixed the formatting for you :slight_smile:

1 Like

Thank you!

Maybe one of the most complex, feature-filled app built in Glide :grin:

2 Likes

He’s certainly been stretching me to my limits, and beyond… (which is a good thing, of course :slight_smile:)

3 Likes

It looks like something is wrong with this one, I’ve tried to add it into my app and had a black square behind all my content…

I haven’t implemented this one yet properly - I did a proof of concept in a tab that I am not using anymore and it looked like this. This would be fine for me - focused the user, then click to make it go away again :slight_smile:

5 Likes

Thanks @Mark_Turrell very useful resource :+1:

3 Likes

What am I doing wrong ?


Thanks

I see that you’re linking to an image in your GDrive. Is that image publicably viewable?

yes it is
Screenshot 2021-07-10 at 13.05.14
I have tried it with white header too

G drive will not work, try to upload to glide

Or cloudinary

Looks like you should try it on this theme.

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