horizon dashboard theme customization

horizon dashboard의 로그인 화면을 아래와 같이 변경하고자 할때는 horizon dashboard의 custom theme기능을 이용하면 된다.

방법은 두가지가 있다.

horizon dashboard container image를 수정하여 테마를 추가하는 방법
kolla-ansible배포시에 테마를 추가하여 배포하는 방법

이 문서에서는 두번째 방법인 kolla-ansible배포시에 테마를 추가하는 방법에 대해 설명한다.

기본적으로 horizon dashboard 테마는 default와 material 테마가 있다.

horizon 소스는 깃헙 저장소 https://github.com/openstack/horizon 에서 확인할수 있으며 해당 소스를 로컬에 clone한 후에 horizon/openstack_dashboard/themes/ 디렉토리에 있는 default, example, material 중 하나를 복사하여 원하는 형태로 커스터마이징 하도록 한다.

이후 kolla-ansible배포 설정 디렉토리 /etc/kolla/config/horizon/themes/<테마명> 에 위치시킨다.

추가한 테마를 아래 설정파일에 등록한다. <테마명>을 아래 my_custom_theme 부분에 등록한다.

globals.yml

horizon_custom_themes:
  - name: my_custom_theme
    label: CustomTheme
# 여러개 등록 가능

만약 기본 테마로 등록하고자 한다면 /etc/kolla/config/horizon/custom_local_settings파일에 아래와 같이 등록한다.

DEFAULT_THEME = 'my_custom_theme'

이후 배포/적용 하면 된다.

정적 리소스(이미지, 파일, 자바스크립트)들을 추가하고자 하는경우에는 테마 폴더의 static경로아래 추가하도록 한다.
만약 새로운 테마 이름이 my_custom_theme 라고 한다면
<KOLLA_CONFIG>/horizon/themes/my_custom_theme/static/img/my-logo.png 와 같이 파일을 위치시키면 된다.
URL에서 호출할때에는 /static/themes/my_custom_theme/img/my-logo.png 와 같은 형식이 된다.

정적파일경로 : /etc/kolla/config/horizon/themes/<테마명>/static/
소스URL : /static/themes/<테마명>/
템플릿내에서 적용시 : {{ STATIC_URL }}/themes/<테마명>/img/my-logo.png

이후 kolla-ansible로 배포 적용하면 된다.