Custom CSS

imiduno

Hello,
Thank you for Files App, it's really an awesome tool!
On the old forum, a member had posted a custom css and you showed below a similar and really nice custom example.
Could you share this code?
Thanks very much.

It was this one:

amwps

imiduno Karl I posted it. I wrote this:

.svg-folder + .files-data:before { content: ''; background: url(https://cdn.jsdelivr.net/gh/twitter/twemoji@13/assets/72x72/1f4c1.png) no-repeat; background-size: 20px; position: absolute; height: 20px; width: 25px; top: 6px; left: 2px; }

Need to replace picture

Karl

You can try to add the below to _files/custom/custom.css (create the file if it does not exist). It's just a CSS fix, and it seems to work with grid and row layouts. I skipped the folder icon, as that was just created by using an EMOJI 📁 and seems a bit pointless to me.

.files-grid .files-folder-preview, .files-rows .files-folder-preview {
    opacity: 1;
    max-width: none;
    max-height: none;
    left: 0;
    transform: none;
    width: 100%;
    bottom: 0;
    height: 100%;
    border: none;
    box-shadow: none;
    top: 0;
}
.files-grid .files-data, .files-rows .files-data {
    z-index: 1;
    background: white;
}

I'll perhaps add a proper style as an option in a future release.

imiduno

Thank you very much 🙂

bikerfelix89

I hope I can chime in once in the thread.
I am still looking for a CSS solution for a drop-shadow or box-shadow for each Files gallery item.
My attempts to transfer drop-shadow code snippets from the X3 Support Forum or the Embed Support Forum to the custom Files CSS are unfortunately unsuccessful.
Is there a simple solution?
Thanks in advance.

Karl

Tried this?

.files-a {
  box-shadow: 1px 1px 8px rgba(0, 0, 0, .3);
}

You probably don't want it for all the layouts though. To apply only to rows layout:

.files-rows .files-a {
  box-shadow: 1px 1px 8px rgba(0, 0, 0, .3);
}

bikerfelix89

Many thanks for your fast reply Karl.
Strangely, your entries in my custom.css have no effect on my Files page. I use the default Files folder structure (_files/css/custom.css).
Somehow, loading the custom css in index.php (current v0.4.1 and also tried older versions) seems not to be taken into account.
Only after replacing line 1871 in index.php <?php get_include('css/custom.css'); ?>
with the direct customisation

<style>
  .files-a {
  box-shadow: 1px 1px 8px rgba(0, 0, 0, .3);
  }
</style>

the box-shadow takes effect.

But I also can't rule out that the problem is behind the computer, because I have little experience with css and website creation. 😅 But the small detour directly via the index.php is satisfactory for me for now.

Keep up the great work. Your Files app is stunning, nice and fast and easy to use! 😃

Karl

Just tried it from here, and the CSS works fine from _files/css/custom.css. Perhaps the CSS was not formatted correctly, or maybe something permission related? I could diagnose further if you could provide a link. Remember, if you update Files app, you will lose any changes you made to index.php.

Johnny91

Does this still work?

I tried it on the newest updated version. But instead the thumbnails of the folder are completely white

Karl

Johnny91 There are a few different things done in this thread. What exactly are you trying to do?

Johnny91

Karl

To change the folder icons 📂 to thumbnail of the image inside the folder

Karl

Johnny91 I can't really say up front if it works or not in current version, although I would have thought so. Do you have a link?

Johnny91

Karl it's okay now, I played with some settings. Thanks