플라이투 스킨은 사이드바 230pixel, 본문영역이 500pixel이고, 여기에 여백등을 고려하면 스킨의 전체 사이즈가 820pixel 입니다. 여기에서 본문 영역을 넓게 쓰고자할때 어떤 부분을 어떻게 수정하면 되는지 알아보도록 하겠습니다.
- step 01. style.css 파일을 편집하겠습니다.
-
- "Layout"이라고 주석처리 되어 있는 곳으로 이동하면, container, content, sidebar 에 각각 width속성이 지정 되어 있습니다. 본문 영역을 200pixel 더 넓혀서 700pixel로 쓰고 싶다면, content의 width를 700px로 수정합니다. 이렇게 되면 스킨 전체 사이즈가 늘어 났기 때문에 container도 200pixel더해서 1020pixel로 수정해야 합니다.
- "Article Basic Style"라고 주석처리 되어 있는 부분으로 이동하면 article 레이어에도 width가 지정되어 있습니다. 역시 700px로 수정합니다.
* article의 width부분을 삭제하셔도 무방합니다. 다만, overflow:hidden; 을 content 레이어로 옯겨주시면 됩니다. - "Content Part" 라고 주석처리 되어 있는 부분으로 이동하면, writeForm 레이어에 textarea와 textField라는 클래스명을 가진 input폼의 가로 사이즈를 각각 200pixel 넓혀 주시면 됩니다. (* 방명록과 댓글이 writeForm이라는 동일한 클래스명을 사용하고 있기 때문에 한번만 수정해 주시면 두곳 모두 수정이 됩니다. )
- step 02. index.xml 파일을 편집하겠습니다.
- 가장 아랫부분으로 이동하면 contentWidth를 지정하는 곳이 나옵니다. 이곳을 700으로 수정해 주어야 합니다. 이 부분이 스킨에 직접적인 영향을 미치는 것은 아닙니다. 다만 글을 작성할때 텍스트 입력폼의 사이즈를 이 수치로 반영하게 됩니다. 또한 본문에 이미지를 삽입할때도 이곳의 수치를 참고하여 이미지의 기본 가로 사이즈를 반영하게 됩니다.
요약하자면...
- style.css의 Layout 에서
- #container { width:820px;}
→ #container { width:1020px;}
#content { width:500px;} → #content { width:700px; overflow:hidden;} - style.css의 Article Basic Style 에서
- .article { width:500px; overflow:hidden;} → .article { }
- style.css의 Content Part 에서
- #content .writeForm .textField { width:250px;}
→ #content .writeForm .textField { width:450px;}
#content .writeForm textarea { width:330px;} → #content .writeForm textarea { width:530px;} - index.xml에서
- <contentWidth>500</contentWidth> →<contentWidth>700</contentWidth>
