상현에 하루하루
개발자의 하루

adminer theme, plugin

( 업데이트: )

docker adminer 이미지를 통해서 만들면 docker run할때 테마나 플러그인을 설정하는 방법만 나와있다.

나는 그런 것을 원하는게 아니야!! 😡

커스텀한 테마들을 추가하는 설명을 보면 adminer.php 파일 있는곳에 adminer.css를 추가해주면 된다라고 나와있다. 그리고 docker run을 통해서 테마를 설정하면 아래처럼 설정된다.

# /var/www/html/.
 drwxr-xr-x    5 adminer  adminer         10 Aug 14 22:46 .
 drwxr-xr-x    3 root     root             3 Aug  4 21:57 ..
 -rw-r--r--    1 adminer  adminer          0 Aug 14 22:46 .adminer-init
 lrwxrwxrwx    1 adminer  adminer         30 Aug 14 22:46 adminer.css -> designs/pepa-linha/adminer.css
 -rw-r--r--    1 root     root        299991 Aug  4 21:57 adminer.php
 drwxrwxr-x   22 root     root            23 Apr 14 07:48 designs
 -rw-rw-r--    1 root     root           954 Aug  4 21:57 index.php
 -rw-rw-r--    1 root     root          2127 Aug  4 21:57 plugin-loader.php
 drwxrwxr-x    2 root     root            37 Apr 14 07:48 plugins
 drwxr-xr-x    2 adminer  adminer          2 Aug  4 21:57 plugins-enabledCode language: Bash (bash)

adminer.css가 심볼릭 링크로 설정되는게 보인다. 컨테이너 내부가 어떤구조로 되어있는지만 알면 스타일 구성은 이제부터 손쉽다

프로젝트 폴더구성


 .
 ├── adminer
 │   ├── adminer.css
 │   ├── custom_design
 │   │   ├── dracula
 │   │   ├── hydra
 │   │   │   ├── adminer.css
 │   │   │   └── style.css
 │   │   └── style.css
 │   └── plugins
 └── docker-compose.yaml
Code language: Bash (bash)

내가 설치한 adminer 테마는

  • https://github.com/dracula/adminer
  • https://github.com/Niyko/Hydra-Dark-Theme-for-Adminer

docker-compose 구성

version: "3.7"

services:
  adminer:
   [...]
    volumes:
      - ./adminer/adminer.css:/var/www/html/adminer.css
      - ./adminer/custom_design:/var/www/html/custom_design
      - ./adminer/plugins:/var/www/html/plugins-enabledCode language: JavaScript (javascript)

매핑한 단일 adminer.css파일은 수정해도 컨테이너에 바로 반영되지 않아서 custom_design 폴더의 style.css에서 사용할 테마의 adminer.css를 임포트하는 방식으로 구성했다.

@import url('./custom_design/style.css');Code language: CSS (css)
@import url('./hydra/style.css');Code language: CSS (css)
@import url('./adminer.css');

/* 커스텀 css추가 */
div {}Code language: CSS (css)

깔끔한 테마의 adminer를 사용할 수 있게 되었다. 👏👏👏👏👏