XE 공식 사이트 레이아웃 수정판 (White Only)
조회수: 5655, 추천수: 2, 2007.08.13 11:37:48
- 게시글 주소 : http://www.zeroboard.com/3964619
- 엮인글 주소 : http://www.zeroboard.com/3964619/trackback
먼저 이 수정된 CSS 파일을 이곳에 올릴까 고민하다가, 클베회원님 중에서도 이런 부분 중 일부분을 수정하는데 어려움을 표하는 분들이 계시기에 혹시 회원님들 중에서 CSS에 대해서 잘 모르는 유저들이 계실까하여 클베 때 한번 올렸던 것을 일부 추가 수정하여 올립니다.
새로운 레이아웃도 아닌 것을 왜 올리냐고 하시면 내리겠습니다... m(_ _)m
================================================
XE 공식 사이트 레이아웃 화이트 버전이 배경이미지를 지원해주는 것은 좋지만,
그 덕분에 몇 가지 문제점이 있더군요...
1. 우선 홈페이지 로고의 배경 부분이 색이 지정이 되어 있지 않아 배경 이미지가 그대로 비춰 보인다는 점...
2. 로그인창과 서브메뉴의 왼쪽과 위, 게시판의 위와 오른쪽이 배경 이미지에 너무 달라붙어버려 보기가 흉하다는 점
3. 배경이미지를 넣을 경우에 서브메뉴 바깥에 둘러싼 1픽셀짜리 라인이 의미가 없어진다는 점... (왼쪽라인이 배경이미지에 묻혀 버리거든요.. 그래서 위, 오른쪽 라인만 덩그러니 있는 느낌입니다.)
4. 배경이미지가 들어갈 경우 서브메뉴 부분의 바깥라인의 의미가 줄어들면서 라인을 없애면 메뉴박스가 왼쪽과 오른쪽 부분이 약간은 허전한 느낌이 듬... (주관적인 느낌입니다.. ^^;;)
5. 상단 배너창의 높이가 114픽셀로 되어 있는데, 메뉴가 들어가는 부분의 높이를 빼고 나면 흰색 레이아웃 적용할 때 로고이미지가 100픽셀이 적당하다고 나오는데, 실제 100픽셀의 높이를 가진 이미지를 등록하면 메뉴 부분을 덮어 버립니다. 그래서 배너창 높이를 160픽셀로 조정했습니다.
위 문제를 제 나름대로 해결한 CSS 파일을 올려드리니 필요하신 분은 활용해 주세요.. ^^;;
파일 설치 경로는 "layouts/xe_official/css" (올리실 때 덮어쓰셔야 합니다)입니다.
사실 제대로 작성을 하려면 'layout.html'과 'info.xml' 파일을 함께 수정하여 기존 화이트용 CSS 파일을 덮어쓰지 않는 것이 원칙인 것 같습니다.
왜 냐하면, 저의 경우 배경이미지(특히 첨부이미지처럼 전체에 걸쳐진)를 적용한다는 가정하에서 수정한 것이라 배경이미지를 적용하지 않거나, repeat-x값으로 배경이미지가 로그인창이나 서브메뉴, 게시판 부분에 영향을 끼치지 않는 경우는 오히려 왼쪽과 오른쪽에 주어진 여백값 때문에 오히려 보기 싫을 가능성이 많을 것이기 때문입니다.
필요하시면 조만간 'layout.html'과 'info.xml' 파일을 수정해서 새로운 레이아웃으로 추가된 파일을 함께 올리겠습니다.
어쨌든, 전체에 걸친 배경 이미지 적용 때문에 저와 같은 고민을 하신 분은 아래 첨부된 white.css 파일을 받으셔서 덮어쓰시면 됩니다... *^^*;;;;;;;
그리고 배경이미지는 본인에게 맞는 것을 직접 올리시면 됩니다. (이미지에 보이는 것 같은 배경이미지도 함께 이곳에 올려드리겠습니다.)
조치 결과는 첨부 이미지와 같습니다.

실제 적용되고 있는 사이트를 보시려면 http://edu.binamu.com(새창으로보기)으로 오시면 됩니다.
:::::: 사족 하나 :::::::
아마 레이아웃 수정에서 배경이미지를 올리면, 샘플이미지처럼 나타나지 않고 가로 한 줄로만 배경 이미지가 보입니다.
이건 레이아웃 파일(layouts.html)의 기본값이 repeat-x로 되어 있기 때문에 가로 한 줄로만 배경이미지가 깔리는 겁니다.
이 부분을 수정하시려면 레이아웃 편집으로 들어가셔서
12번째 줄쯤에 있는
<!--@if($layout_info->background_image)-->
<style type="text/css">
body { background-repeat:repeat-x; background-image:url({getUrl()}{$layout_info->background_image}); }
</style>
<!--@end-->
라는 부분에서 "background-repeat:repeat-x;" 를 "background-repeat:repeat;"로 변경하시면 됩니다.
세로로 한 줄로만 배경이미지를 까시고 싶으시면 repeat-y, 배경이미지를 반복하지 않고 한번만 나타나게 하려면 no-repeat를 입력하시면 됩니다...
제가 사용한 배경이미지입니다..

새로운 레이아웃도 아닌 것을 왜 올리냐고 하시면 내리겠습니다... m(_ _)m
================================================
XE 공식 사이트 레이아웃 화이트 버전이 배경이미지를 지원해주는 것은 좋지만,
그 덕분에 몇 가지 문제점이 있더군요...
1. 우선 홈페이지 로고의 배경 부분이 색이 지정이 되어 있지 않아 배경 이미지가 그대로 비춰 보인다는 점...
2. 로그인창과 서브메뉴의 왼쪽과 위, 게시판의 위와 오른쪽이 배경 이미지에 너무 달라붙어버려 보기가 흉하다는 점
3. 배경이미지를 넣을 경우에 서브메뉴 바깥에 둘러싼 1픽셀짜리 라인이 의미가 없어진다는 점... (왼쪽라인이 배경이미지에 묻혀 버리거든요.. 그래서 위, 오른쪽 라인만 덩그러니 있는 느낌입니다.)
4. 배경이미지가 들어갈 경우 서브메뉴 부분의 바깥라인의 의미가 줄어들면서 라인을 없애면 메뉴박스가 왼쪽과 오른쪽 부분이 약간은 허전한 느낌이 듬... (주관적인 느낌입니다.. ^^;;)
5. 상단 배너창의 높이가 114픽셀로 되어 있는데, 메뉴가 들어가는 부분의 높이를 빼고 나면 흰색 레이아웃 적용할 때 로고이미지가 100픽셀이 적당하다고 나오는데, 실제 100픽셀의 높이를 가진 이미지를 등록하면 메뉴 부분을 덮어 버립니다. 그래서 배너창 높이를 160픽셀로 조정했습니다.
위 문제를 제 나름대로 해결한 CSS 파일을 올려드리니 필요하신 분은 활용해 주세요.. ^^;;
파일 설치 경로는 "layouts/xe_official/css" (올리실 때 덮어쓰셔야 합니다)입니다.
사실 제대로 작성을 하려면 'layout.html'과 'info.xml' 파일을 함께 수정하여 기존 화이트용 CSS 파일을 덮어쓰지 않는 것이 원칙인 것 같습니다.
왜 냐하면, 저의 경우 배경이미지(특히 첨부이미지처럼 전체에 걸쳐진)를 적용한다는 가정하에서 수정한 것이라 배경이미지를 적용하지 않거나, repeat-x값으로 배경이미지가 로그인창이나 서브메뉴, 게시판 부분에 영향을 끼치지 않는 경우는 오히려 왼쪽과 오른쪽에 주어진 여백값 때문에 오히려 보기 싫을 가능성이 많을 것이기 때문입니다.
필요하시면 조만간 'layout.html'과 'info.xml' 파일을 수정해서 새로운 레이아웃으로 추가된 파일을 함께 올리겠습니다.
어쨌든, 전체에 걸친 배경 이미지 적용 때문에 저와 같은 고민을 하신 분은 아래 첨부된 white.css 파일을 받으셔서 덮어쓰시면 됩니다... *^^*;;;;;;;
그리고 배경이미지는 본인에게 맞는 것을 직접 올리시면 됩니다. (이미지에 보이는 것 같은 배경이미지도 함께 이곳에 올려드리겠습니다.)
조치 결과는 첨부 이미지와 같습니다.

실제 적용되고 있는 사이트를 보시려면 http://edu.binamu.com(새창으로보기)으로 오시면 됩니다.
:::::: 사족 하나 :::::::
아마 레이아웃 수정에서 배경이미지를 올리면, 샘플이미지처럼 나타나지 않고 가로 한 줄로만 배경 이미지가 보입니다.
이건 레이아웃 파일(layouts.html)의 기본값이 repeat-x로 되어 있기 때문에 가로 한 줄로만 배경이미지가 깔리는 겁니다.
이 부분을 수정하시려면 레이아웃 편집으로 들어가셔서
12번째 줄쯤에 있는
<!--@if($layout_info->background_image)-->
<style type="text/css">
body { background-repeat:repeat-x; background-image:url({getUrl()}{$layout_info->background_image}); }
</style>
<!--@end-->
라는 부분에서 "background-repeat:repeat-x;" 를 "background-repeat:repeat;"로 변경하시면 됩니다.
세로로 한 줄로만 배경이미지를 까시고 싶으시면 repeat-y, 배경이미지를 반복하지 않고 한번만 나타나게 하려면 no-repeat를 입력하시면 됩니다...
제가 사용한 배경이미지입니다..


52줄~53줄
/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding:10px 10px 30px 10px; overflow:hidden; background:#FFF; border:0;}
이렇게 바꾸면 테두리 생성됩니다.