RedPlus 개인 블로그

시삽: 레드플러스 님 
게시판 이동:
 제목 : 15. 새로운 나만의 테마(Theme) 만들기(자식 테마 만들기)
글번호: 266
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2011/06/11 오전 3:15:53 (2011/06/11 오전 3:15:53 수정)
조회수: 4048

 

소개

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

 

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

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

새로운 테마 생성하기

orchard> codegen theme MyTheme /BasedOn:TheThemeMachine

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

마무리

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

 

끝.

 

 

 

참고 자료

 

 

관련글

 

 

본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.

오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 16. 사용자 정의 Content Type 만들기 - Administrator 2011-06-11 4162
현재글 15. 새로운 나만의 테마(Theme) 만들기(자식 테마 만들기) - Administrator 2011-06-11 4048
다음글 14. 테마(Theme) 다운로드 및 적용 - Administrator 2011-06-09 3855
관련 페이지 리스트
numtitlenamedateview
388 C 언어에서 값 전달과 참조 전달(Call By Value and Call By Re... Administrator 2023-03-09 1464
387 병합 알고리즘 순서도 2022-10-22 2126
386 C 언어 강의: scanf를 엔터키를 기준으로 여러 행으로 값을 입력 받기 Administrator 2022-01-09 3506
385 C 언어: scanf 사용해서 표준 입력인 콘솔로부터 나이를 정수로 입력 받아 출력 Administrator 2022-01-07 2525
384 Java 코드 샘플 - Function 인터페이스로 람다 식 만들기 Administrator 2022-01-04 2436
383 C# 코드 샘플 - 널 조건부 연산자 사용하기 Administrator 2022-01-02 2473
382 C# 코드 샘플 - 널 병합 연산자와 default 키워드 Administrator 2022-01-02 2403
381 C# 코드 샘플 - 널 병합 연산자로 문자열 변수의 NULL 값 확인하기 Administrator 2022-01-02 2318
380 C# 강의 - 14세 미만 체크 메서드 구현 Administrator 2022-01-01 2351
379 C 언어 천 단위 콤마 찍기 thousands_separator.c Administrator 2021-12-30 3151
378 for 문 순서도 - for 문(for loop) 순서도(flowchart) Administrator 2021-12-28 4995
377 C 언어 코드 샘플 - 전처리기 - 조건부 컴파일 Administrator 2021-12-27 2349
376 C 언어 코드 샘플 - 전처리기 - 매크로 함수 Administrator 2021-12-27 2357
375 http-server 설치하기 - 로컬 루프백 주소로 웹페이지 실행 2021-12-27 2367
374 C 언어 코드 샘플 - N명의 학생의 점수를 입력받아 1차원 배열에 저장 후 총점 구... Administrator 2021-12-27 2382
373 Java 코드 샘플 - 두 수의 합을 구하는 함수 Administrator 2021-12-26 2298
372 C 언어 코드 샘플 - 두 수의 합을 구하는 함수 Administrator 2021-12-26 2320
371 C# 교과서 강좌 - LINQ - Select 확장 메서드에 익명 형식 사용하기 Administrator 2021-12-26 2388
370 C# 교과서 강의 - LINQ - Select 확장 메서드를 사용하여 새로운 형태로 ... Administrator 2021-12-26 2343
369 C 언어 코드 샘플 - static-shared - 정적(공유) 변수 사용하기 Administrator 2021-12-26 2362
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home