IT Story

드루팔을 활용하여 홈페이지 만들기 #4

검이불루 2014. 10. 28. 03:52
반응형

이 튜토리얼 블로그에 사용할 관리자 테마는 corolla 라는 테마 입니다. 테마는 드루팔의 옷에 해당한다고 볼 수 있습니다.


드루팔의 테마는 크게 분류하자면, 관리자 테마와 유저용테마로 구분할 수 있습니다. 관리자 테마는 CMS를 관리하기 위한 기능을 사용하는데 있어서 편리한 테마이고, 유져용 테마는 말그대로 이 사이트를 찾는 유저를 위한 테마 입니다.


이 테마에 대하여 간략하게 이야기를 하자며, AdaptiveTheme 라는 drupal.org 의 테마랭킹 5손가락안에 드는 테마를 베이스로 하여 만든 서브테마 입니다.

drupal.org 에서 밝히고 있는 이 테마의 기능은 아래와 같습니다.

  • 6 preset color schemes
  • Custom color options
  • Built in support for the Superfish module
  • Configurable layout - lots of options
  • Responsive Mobile support - Smartphone, Tablet, iPad, iPhone, Android devices etc
  • Font selection - includes Google fonts
  • Font size setting
  • Heading styles
  • Rounded corner settings
  • Box shadow and background texture options
  • Image position settings
  • Menu bullets option
  • Breadcrumb settings
  • Search results display settings
  • Optional horizontal login block setting
  • 18 regions including a 3 and 4 column panel

​뭐 간단한 영어이니 굳이 번역은 하지 않도록 하겠습니다.

백문이 불여일견이라 했습니다. 직접 테마를 인스톨하고, 직접 몸으로 부대끼다보면 드루팔의 구조와 테마에 대하여 자연스럽게 체득할 수 있습니다.


그럼 테마를 인스톨 해 보도록 하겠습니다. 테마의 인스톨과 관리는

메인메뉴 -> 모양

에서 할 수 있습니다. https://www.drupal.org/project/corolla 에서 다운받은 파일(corolla-7.x-3.0.tar.gz)을 인스톨 해줍니다.


tip>드루팔에는 다양한 모듈들과 모듈의 버전이 존재 합니다. 일반적으로 Recommended releases 에서 자신의 드루팔버젼에 맞는 파일을 다운 받으시면 됩니다. 이 튜토리얼의 기준은 드루팔 7.x.x 입니다. 즉 레커멘트 릴리즈에서 처음 숫자가 7로 시작되는 버젼의 모듈을 다운 받으시면 됩니다.


사용하기 버튼을 눌러서 corolla 테마를 활성화 시켜 줍니다.

정상적인 인스톨과 활성화를 거쳤다면, 아래 그림과 비슷한 화면을 보실 수 있을 겁니다.


이 테마는 AdaptiveTheme 의 서브테마이기 때문에 활성화 되기전에 AdaptiveTheme 를 먼저 인스톨 하셔야 합니다.
주소는 https://www.drupal.org/project/adaptivetheme 에서 받으실 수 있습니다.


다음으로 해줄일은 corolla 테마를 커스터마이징 해주는 작업 입니다. 혹시 모듈 - 코어모듈 에서 Overlay 모듈이 활성화되어 있으면 꺼주시기 바랍니다.


모양 - Corolla 7.x-3.0 테마에서 설정을 선택하여 수정 작업을 시작합니다.


가장먼저 전체화면에사 사용할 비율을 지정해 줍니다. 개인적으로 95% 정도가 적당한 것 같습니다. 그 아래 나오는 Set a max width 옵션은 꺼줍니다.


이렇게 하고, 가장아래 설정저장 버튼을 누르면, 화면 인터페이스가 전체크기에서 95% 를 차지하는 형태로 바뀝니다.


다음으로 해줄일은 사용할 폰트를 지정해 주는 일입니다. 저는 구글에서도 지원하는 나눔고딕을 사용하고 있습니다.


화면을 아래로 스크롤 하다 보면 아래 그림과 같이 폰트를 설정할 수 있는 메뉴가 나타납니다.



종류에서 Basic Google Font 를 선택하시고, 파일크기라고 엉뚱하게 번역되어 있는 곳에서 원하는 폰트 크기를 선택해 주시면 됩니다.


이런식으로 하단의 Titles, Heading, 메뉴 등등의 폰트를 지정해 줍니다.


이 과정이 다 끝나면, 이제 화면 상단의 불필요한 로고와 커다랗게 차지하고 있는 사이트 제목을 없애도록 하겠습니다.


이걸 없애려면, 아래쪽으로 내려보면, 표시여부 설정하기 라는 메뉴가 있습니다.


이곳에서  로고,사이트이름,사이트표어 옵션을 꺼주시면 됩니다.


이렇게 함으로 인하여 관리자 테마의 설정이 완료되었습니다.


다음에는, 사용자 테마를 설정해 보도록 하겠습니다.

 

반응형