다음을 통해 공유

[Orchard 강좌] 15. 새로운 나만의 테마(Theme) 만들기(자식 테마 만들기)

  • 아티클

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Orchard로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 시간은 앞서 살펴본 Orchard 갤러리에서 제공하는 기본 스킨 이외에 나만의 스타일로 재정의해서 사용하고자 하는 [사용자 정의 테마]를 만드는 방법에 대해서 소개하고자 합니다.

따라하기 : 자식(Child) 테마 만들기

1. Orchard CMS에서는 The Theme Machine이라는 이름으로 제공되는 기본 테마를 제공합니다. 이 테마만 가지고도 웬만한 표현 형태는 다 구축이 가능합니다. 그렇지만, 기본 엔진으로서의 TheThemeMachine을 두고 이를 확장하여 새로운 나만의 테마를 만들 수 있습니다.

image_thumb.png

2. 사용자 정의 테마를 구성하기 위해서는 추가적인 모듈이 필요합니다. [대시보드]-[모듈]-[갤러리] 탭으로 이동한 후 검색 텍스트박스에서 “Code Generation” 모듈을 검색한 후 [설치] 링크를 클릭하여 설치합니다.

image_thumb_1.png

3. [Code Generation] 모듈을 설치한 후에는 반드시 해당 모듈을 활성화시켜야 합니다.

image_thumb_2.png

4. 앞서 설치한 [Code Generation] 모듈을 실행하기 위해서 Orchard 소스의 bin 폴더로 이동해서 [Shift]+[마우스 오른쪽 버튼] 클릭을 사용하여 아래 그림과 같이 [여기서 명령 창 열기] 메뉴를 클릭하여 [명령 프롬프트] 창을 엽니다.

image_thumb_3.png

5. 아래 그림은 bin 폴더로 [명령 프롬프트] 창으로 열린 모습을 나타냅니다.

image_thumb_4.png

6. [Code Generation] 명령어를 사용하여 기존 테마에서 확장해서 새로운 테마를 만들고자하려면 아래와 같은 명령어를 실행할 수 있습니다.

image_thumb_5.png

새로운 테마 생성하기

orchard> codegen theme MyTheme /BasedOn:TheThemeMachine

7. 위 명령어를 실행하면 아래 그림처럼, MyTheme란 이름의 테마가 새롭게 생성되었음을 알 수 있습니다. 또한 Orchard 소스의 Themes 폴더를 보면 MyTheme 폴더가 생성되어 해당 테마 관련 모든 정보는 이곳에 기록이 됩니다.

image_thumb_6.png

8. 만약, MyTheme에 새롭게 스타일을 추가하거나, 기존 스타일을 수정하려면, 부모 역할을 하는 기본 테마인 TheThemeMachine의 Styles 폴더에 들어있는 Site.css 파일을 복사한 후 이 파일을 자식 테마인 MyTheme의 Styles 폴더에 붙여넣기를 합니다. 이에 대한 동작은 아래 그림과 같습니다.

image_thumb_7.png

9. [대시보드]-[테마]로 이동해서 새롭게 생성한 [MyTheme]를 현재 테마로 설정합니다.

image_thumb_8.png

10. 새롭게 생성된 테마의 스타일 중에서 “background” 속성을 “yellow”로 변경해 봅니다.

image_thumb_9.png

11. 배경색을 “Yellow”로 변경 후 메인 페이지로 이동하면 아래 그림과 같이 메인페이지 배경색이 변경됨을 알 수 있습니다. 그럼, 여기부터는 MyTheme 폴더에 있는 스타일 및 이미지 등을 변경하면서 사이트의 기본 디자인을 꾸며나갈 수 있습니다.

image_thumb_10.png

마무리

간단히 나만의 테마를 만드는 방법과 기존 테마의 스타일을 그대로 상속받아서 단지 하나의 속성인 배경색만을 간단하게 변경하는 예제만을 살펴보았습니다. 실제로는 훨씬 더 많은 속성과 스타일시트를 건드려가면서 메인 사이트의 기본 디자인을 바꿀 수 있습니다. 필자가 개발자 출신이어서 그런가 디자인에는 소질이 없어서 배경색 변경하는 예만 들었지만, 웹디자이너/웹퍼블리셔 분들은 본인만의 디자인 정책을 사용하여 멋지게 사이트를 꾸밀거라 믿습니다…

끝.

참고 자료

관련글