본문 바로가기
공부/XE

XE 서브 레이아웃 만들기

by Ohming 2012. 6. 29.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

XE에서 기본적으로 제공하는 레이아웃인 xe_solid_enterprise 를 수정해서 홈페이지를 만들고 있다.
XE를 처음 사용해보기 때문에 차근차근히 하나씩 만들고 있다.
그런데 xe_solid_enterprise는 서브 레이아웃이 따로 없었다. 새로 서브 레이아웃 디자인을 해서 몽땅 올리던지 아니면 CSS만을 고치는 방법으로 서브 레이아웃을 선택하는 방법을 생각하게 되었다.
며칠전에 무료로 공유되고 있는 레이아웃을 다운받았었는데 그 레이아웃에서는 메인레이아웃과 서브레이아웃을 선택할 수 있었기 때문에 CSS를 수정하는 방법으로 하기로 결정!

1. 원래 기본적으로 레이아웃에는 서브와 메인의 구분이 없기 때문에 제일먼저 이 페이지가 메인인지 서브인지를 선택할 수 있는 부분을 만들어주었다. FTP로 아래의 conf 폴더안에 있는 info.xml 파일을 다운받아서 고쳐줘야 한다.


열어서 <extra_vars> 부분 아래에 보면 쭉쭉쭉 coloset 설정하는 부분도 있고 로고 이미지를 선택하는 부분도 있고 많은 부분이 있는데, 자기가 생각할 때 적절한 위치에 아래의 소스를 넣어준다.


            레이아웃 유형
            레이아웃 유형을 고르세요. (메인/서브)
            
                메인 페이지
            
            
                서브 페이지
            
        

그 다음에 저장을 하고 FTP 프로그램을 이용해 수정한 파일을 다시 업로드 해준다.
(내 관점으로 포스팅 하기 때문에 보고있는 사람의 방법 또는 사정과는 다를 수 있음)

2. 그러면 XE admin -> 확장기능 -> 설치된 레이아웃 -> 자신이 설치한 레이아웃 (수정도 한) 을 [레이아웃 설정] 선택 (없으면 추가)
아래로 스크롤하다보면 자기가 추가한 레이아웃 유형 선택이 만들어져있음을 알 수 있다.


3. 이제 레이아웃 유형을 선택할 수 있게 되었다. 그러면 다시 FTP에 접속해서 이번엔 layout.html 파일을 다운받아 수정해 준다.
html 파일을 열어서 위쪽에 아래의 소스코드를 넣어주면된다. 주석처리가 되어있지만 이대로 넣으면 된다.



    

    

나는 메인 레이아웃일경우에는 style.css를 부르고 그렇지 않을경우(서브 레이아웃일 경우)에는 sub.css를 부르도록 하였다.
이렇게 하고 자기가 원하는 대로 sub.css를 수정하면 된다. 이 layout.html과 sub.css 모두 다 FTP에 업로드 해주면 이제부턴 서브 레이아웃에 css가 제대로 적용된다.




내 주관적인 포스팅이라 보는 사람들은 이해가 안되는 부분이 있을텐데 쩝...



댓글