컨텐트관리시스템-플론(Plone)의 디자인 변경 예제 :: 2006. 3. 9. 17:07

NASA 스킨

아래 그림은 NASA의 화성탐사 그림과 분석내용을 볼 수 있는 웹사이트(http://mars.telascience.org) 스킨입니다. 이 사이트는 플론의 초기설정인 검색상자, 좌측 메뉴 등 불필요한 구성요소를 제거하고 템플릿을 변경하여 운영되고 있습니다.

불필요한 요소제거

검색상자를 제거하는 방법은 아래와 같습니다.

① ZMI > portal_skins > plone_templates > global_searchbox를 차례로 클릭합니다.
② Customize 버튼을 클릭하고 아래와 같이 변경하고 저장합니다.

  xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en"
  i18n:domain="plone">
  <body>
      <div id="portal-searchbox"
              metal:define-macro="quick_search"
              tal:condition="nothing"
           Nothing to see here.
       </div>
  </body>
</html>

tal:condition 옵션은 요소를 제거하는 데 유용합니다.
로그인 창 및 다른 요소들도 같은 방법으로 제거할 수 있습니다.

스타일시트 변경하기

스타일시트는 플론의 디자인을 구성하는 큰 역할을 합니다.
웹사이트의 상단을 아래 이미지로 변경해보겠습니다.

① ZMI > portal_skins >custom > plone.css를 차례로 클릭합니다.
② Customize 버튼을 클릭하고 #portal-top 부분을 아래와 같이 변경하고 저장합니다.

#portal-top {
background: url("http://mars.telascience.org/header.jpg") transparent no-repeat;
padding: 162px 0 0 0;
position: relative;
}

스타일시트 등 디자인 변경에 관한 더 자세한 사항은 아래 링크를 참조하시기 바랍니다.
http://docs.neuroinf.de/PloneBook/ch7.rst

플론에 관한 더욱 자세한 사항은 아래문서를 참조하시기 바랍니다.

Definitive Guide to Plone
Plone End User Manual
Plone End Users Guided Tour

* 건설연구정보센터 기술지원부 연구원 박유진

[출처 : 건축도시연구정보센터(AURIC)]