CSS Login screen #331

Ryach · 2022-04-25T14:14:46Z

Ryach
Apr 25, 2022

Could you help me add my own CCS file for Login screen please
how to ad it to yml script

felddy · 2022-04-25T15:10:15Z

felddy
Apr 25, 2022
Maintainer

I'm assuming you are trying to do something similar to what was documented by @TheEpicSnowWolf here:

One way to do this is by using the CONTAINER_PATCHES feature documented in the README:

https://github.com/felddy/foundryvtt-docker#optional-variables

Steps:

Set CONTAINER_PATCHES=/data/container_patches
Create the container_patches directory on your data volume.
Create a shell script in container_patches containing the code to modify the css. (See example is below)
Start the container.

Below is an example shell script that downloads the css from the project mentioned above, and concatenates it onto the stylesheet file.

`patch_login_css.sh`

#!/bin/sh

CSS_PATH="resources/app/public/css/style.css"
CSS_URL="https://raw.githubusercontent.com/TheEpicSnowWolf/Foundry-VTT-Prettier-Login-Screen/5e67554ae1c16ba77775398531b46225bb05b0aa/foundry_login.css"

log "Downloading CSS from $CSS_URL"
curl -s -o /tmp/foundry_login.css $CSS_URL

log "Applying CSS patch"
cat /tmp/foundry_login.css >> $CSS_PATH

Please, let me know if this is what you were looking for.

4 replies

Ryach Apr 25, 2022
Author

Hi thank you for prompt answer yes it exactly what I'm looking for.
but I'm not sure my knowledge about docker it's limited please clear for me if you can.
I would like to add my custom.css - for changing the login page for example class is:
#join-game #world-description {.....} and this is in foundry style.css
so for that if I properly understand in my docker-compose.yml i'm adding:

version: "3.8"

services:
  foundry:
    image: felddy/foundryvtt:9
    hostname: my-domain
    init: true
    volumes:
      - type: bind
        source: /home/pi/docker/foundry
        target: /data
        CONTAINER_PATCHES=/home/pi/docker/foundry
    environment:
      - FOUNDRY_PASSWORD=foundry-pass
      - FOUNDRY_USERNAME=my-ussername
      - FOUNDRY_ADMIN_KEY=my-admin-key
    ports:
      - target: 30000
        published: 30000
        protocol: tcp

In folder foundry in this case where I have this docker-compose.yml
adding two files:

patch_login_css.sh
custom.css
in patch_login_css.sh (this I'm not sure):

#!/bin/sh

CSS_PATH="/home/pi/docker/foundry/custom.css"

log "Applying CSS patch"
cat /tmp/foundry_login.css >> $CSS_PATH

and finally for in my custom.css:

#join-game #world-description {
    display: none 
}
#myid{
 and other id css code here
}

felddy Apr 25, 2022
Maintainer

Close... you want the CONTAINER_PATCHES environment variable in the environment: section of the yaml:

version: "3.8"

services:
  foundry:
    image: felddy/foundryvtt:9
    hostname: my-domain
    init: true
    volumes:
      - type: bind
        source: /home/pi/docker/foundry
        target: /data
    environment:
      - FOUNDRY_PASSWORD=foundry-pass
      - FOUNDRY_USERNAME=my-ussername
      - FOUNDRY_ADMIN_KEY=my-admin-key
      - CONTAINER_PATCHES=/data/container_patches
    ports:
      - target: 30000
        published: 30000
        protocol: tcp

Your file layout should look similar to this:

    .
    ├── docker-compose.yml
    └── data/
        ├── Config/
        ├── container_cache/
        ├── container_patches/patch_login_css.sh
        ├── Data/
        └── Logs/

(in your case data/ above is /home/pi/foundry)

Remember that your execution context within the container is different than outside it. Your data volume will be mounted at /data within the container. So your patch script will live at /data/container_patches/patch_login_css.sh.

felddy Apr 26, 2022
Maintainer

Here is a simplified version of your script that should work.

#!/bin/sh

# Path to the CSS file
SOURCE="/data/custom.css"

# Which file to patch
DEST="resources/app/public/css/style.css"

log "Adding custom CSS..."
log "$SOURCE -> $DEST"

# append the contents of the source file onto the dest
cat $SOURCE >> $DEST

Ryach Apr 26, 2022
Author

Sorry github is little new for me.
put on my sh instead of mine version :

#!/bin/sh
# Path to the CSS file
SOURCE="/data/custom.css"
# Which file to patch
DEST="resources/app/public/css/style.css"
log "Adding custom CSS..."
log "$SOURCE -> $DEST"
log "ttttttt"
# append the contents of the source file onto the dest
cat $SOURCE >> $DEST

from log similar error:


Entrypoint | 2022-04-26 18:48:33 | [info] Using CONTAINER_PATCHES: /data/container_patches

Entrypoint | 2022-04-26 18:48:33 | [info] Container patches directory detected.  Starting patch application...

Entrypoint | 2022-04-26 18:48:33 | [info] Sourcing patch from file: /data/container_patches/patch_style_css.sh

Entrypoint | 2022-04-26 18:48:33 | [info] Adding custom CSS...

Entrypoint | 2022-04-26 18:48:33 | [info] /data/custom.css
 -> resources/app/public/css/style.css


Entrypoint | 2022-04-26 18:48:33 | [info] ttttttt

cat: can't open '/data/custom.css
': No such file or directory

Entrypoint | 2022-04-26 18:48:35 | [info] Starting felddy/foundryvtt container v0.8.9

my file custom.css is in foundry folder, also have permission rwxrwxrwx

Ryach · 2022-04-26T09:53:42Z

Ryach
Apr 26, 2022
Author

Thank you.
I updated my files as you recommended but still is not work as should probably I'm missing something could you have a look please?
Now my foundry docker looks like this:

.home
└pi
   └docker
         └foundry  
            ├── docker-compose.yml
            ├── custom.css   
            ├── Config/
            ├── container_cache/
            ├── container_patches/patch_style_css.sh
            ├── Data/
            └── Logs/

I added to docker-compose.yml:

version: "3.8"

services:
  foundry:
    image: felddy/foundryvtt:9
    hostname: my-domain
    init: true
    volumes:
      - type: bind
        source: /home/pi/docker/foundry
        target: /data
    environment:
      - FOUNDRY_PASSWORD=foundry-pass
      - FOUNDRY_USERNAME=my-ussername
      - FOUNDRY_ADMIN_KEY=my-admin-key
      - CONTAINER_PATCHES=/data/container_patches
    ports:
      - target: 30000
        published: 30000
        protocol: tcp

My patch_style_css.sh:

#!/bin/sh

# Path to the CSS file
SOURCE="/home/pi/docker/foundry/custom.css"

# Which file to patch
DEST="/css/style.css"

# Temporary working directory
TMP_DIR=$(mktemp -d)

# Cleanup in case the script gets stopped prematurely
trap "rm -rf $TMP_DIR" 1 2 3 9 15

log "Adding custom CSS..."
log "$SOURCE -> $DEST"

# This is the important part. This command prints the
# original file ($DEST) and the CSS patch ($SOURCE), then
# it saves the output to a temporary file
cat $DEST $SOURCE > $TMP_DIR/style.css

log "Replacing file..."

# Once the temp file is ready, we need to move replace
# old file with the new and patched file
cp $TMP_DIR/style.css $DEST

log "Should be working now"

# Cleanup
rm -rf $TMP_DIR

and my CSS just for testing if it is work:

#join-game #world-description {
    display: none !important;
}

2 replies

felddy Apr 26, 2022
Maintainer

A little log output would be helpful...

It is important to realize that the patch scripts run inside the container. The paths you use in your script do not exist inside the container. Try changing SOURCE and DEST as I have it below:

# Path to the CSS file
SOURCE="/data/custom.css"

# Which file to patch
DEST="resources/app/public/css/style.css"

Note: Patch scripts are executed inside the home directory of the container's user. /home/foundry by default.

Let me know if this helps. I think you're getting close. Good luck.

felddy Apr 26, 2022
Maintainer

Please don't keep creating new "answers" to your own question. Use the reply button from my original answer

Ryach · 2022-04-26T16:57:59Z

Ryach
Apr 26, 2022
Author

Thank you! I'm nearly there its kind of work.
I try few option but every time I'm getting this error in log:

Entrypoint | 2022-04-26 16:51:07 | [info] /data/custom.css
-> resources/app/public/css/style.css
./entrypoint.sh: /data/container_patches/patch_style_css.sh: line 14: can't create /data/tmp/pre_cCNneB
/style.css
: nonexistent directory

this line in my script is my file is:
TMP_DIR=$(mktemp -d /data/tmp/pre_XXXXXX)
I try also this:
TMP_DIR=$(mktemp -d)
also didn't work

and if I check my folder tmp
script create folder with random name:
but only rwx------

could you know how to sort this, please?

1 reply

felddy Apr 26, 2022
Maintainer

Please don't keep creating new "answers" to your own question. Use the reply button from my original answer

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS Login screen #331

{{title}}

Replies: 3 comments 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

CSS Login screen #331

Ryach Apr 25, 2022

Replies: 3 comments · 7 replies

felddy Apr 25, 2022 Maintainer

patch_login_css.sh

Ryach Apr 25, 2022 Author

felddy Apr 25, 2022 Maintainer

felddy Apr 26, 2022 Maintainer

Ryach Apr 26, 2022 Author

Ryach Apr 26, 2022 Author

felddy Apr 26, 2022 Maintainer

felddy Apr 26, 2022 Maintainer

Ryach Apr 26, 2022 Author

felddy Apr 26, 2022 Maintainer

Ryach
Apr 25, 2022

Replies: 3 comments 7 replies

felddy
Apr 25, 2022
Maintainer

`patch_login_css.sh`

Ryach Apr 25, 2022
Author

felddy Apr 25, 2022
Maintainer

felddy Apr 26, 2022
Maintainer

Ryach Apr 26, 2022
Author

Ryach
Apr 26, 2022
Author

felddy Apr 26, 2022
Maintainer

felddy Apr 26, 2022
Maintainer

Ryach
Apr 26, 2022
Author

felddy Apr 26, 2022
Maintainer