소개
이번 시간은 앞서 살펴본 Orchard 갤러리에서 제공하는 기본 스킨 이외에 나만의 스타일로 재정의해서 사용하고자 하는 [사용자 정의 테마]를 만드는 방법에 대해서 소개하고자 합니다.
따라하기 : 자식(Child) 테마 만들기
1. Orchard CMS에서는 The Theme Machine이라는 이름으로 제공되는 기본 테마를 제공합니다. 이 테마만 가지고도 웬만한 표현 형태는 다 구축이 가능합니다. 그렇지만, 기본 엔진으로서의 TheThemeMachine을 두고 이를 확장하여 새로운 나만의 테마를 만들 수 있습니다.
2. 사용자 정의 테마를 구성하기 위해서는 추가적인 모듈이 필요합니다. [대시보드]-[모듈]-[갤러리] 탭으로 이동한 후 검색 텍스트박스에서 “Code Generation” 모듈을 검색한 후 [설치] 링크를 클릭하여 설치합니다.
3. [Code Generation] 모듈을 설치한 후에는 반드시 해당 모듈을 활성화시켜야 합니다.
4. 앞서 설치한 [Code Generation] 모듈을 실행하기 위해서 Orchard 소스의 bin 폴더로 이동해서 [Shift]+[마우스 오른쪽 버튼] 클릭을 사용하여 아래 그림과 같이 [여기서 명령 창 열기] 메뉴를 클릭하여 [명령 프롬프트] 창을 엽니다.
5. 아래 그림은 bin 폴더로 [명령 프롬프트] 창으로 열린 모습을 나타냅니다.
6. [Code Generation] 명령어를 사용하여 기존 테마에서 확장해서 새로운 테마를 만들고자하려면 아래와 같은 명령어를 실행할 수 있습니다.
새로운 테마 생성하기
orchard> codegen theme MyTheme /BasedOn:TheThemeMachine
7. 위 명령어를 실행하면 아래 그림처럼, MyTheme란 이름의 테마가 새롭게 생성되었음을 알 수 있습니다. 또한 Orchard 소스의 Themes 폴더를 보면 MyTheme 폴더가 생성되어 해당 테마 관련 모든 정보는 이곳에 기록이 됩니다.
8. 만약, MyTheme에 새롭게 스타일을 추가하거나, 기존 스타일을 수정하려면, 부모 역할을 하는 기본 테마인 TheThemeMachine의 Styles 폴더에 들어있는 Site.css 파일을 복사한 후 이 파일을 자식 테마인 MyTheme의 Styles 폴더에 붙여넣기를 합니다. 이에 대한 동작은 아래 그림과 같습니다.
9. [대시보드]-[테마]로 이동해서 새롭게 생성한 [MyTheme]를 현재 테마로 설정합니다.
10. 새롭게 생성된 테마의 스타일 중에서 “background” 속성을 “yellow”로 변경해 봅니다.
11. 배경색을 “Yellow”로 변경 후 메인 페이지로 이동하면 아래 그림과 같이 메인페이지 배경색이 변경됨을 알 수 있습니다. 그럼, 여기부터는 MyTheme 폴더에 있는 스타일 및 이미지 등을 변경하면서 사이트의 기본 디자인을 꾸며나갈 수 있습니다.
마무리
간단히 나만의 테마를 만드는 방법과 기존 테마의 스타일을 그대로 상속받아서 단지 하나의 속성인 배경색만을 간단하게 변경하는 예제만을 살펴보았습니다. 실제로는 훨씬 더 많은 속성과 스타일시트를 건드려가면서 메인 사이트의 기본 디자인을 바꿀 수 있습니다. 필자가 개발자 출신이어서 그런가 디자인에는 소질이 없어서 배경색 변경하는 예만 들었지만, 웹디자이너/웹퍼블리셔 분들은 본인만의 디자인 정책을 사용하여 멋지게 사이트를 꾸밀거라 믿습니다…
끝.
참고 자료
관련글
본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)