Hoe maak je een anangepast Redmine-thema.

6/3/2020
6 분
루카시 베나.

Redmine wordt geleverd met een snelle en eenvoudige administratieve manier om een ​​thema toe te passen dat bij uw voorkeuren 과거. 엔 파르 반 데 표준테마의 다이 베식바르 zijn, zijn 미니멀, andere zijn meer 레벤디그, 그리고 geen van deze opties je aanspreekt, kun je와 함께 Redmine 테마에 대해 알아보세요. 만들기.

Het voordeel van een aangepast thema is dat het uniek is en het ontwerp precies is zoals je het wilt (dit voordeel is niet beschikbaar bij de meestestandaardthema's). Je hebt de flexibiliteit om een ​​aangepast thema op elke gewenste manier te ontwerpen. Hoewel het maken van een aangepast thema meer moeite kan kosten in vergelijking met het gebruik van een aardaardthema, zijn de resultaten absoluut de moeite waard. Lees verder om te leren hoe je een aangepast Redmine-thema kunt maken.


Creëren van een nieuw Redmine 테마

Redmine은 테마에 대한 기본 정보를 제공합니다. Deze 테마의 kunnen een paar aangepaste javascripts toevoegen en stijlbladen(application.css)이 초과되었습니다.
처음부터 공개/테마에 새로운 지도가 표시됩니다. De naam van de map wordt gebruikt als de naam van het thema. 적용 분야: public /themes / my_theme.
Maak vervolgens een aangepaste application.css en sla deze op in een submap genaamd stylesheets:
공개 / 테마 / my_theme / 스타일 시트 / application.css
Hieronder staat een voorbeeld van een aangepast stijlblad dat slechts een paar instellingen overschrijft:
/* 표준에 따라 Redmine-stijlblad */
@import url (../../../ stylesheets / application.css);
/* voeg een 로고 토인 헤더 */
#헤더 {
    배경 : # 507AAA url (../ images / logo.png) 무 반복 2px;
    왼쪽 여백 : 86px;
}
/* 프로젝트 메뉴에 대한 설명 */
# main-menu {
    왼쪽 : 자동;
    오른쪽 : 0px;
}
my_theme/images/logo.png에서 원하는 내용을 확인하실 수 있습니다.
이 테마는 Redmine 테마에서 시작하여 다운로드할 수 있습니다. 공개/테마 지도에서 테마를 확인하세요.


Toepassen van aangepaste 자바스크립트

이제 javascript /theme.js에서 javascript toe를 자동으로 페이지에 표시할 수 있습니다.


인스텔렌 반 파비콘

파비콘 지도에 있는 파비콘 발가락은 표준 페이지의 표준 파비콘에 자동 젤라덴으로 표시됩니다. De naam van het favicon-beststand kan alles zijn. (여기에는 웹 사이트 브랜딩에 대한 16x16 픽셀의 favicon een klein 아이콘이 있습니다. 가장 중요한 것은 om bezoekers te helpen je pagina gemakkelijker te vinden wanneer ze meerdere tabbladen open hebben입니다.)


Toepassen van het aangepaste 테마

  • 스탭 1 :

처음부터 새로운 테마를 다운로드할 수 있습니다.

  • 2 단계:

테마는 ../public/themes/에 있습니다. 결과는 map-pad naar application.css zijn, zoals에 따라 달라집니다.

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

  • 3 단계:

Ga naar Beheer -> Instellingen en selecteer het thema dat je zojuist hebt gemaakt uit de "Thema"-lijst(keuzelijst). Sla vervolgens je instellingen op.
Op dit punt zou Redmine nu moeten worden weergegeven je aangepaste theme.

또한 Redmine < 1.1.0 버전에서 더 많은 앱을 다운로드하여 테마에 맞는 버전을 시작하세요.


테마 디렉토리 구조

이 주제는 다음과 같습니다:

  • javascripts/theme.js (옵션): 테마에 대한 JavaScript 붙여넣기
  • 파비콘 / (선택 사항): Redmine 테마에 대한 파비콘
  • stylesheets / application.css (noodzakelijk): 테마에 대한 CSS(Cascading Style Sheets)

gedemonstreerd의 내용은 다음과 같습니다.
공공의/
  +-테마 /
       +- /
            |
            +-favicon /
            | +- (bijv. favicon.ico, favicon.png)
            |
            +-자바 스크립트 /
            | +-theme.js
            |
            +-스타일 시트 /
                 +-application.css

Een Redmine-thema maken door hetstandaardthema te gebruiken

Redmine 테마가 CSS 최고의 표준 테마로 자리잡은 것을 확인했습니다.

Stel dat je alles van een blauw thema naar een rood thema wilt veranderen. CSS에 대해 알아보았습니다.

  1. sh# cd / 패드 / naar / 레드마인
  2. sh # mkdir -p public / 테마 / redtheme / 스타일 시트
  3. sh# vi public / themes / redtheme / stylesheets / application.css (코딩 단어 계층 구조)
  4. Ga naar de beheerinstellingen en selecteer vervolgens 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); }

Hoe verander je het logo van het thema?

2e STAP

Vervang het bestand logo.png 문 het nieuwe logobestand met een grootte van 43x30

...

#header> h1 {

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

               패딩: 5px 60px; /* Pas dit aan om uw eigen 로고 in te stellen */

}

궁극적인 Redmine 업그레이드? Makkelijk.

완벽한 프로젝트 계획을 위한 모든 도구를 사용하여 소프트웨어에서 제어할 수 있습니다.

Probeer Easy Redmine 30 무료 다운로드

uw geografische locatie에서 Volledige 기능, SSL-beveiligd, dagelijkse 백업,