Password Pusher supports adding custom CSS to the application. The application hosts a custom.css file located at app/assets/stylesheets/custom.css. This file is loaded last so it take precedence over all built in themes and styling.

This file can either be modified directly or in the case of Docker containers, a new file mounted over the existing one.

When changing this file inside a Docker container, make sure to set the precompile option PWP_PRECOMPILE=true. This will assure that the custom CSS is incorporated correctly.

An example Docker command to override that file would be:

docker run -e PWP_PRECOMPILE=true --mount type=bind,source=/path/to/my/custom.css,target=/opt/PasswordPusher/app/assets/stylesheets/custom.css -p 5100:5100 pglombardo/pwpush:latest

or the docker-compose.yml equivalent:

version: '2.1'
services:

  pwpush:
    image: docker.io/pglombardo/pwpush:latest
    ports:
      - "5100:5100"
    environment:
      PWP_PRECOMPILE: 'true'
    volumes:
      - type: bind
        source: /path/to/my/custom.css
        target: /opt/PasswordPusher/app/assets/stylesheets/custom.css

Warning: Remember that when applying custom CSS, this new CSS code has to be precompiled. Set the PWP_PRECOMPILE=true environment variable for your application. For source code, run bin/pwpush assets:precompile. This compilation process will incorporate the custom CSS into the updated site theme.

Updated: