5장. 대시보드 사용자 정의

OpenStack 대시보드를 설치한 후 자체 요구에 맞게 모양을 사용자 지정할 수 있습니다. 여기에서 사용자 지정 옵션은 /openstack-dashboard/openstack_dashboard/local/ 에 저장된 local_settings.py 파일에 포함된 설정에 중점을 둡니다.

참고

기본적으로 OpenStack 대시보드는 openstack-dashboard-theme 패키지를 설치합니다.

이 테마를 사용하지 않으려면 다음 명령을 사용하여 해당 항목과 해당 종속 항목을 제거할 수 있습니다.

rpm -e --nodeps openstack-dashboard-theme

# rpm -e --nodeps openstack-dashboard-theme

Copy to Clipboard

Toggle word wrap

대시보드의 다음 요소를 사용자 지정할 수 있습니다. Director 배포의 경우 각 컨트롤러 노드에 heat-admin으로 로그인하여 변경을 수행해야 합니다.

로고
사이트 색상
HTML 제목
사이트 브랜딩 링크
도움말 URL
스타일 시트

로고 및 사이트 색상:

다음 크기의 투명한 배경을 사용하여 png 형식으로 두 개의 로고 파일을 만듭니다.
- 로그인 화면(예: login_logo.png): 365 x 50
- 로그인 배너 (예: banner_logo.png): 216 x 35
새 이미지를 다음 위치에 업로드합니다. /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/
다음 디렉토리에 SCSS 스타일 시트를 만듭니다. /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/scsss/

색상과 이미지 파일 이름을 적절하게 변경합니다. 상대 디렉터리 경로는 동일해야 합니다. 다음 예제 파일은 SCSS 파일을 사용자 지정하는 방법을 보여줍니다.

/*
* New theme colors for the dashboard that override the defaults:
*  dark blue: #355796 / rgb(53, 87, 150)
*  light blue: #BAD3E1 / rgb(186, 211, 225)
*/

h1.brand {
background: #355796 repeat-x top left;
border-bottom: 2px solid #BAD3E1;
}
h1.brand a {
background: url(../img/login_logo.png) top left no-repeat;
}
#splash .login {
background: #355796 url(../img/banner_logo.png) no-repeat center 35px;
}
#splash .login .modal-header {
border-top: 1px solid #BAD3E1;
}
.btn-primary {
background-image: none !important;
background-color: #355796 !important;
border: none !important;
box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active {
border: none;
box-shadow: none;
background-color: #BAD3E1 !important;
text-decoration: none;
}

/*
* New theme colors for the dashboard that override the defaults:
*  dark blue: #355796 / rgb(53, 87, 150)
*  light blue: #BAD3E1 / rgb(186, 211, 225)
*/

h1.brand {
background: #355796 repeat-x top left;
border-bottom: 2px solid #BAD3E1;
}
h1.brand a {
background: url(../img/login_logo.png) top left no-repeat;
}
#splash .login {
background: #355796 url(../img/banner_logo.png) no-repeat center 35px;
}
#splash .login .modal-header {
border-top: 1px solid #BAD3E1;
}
.btn-primary {
background-image: none !important;
background-color: #355796 !important;
border: none !important;
box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active {
border: none;
box-shadow: none;
background-color: #BAD3E1 !important;
text-decoration: none;
}

Copy to Clipboard

Toggle word wrap

선택한 편집기에서 다음 HTML 템플릿을 엽니다. /usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html

새로 만든 스타일 시트를 포함하는 행을 추가합니다. 예를 들어 custom.scss 파일은 다음과 같습니다.

 <link href='bootstrap/css/bootstrap.min.scss' media='screen' rel='stylesheet' />
 <link href='dashboard/css/{% choose_scss %}' media='screen' rel='stylesheet' />
 <link href='dashboard/css/custom.scss' media='screen' rel='stylesheet' />

 <link href='bootstrap/css/bootstrap.min.scss' media='screen' rel='stylesheet' />
 <link href='dashboard/css/{% choose_scss %}' media='screen' rel='stylesheet' />
 <link href='dashboard/css/custom.scss' media='screen' rel='stylesheet' />

Copy to Clipboard

Toggle word wrap

Apache 서버를 다시 시작하십시오.

# systemctl restart httpd

# # systemctl restart httpd

Copy to Clipboard

Toggle word wrap

변경 사항을 보려면 대시보드를 다시 로드하면 됩니다. 필요한 경우 돌아가서 SCSS 파일을 적절하게 수정합니다.

HTML 제목:

브라우저 창 상단에 표시되는 HTML 제목을 설정하려면 local_settings.py 에 다음 행을 추가합니다.
```
SITE_BRANDING = "Example, Inc. Cloud"
```
```
SITE_BRANDING = "Example, Inc. Cloud"
```
Copy to Clipboard Toggle word wrap
Apache 서버를 다시 시작합니다.

사이트 연결 링크:

로고는 또한 하이퍼 링크 역할을 합니다. 기본 동작은 horizon:user_home 으로 리디렉션하는 것입니다. 이를 변경하려면 원하는 URL 대상이 있는 다음 속성을 local_settings.py 에 추가합니다.
```
SITE_BRANDING_LINK = "http://example.com"
```
```
SITE_BRANDING_LINK = "http://example.com"
```
Copy to Clipboard Toggle word wrap
Apache 서버를 다시 시작합니다.

도움말 URL:

기본적으로 도움말 URL은 https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux_OpenStack_Platform/7/index.html 을 가리킵니다. local_settings.py 에서 선택한 URL로 다음 속성을 편집하여 도움말 URL을 변경할 수 있습니다.
```
'help_url': "http://openstack.mycompany.org",
```
```
'help_url': "http://openstack.mycompany.org",
```
Copy to Clipboard Toggle word wrap
Apache 서버를 다시 시작합니다.

사용자 정의 스타일시트:

대시보드에 대한 사용자 정의 스타일시트를 정의할 수 있습니다. 대시보드의 기본 템플릿 openstack_dashboard/templates/base.html 에서는 재정의할 수 있는 여러 블록을 정의합니다. 특정 대시보드에만 적용되는 사용자 지정 SCSS 파일을 정의하려면 대시보드의 기본 템플릿을 확장하는 대시보드의 템플릿 폴더에 기본 템플릿을 만듭니다.

예: openstack_dashboard/dashboards/my_custom_dashboard/templates/my_custom_dashboard/base.html. 이 템플릿에서는 블록 CSS를 사용할 수 있습니다.

{% extends 'base.html' %}
{% block css %}
  {% include "_stylesheets.html" %}
  {% load compress %}
  {% compress css %}
  <link href='{{ STATIC_URL }}my_custom_dashboard/scss/my_custom_dashboard.scss' type='text/scss' media='screen' rel='stylesheet' />
  {% endcompress %}
{% endblock %}

{% extends 'base.html' %}
{% block css %}
  {% include "_stylesheets.html" %}
  {% load compress %}
  {% compress css %}
  <link href='{{ STATIC_URL }}my_custom_dashboard/scss/my_custom_dashboard.scss' type='text/scss' media='screen' rel='stylesheet' />
  {% endcompress %}
{% endblock %}

Copy to Clipboard

Toggle word wrap

참고

대시보드의 모든 기본 스타일 시트가 포함된 _stylesheets.html 을 포함하는 것을 잊어서는 안 됩니다.

5장. 대시보드 사용자 정의

자세한 정보

평가판, 구매 및 판매

커뮤니티

Red Hat 문서 정보

보다 포괄적 수용을 위한 오픈 소스 용어 교체

Red Hat 소개

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links