Zabbix에서 Merry Christmas 준비 (3.0에서 원래 테마 만들기)

4597 단어 CSS3zabbix
남겨두면 캘린더도 나를 포함한 이틀이었습니다.
지금은 AdventCalendar에 대해 알아보겠습니다.

본래의 AdventCalendar란?



wiki보다

어드벤트 캘린더(Advent calendar)는 크리스마스까지의 기간에 일수를 세는데 사용되는 캘린더이다. 어드벤트 기간(예수 그리스도의 출생을 기다리는 기간)에 창문을 매일 하나씩 열어가는 캘린더이다. 모든 창문을 열고 끝나면 크리스마스를 맞이하게 된다.
단 매년 변화하는 어드벤트의 기간에 관계없이 실제로는 12월 1일부터 시작하여 24개의 '창'이 있는 경우가 많다. 어드벤트 캘린더는 창문을 열면 사진과 일러스트, 시와 이야기의 한 편, 초콜릿 등의 과자, 작은 선물 등이 들어있는 경우가 많다. 종교색이 강한 것도 있고, 단순히 엔터테인먼트용의 것도 있다.

라는, 크리스마스까지의 일수를 세는 캘린더입니다.
나, 중요한 것을 잊고 있었습니다.
오늘이 크리스마스 이브라는 것을.
Zabbix 캘린더에서도 크리스마스를 즐겨야 할까요?

이번 목적



Zabbix 3.0 크리스마스 테마 만들기

어떤 것을 할 수 있을까



이번 소개하는 내용으로, 이 이미지 테마를 할 수 있습니다.


배경의 눈도 CSS3에서 내려오는 사양이 되고 있습니다.

2.2나 2.4에서는 사용할 수 없는 것인가?



Zabbix 3.0에서는 UI가 평면 디자인으로 변경되었으며 이에 따라 테마 CSS도 크게 변경되었습니다.
시험에 3.0용으로 만든 테마를 같은 순서로 해보면


음, 유감스러운 느낌입니다.

테마 작성의 사양이 조금 바뀐 것 같습니다.



2.x까지의 사양이라면, zabbix-web 디렉토리(디폴트라면/usr/share/zabbix)의 styles에 테마를 배치합니다만, 이 안의 구성으로서 오리지날 템플릿을 두는 경우는 themes 디렉토리 안 에 임의로 디렉토리를 작성해, 그 안에 "main.css"를 배치시키는 것이었습니다.
ex) /usr/share/zabbix/styles/themes/christmas/main.css
하지만 3.0부터는 아무래도 사양이 바뀌어 styles 안에 직접 테마에 따른 CSS를 배치시키는 것으로 도입이 가능한 것 같습니다.
ex) /usr/share/zabbix/styles/christmas.css
그럼 실제로 내가 사용자 정의한 테마를 사용해 보겠습니다.

Christmas theme 소개



사전주의


  • 본 테마를 도입한 것에서의 Zabbix 장해에 대해서는, BSmile는 일절의 책임을 지지 않습니다 일 승낙해 주십시오.
  • 프로덕션 환경에 도입할 때는 반드시 관리자의 허가를 얻어 사용해 주세요.

  • 구축한 환경


  • DigitalOcean CentOS 7.1 x64
  • 1 CPU
  • 512MB memory
  • 20GB SSD
  • pre-zabbix-3.0.0 alpha5-57087

  • 도입 절차


  • git에서 복제
  • $ git clone https://github.com/bsmile/zabbix-christmas-theme.git
    
  • 파일 복사

  • 과거에 Z.php를 변경한 적이없는 분은 다음을 실행
    $ cd zabbix-christmas-theme/frontends
    $ cp -rp ./* /usr/share/zabbix/  #インストール方法によってディレクトリは異なります。
    

    Z.php를 변경한 적이 있다면
    $ cd zabbix-christmas-theme/frontends
    $ cp -rp ./styles /usr/share/zabbix/  #インストール方法によってディレクトリは異なります。
    $ vi /usr/share/zabbix/include/classes/core/Z.php
    

    Z.php를 변경한 적이 있는 분은, 계속해서 class Z extends ZBase 내에 다음을 추기해 주세요.
    /**
     * A wrapper for the ZBase class.
     *
     * Feel free to modify and extend it to change the functionality of ZBase.
     */
    class Z extends ZBase {
      public static function getThemes() {
        return array_merge(parent::getThemes(), array(
          'christmas' => _('Christmas theme')
        ));
      }
    }
    

    이상으로 도입 완료입니다.

    어떻게 만들었는가



    기본적으로 기존에 존재했던 [blue-theme.css]를 복사하여 만들고 있습니다.
    이것을 크리스마스 칼라의 칼라 차트를 참고로 하면서 색의 조정을 실시했을 뿐입니다.

    조정 후에는 외형이 외롭기 때문에 Snow Effect를 통합해 보았습니다.
    URL은 하단의 [참조한 Snow Effect]를 확인해 주십시오.

    참조한 Snow Effect



    드디어



    내일은 마지막 날입니다.
    qryuu씨 잘 부탁드립니다!

    좋은 웹페이지 즐겨찾기