This is automatic translation. If you do not like it, switch to English or another language. Thank you for understanding. OK Show original
함유량

커스텀 Redmine 테마를 만드는 방법

Redmine은 귀하가 선호하는 테마를 적용 할 수있는 빠르고 쉬운 관리 방법을 제공합니다. 몇 가지 기본 테마 사용 가능 최소한의다른 사람들은 더 활기찬, 이러한 옵션 중 어느 것도 마음에 들지 않으면 만들 수 있습니다 나만의 맞춤형 Redmine 테마.

사용자 정의 테마의 장점은 독창적이고 디자인이 원하는 방식과 정확히 일치한다는 것입니다 (대부분의 기본 테마에서는이 이점을 사용할 수 없음). 원하는대로 사용자 정의 테마를 디자인 할 수있는 유연성이 있습니다.

기본 테마를 사용하는 대신 사용자 정의 테마를 만드는 데 더 많은 노력이 필요하지만 결과는 그만한 가치가 있습니다.

커스텀 Redmine 테마를 만드는 방법을 배우려면 계속 읽으십시오.

새로운 Redmine 테마 생성

Redmine은 테마에 대한 기본적인 지원을 제공합니다. 이러한 테마는 몇 가지 사용자 정의 자바 스크립트를 추가하고 스타일 시트 (application.css)를 대체 할 수 있습니다.

첫 번째 단계는 공개 / 테마에서 새 디렉토리를 만드는 것입니다. 디렉토리 이름이 테마 이름으로 사용됩니다. 예를 들면 다음과 같습니다. public / themes / my_theme.

그런 다음 사용자 정의 application.css를 작성하고이를 stylesheets라는 하위 폴더에 저장하십시오.

공개 / 테마 / my_theme / 스타일 시트 / application.css

다음은 몇 가지 설정 만 재정의하는 사용자 정의 스타일 시트 예제입니다.

/ * 기본 Redmine 스타일 시트를로드합니다 * /

@import url (../../../ stylesheets / application.css);

/ * 헤더에 로고 추가 * /

#헤더 {

배경 : # 507AAA url (../ images / logo.png) 무 반복 2px;

왼쪽 여백 : 86px;

}

/ * 프로젝트 메뉴를 오른쪽으로 이동 * /

# main-menu {

왼쪽 : 자동;

오른쪽 : 0px;

}

앞에서 언급 한 예에서는 my_theme / images / logo.png에있는 이미지가 있다고 가정합니다.

이 테마 (샘플)를 사용자 정의 Redmine 테마의 시작점으로 다운로드 할 수 있습니다. public / themes 디렉토리에서 테마를 추출하십시오.

커스텀 자바 스크립트 추가

javascript /theme.js에 자바 스크립트를 포함 시키면 모든 페이지에 자동으로로드됩니다.

파비콘 설정

즐겨 찾기 아이콘을 즐겨 찾기 폴더에 넣으면 모든 페이지에서 기본 즐겨 찾기 대신 자동으로로드됩니다. 파비콘 파일의 이름은 무엇이든 가능합니다

(알 수없는 경우 파비콘은 웹 사이트의 브랜딩을 목적으로하는 작은 16 × 16 픽셀 아이콘입니다. 주요 목표는 방문자가 여러 개의 탭을 열었을 때 페이지를 더 쉽게 찾을 수 있도록 돕는 것입니다).

사용자 정의 테마 적용

  • 1 단계 :

첫 번째 단계는 새로운 테마를 다운로드하는 것입니다.

  • 단계 2:

테마를 ../public/themes/에 압축 해제하십시오. 이 결과는 다음과 같은 application.css의 디렉토리 경로입니다.

../public/themes/redminecrm/stylesheets/application.css

  • 단계 3:

관리-> 설정으로 가서 "테마"목록 (드롭 다운 목록)에서 새로 만든 테마를 선택하십시오. 그런 다음 설정을 저장하십시오.
이제 Redmine은 이제 사용자 정의 테마를 사용하여 표시되어야합니다.

Redmine <1.1.0을 사용하는 경우 사용 가능한 테마 목록에 표시되도록 애플리케이션을 다시 시작해야 할 수도 있습니다.

테마 디렉토리 구조

테마는 다음 파일로 구성됩니다.

  • javascripts / theme.js (선택 사항) : 테마에 맞게 사용자 정의 된 JavaScript
  • favicon / <favicon 파일> (선택 사항) : Redmine 테마의 favicon
  • stylesheets / application.css (필수) : 테마 용 CSS (Cascading Style Sheets)

아래에 설명되어 있습니다.

공공의/

+-테마 /

+-<테마 이름> /

|

+-favicon /

| +-<favicon 파일> (예 : favicon.ico, favicon.png)

|

+-자바 스크립트 /

| +-theme.js

|

+-스타일 시트 /

+-application.css

기본 테마를 사용하여 레드 마인 테마 만들기

기본 테마의 CSS 파일에서 색상을 변경하여 Redmine 테마를 만들 수도 있습니다.

파란색 테마에서 빨간색 테마로 모든 것을 변경하고 싶다고 가정 해보십시오. 아래 CSS로 그렇게 할 수 있습니다.

  1. sh # cd / path / ~ / 레드 마인
  2. sh # mkdir -p public / 테마 / redtheme / 스타일 시트
  3. sh # vi public / themes / redtheme / stylesheets / application.css (코딩은 아래와 같습니다)
  4. 관리자 설정으로 가서 redtheme을 선택하십시오.

/ * 기본 Redmine 스타일 시트를로드합니다 * /

@import url (../../../ stylesheets / application.css);

# top-menu {배경 : RGB (128,0,0);}

#header {배경색 : RGB (192,0,0);}

# projects-index ul.projects div.root a.project {color : RGB (128,0,0); }

내용 h1, h2, h3, h4 {color : RGB (128,0,0);}

# 메인 {색상 : RGB (128,0,0); }

a, a : 링크, a : 방문한 {색상 : RGB (128,0,0); }

a : 호버, a : active {색상 : RGB (128,0,0); }

테마 로고를 변경하는 방법?

1st 단계:

로고 파일을 @. / public / themes / redminecrm / images @에 넣습니다.

2nd 단계

logo.png 파일을 43x30 크기의 새 로고 파일로 대체

...

#header> h1 {

배경 : url (../ images / logo.png) 무 반복 10px 20 %;

패딩 : 5px 60px; / * 자신의 로고를 설정하려면 이것을 수정하십시오 * /

}

저자 : Sa Bal, 루카 슈 베나

추가 정보
무료 시험판

쉬운 Redmine 10 업그레이드
인기 플러그인 및 기능
신규 및 모바일 디자인
서버 업그레이드
글로벌 클라우드

무료 평가판 시작

30 일 무료 평가판에서 Easy Redmine을 사용해보십시오

모든 기능을 갖춘 30 일, SSL로 보호 된 일일 백업, 지리적 위치에서

or