이 자료실은 공식 자료실에 포함될 예정이며 신규 등록되지 않습니다.
자료를 올려주셨던 분들은 공식 자료실에 다시 올려주시면 매우 감사하겠습니다.
| 라이센스 : | GPL2 |
|---|---|
| 기타 라이센스 : | |
| 적용 버전 : | 정식버전(1.0이후) |
| 프로젝트 URL : |
LinuxTree 2Dan 레이아웃 배포합니다.
wowbj 레이아웃을 기본으로 하였습니다.
wowbj 레이아웃에서 필요없는 코드들을 *.html *.js *.css에서 제거하였습니다.
wowbj 레이아웃에서 모든 파일안의 코딩 순서를 순서에 맞게 재 정리하였습니다.
처음 레이아웃 하시는 분들에겐 이해가 쉬울 것으로 생각합니다.
화면 위쪽에 탑이미지 추가하였습니다.
화면 위쪽에 Login Join 메뉴 추가하였습니다.
화면 가로폭은 980px 입니다.
화면 왼쪽에 DTree 추가하였습니다.
화면 왼쪽에 기본 카운터 추가하였습니다.
화면 왼쪽에 배너 이미지 추가하였습니다. 그 자리에 배너 또는 img 태그 넣으시면 될것입니다.
참고. 언어 선택에 Bug가 있어 다 나타나지 않습니다. ^^ z-index의 문제인것 같습니다.
적용된 모습은...
www.linuxtree.com 에서 확인하실 수 있습니다.
아직은 미숙합니다. 테스트 하기 위해 메뉴와 페이지 게시판만 추가해 보았습니다.
감사합니다.
![[레벨:2]](http://www.xpressengine.com/modules/point/icons/default/2.gif "포인트:575point (47%), 레벨:2/30"){kind=icon}
슬픈동화
![[레벨:3]](http://www.xpressengine.com/modules/point/icons/default/3.gif "포인트:985point (27%), 레벨:3/30"){kind=icon}
3family.lecl.net제가 초딩이라 초보라서 그러는데요,
로고를 만들어서 올렸거든요
근데 쫌커서 게시판? 정도까지 갔는데
로고 간격을 늘릴 수 없나여?
빠른 답변 부탁드려요
![[레벨:0]](http://www.xpressengine.com/modules/point/icons/default/0.gif "포인트:65point (72%), 레벨:0/30"){kind=icon}
미니스토리3family.lecl.net 님.
로고 간격은 css 파일에서 980px까지 늘리실 수 있습니다.
css 파일에서
44 #top .top_logo_image1 { position:absolute; width:198px; height:36px; left: 10px; top:76px; background:url(../images/default/logo_image.png) no-repeat left top; }
45 #top .top_logo_image2 { position:absolute; width:198px; height:36px; left:772px; top:76px; background:url(../images/default/logo_image.png) no-repeat left top; }
라인입니다. 그곳에서 수정하시면 됩니다. ^^
![[레벨:1]](http://www.xpressengine.com/modules/point/icons/default/1.gif "포인트:320point (85%), 레벨:1/30")
조은(釣隱)
- 추천
- 1
- 비추천
- 0
미니스토리 님.
질문 1. 아래쪽 트리메뉴는 그냥 레이아웃 폴더에 같이 올리는 건가요?
답변 1. 그렇습니다. 레이아웃 디렉토리에 dTree/ 폴더에 들어 있습니다.
질문 2. 아니면 위켓 스킨에 올리는 건가요?;;;;
답변 2. 그렇지 않습니다. layouts 폴더에서 압축을 풀어주시면 됩니다.
질문 3. 적용할 메뉴는 어떻게 설정하는지.;;;
답변 3. 적용할 메뉴는 관리자로 로그인하시어, 화면 우측상단 Admin 클릭하시어, 사이트설정 클릭, 메뉴를 클릭 하시면 됩니다.
그거서에서 마음대로 메뉴를 수정하실 수 있습니다.
![[레벨:4]](http://www.xpressengine.com/modules/point/icons/default/4.gif "포인트:1715point (33%), 레벨:4/30"){kind=icon}
보스매니아
보스매니아 님.
위의 화면 결과를 보면...
컴퓨터 이미지 부터 나타나지 않고 있습니다.
그 얘기는 이미지가 존재하는 디렉토리 조차 찾아가지 못한다는 의미입니다.
따라서 설치한 후 디렉토리가 변경된 것으로 예측됩니다.
디렉토리가 변경되었다면, 파일 안의 디렉토리 들도 변경해 주셔야 합니다.
예를들면?
dtree.js 파일의 경우,
# vi dtree.js
30 // Tree object
31 var dtree_icon_path = "./layouts/LinuxTree_2D_Dir/dTree/dtree.img/";
31번 라인을 본인의 경로에 맞게 수정해 주셔야 합니다. 기타 등등 다른곳도 수정해야 할 것으로 생각합니다.
레이아웃 감사히 쓰고있읍니다
빨간부분 안에만 바탕화면따로 넣을라면 어디서 수정해야하나요?
초보라서요 잘몰겠네요ㅠ,ㅠ
궁금해418 님.
화면 왼쪽에 대한 스타일 이므로,
css/default.css 파일에서 스티일을 변경해 주시면 됩니다.
93 #columnLeft .leftbox { clear:both; width:200px; border:0px #e0e0e0 solid; padding:2px 0px 0px 0px;_padding-right:3px; background:#FFFFFF; }
94 #columnLeft .loginbox { clear:both; width:200px; background:#FFFFFF; }
95 #columnLeft .widgetbox { clear:both; width:200px; background:#FFFFFF; padding:2px 0px 0px 0px;_padding-right:3px; }
96 #columnLeft .widgetimg { clear:both; width:200px; height:300px; background:url(../images/default/banner_200x300.png) no-repeat center bottom; }
97
위의 93번에서 background:#FFFFFF; 를 background:url()로 변경해 주시면 되겠네요.
그런데, 잘 아시다시피 님께서 빨강색 줄로 친 영역은 HTML에서 DIV 태그를 사용합니다.
빨강색 줄로 친 전체 영역이 93번 라인
그 안에 로그인 영역이 94번 라인
그 아래 영역이 dTree 영역입니다.
따라서, 93번 줄에서 지정을 해 준다 한들... 94번 연영과 dTree 영역이 위에 올라와 있는 형상이므로 이미지는 나타나지 않을 것입니다.
물론, dTree 영역과 카운터영역 아래에 빈 공간이 형성된다면 그 영역엔 이미지가 나타날 수 있을 것입니다.
편하게 잘 쓰실 수 있기를 바랍니다.
감사합니다.
박상도625 님.
말씀하신대로... default.css 파일에서,
116 #columnCenter { float:top; width:768px; overflow:hidden; margin-left:12px; padding:2px 0px 0px 12px;_padding-right:3px; background:#FFFFFF; }
레이어 유동위치를 top으로 하니 위로 딱 붙고, 외쪽 패딩을 12로 하니 오른쪽 열도 잘 맞는군요. ^^
IE6 쓰시는 분이 Center열이 아래로 떨어진다 말씀하셔서 왜 그런가 했는데... 저것 때문이었네요.
행복한 날 되세요.
감사합니다. Thank-You.
조은님 덕분에 원하는 홈을 만들 수 있어서.... 정말 감사하게 생각합니다^^
레이아웃을 적용하고... 로그인박스의 '회원가입' 버튼을 누르면... 회원가입폼이 별도 페이지로 이동하지 않고
메인페이지 내에서 .. 최근게시물을 밀어내고 함께 출력이 됩니다.
layout.html 소스 중 268줄 {$content} 소스를 삭제하고 그 부분에 최근게시물 코드를 넣으면
최근게시물은 보이는데 로그인박스 내 회원가입 등 모든 버튼이 작동을 안하구요..
최근게시물 코드와 함께 {$content} 소스를 넣어야 회원가입, 회원정보보기 등이 제대로 작동을 합니다.
적용 홈페이지 http://isamo.org
아이사랑 님.
문제에 대한 설명 잘 읽어 보았고, 사이트에 접속하여 증상을 확인해 보았습니다.
위젯 코드를 생성하신 후 layout.html 파일안에 삽입해 주신것으로 보이는데,
HTML 파일안에 Widget Code가 삽입된 것이기 때문에 항상 타나날 수 밖에 없습니다.
HTML 파일안에 Widget Code를 삽입하셨기 때문에 항상 나타나는 것이 당연한 것입니다.
^^
다시 말해,
Widget Code를 생성해 붙여넣기를 하는 경우는 항상 화면에 나타나야 하는 경우입니다.
따라서 홈페이지의 상단, 좌측, 우측, 하단 부분에 붙여넣는 것이지...
항상 변하는 화면 가운데 Content 영역에 Widget Code를 붙여넣기 하지는 않는다는 것입니다.
항상 변해야 하는 가운데 Content 영역에 Widget Code를 정적으로 붙여버리시면 정적으로 고정됩니다.
항상 변해야 하는 곳에 정적으로 자리를 잡는것입니다.
^^
결론적으로,
XE에서는 로그인 회원정보 등등의 모든 정보들을 Content라는 객체로 만들어 넘겨주고,
Layout.html에서는 {$Content}라는 문장으로 Content라는 객체에 들어있는 내용을 화면에 보여주는 것입니다.
사실, {$Content}라는 것 자체가 echo(); 또는 printf() 같은 함수로 화면에 뿌려주는 것입니다.
따라서, Layout.html 파일 안에서 {$Content}라는 문장 다음에 위젯코드를 추가하시면 당연히 추가되어 출력되겠지요.
위젯을 사용하실 때, 화면 가운데 나타나야 하는 것들은 관리자로 로그인 하신 후 화면 하단에 있는 [페이지 수정]을 이용하세요.
[페이지 수정] -> 원하는 위젯 선택하시고 -> [추가] 버튼 클릭하시고, -> 위젯 설정 해 주시고 -> 위젯 위치 잡으시면 됩니다.
그렇게 해 주시면
[페이지 수정] 에 의해 레고처럼 조립된 위젯들이 모여 하나의 Content가 되는 것이고,
회원가입을 클릭했을때 내부적으로 생성된 출력물도 하나의 Content가 되는 것이고,
정보보기를 클릭했을때 내부적으로 생성된 출력물도 하나의 Content가 되는 것이고,
그런 순간 순간 생성된 Content 들이 화면 가운데 영역 = 컨텐츠 영역에서 매번 교체되는 것이죠.
설명이 잘 되었는지요. ^^ 성공을 기원합니다.
조은 드림.
조은님의 자상하신 설명에... 이제야 XE 작성 개념을 이해하게 되었네요^^
조은님의 말씀대로 해보았는데.. 웹브라우저별로 다르게 보이는 증상이 있습니다.
IE6는 최근게시물이 밀려 내려가고, 파이어폭스는 제대로 보이고.....
초보의 답답함...^^*
참고로요...
제가 처음 접한 레이아웃은 '똑띠'님의 jdh_2차 버전이었는데요..
{$content} 부분 넣고, 그 아래에 contentBody 를 넣어서 위젯코드 붙여넣어도
회원가입창, 정보보기 창이 페이지 이동 형태로 제대로 나오는 거 같네요..
* 똑띠님 레이아웃 해당부분 소스 ----------------------------------------------------
<!--@if($act)-->
<div id="contentBody">
{$content}
</div>
<!--@else-->
<div id="contentBody">
<div id="columnLeft">
<!-- 로그인 위젯 -->
<img width="100%" height="100" src="/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="login_info" body="" skin="jdh_skyblue" colorset="default" widget_cache="0"/>
----------------------------------------------------------------------------------------------------------
조은님 너무 감사합니다... 조은님의 도움으로.. 잘 사용하고 싶습니다..^^
위에 댓글로 올려드린 소스는.. 소스의 일부분만 올려 드려서..... left 영역만 보이게 된 거구요..
left 영역 아래에 center, right 영역까지 위젯코드들이 있습니다.
제가 적용한 jdh_2차 레이아웃 소스와 jdh_2차 배포된 원본 layout.html 을 첨부합니다.
수고해주셔서 감사드립니다^^
[첨언]
사용에 어려운 점이 회원가입폼 때문이어서
회원가입 버튼을 누르면 가입폼이 메인화면을 아래로 밀어내고 제대로 볼 수 있도록
{$content} 를 'ContentBody시작' 소스 위에 올려놓고 사용 중입니다^^
.............................................................
{$content}
<!-- ContentBody 시작 -->
...........................................................
아이사랑 님.
IE6에서 columnCenter가 화면 아래로 밀려 내려가는 것은...
css/default.css 파일에서 아래 내용처럼 _padding-right:3px;를 제거해 주시면 되겠습니다.
116 #columnCenter { float:right; width:768px; overflow:hidden; margin-left:12px; padding:2px 0px 0px 0px;_padding-right:3px; background:#FFFFFF; }
116 #columnCenter { float:right; width:768px; overflow:hidden; margin-left:12px; padding:2px 0px 0px 0px; background:#FFFFFF; }
처럼 수정해 주세요.
^^
padding-right를 지정하다 보니 전체폭 780px을 넘어버려 다음줄로 밀리는 현상이었습니다.
그리고, 첨부하신 HTML 파일을 살펴보니...
왼쪽 가운데 오른쪽 영역을 출력한 후, content가 있을때 이어서 출력하는 방식이더군요.
그런 경우라면 가운데 영역에 img 태그로 고정출력 가능합니다. ^^
안녕하세요. 좋은 레이아웃 감사드립니다.
제가, 이것을 이용해서 저희 학원사이트를 만드는 중인데요.
1. 왼쪽에 디지털 시계를 넣으려고 하는데 잘 안됩니다.
2. 그리고 기타 다른 위젯도 계속, 그 뒤로 넣고 싶은데요. 방법 좀 알려주세요.
제 홈페이지를 한번 봐주세요.
http://jsksoft2.codns.com:8080/xe/home
3. 또한 http://jsksoft2.codns.com:8080/xe를 입력하면 다른 게시판이 뜸니다. 그래서 계속해서 /home 까지 붙여서 입력하게 됩니다.
어떻게 하련 될런지요.
4. 상단 왼쪽 '김선생영어학원'을 클릭하면, 해당 페이지로, 상단 오른쪽 '명지컴퓨터학원'을 클릭하면 해당 페이지로 이동하고 싶습니다.
너무나 많은 질문에 죄송합니다.
감사합니다.
조은(釣隱)
- 추천
- 1
- 비추천
- 0
질문1. 디지탈 시계 안 나타나는 것은 버그입니다.
xe/widgets/DroArc_clock/skins/default/normal/clock.swf 에 들어있는데,
xe/widgets/DroArc_clock/skins/default/normal/clock.swf 에서 찾습니다. 따라서
xe/widgets/DroArc_clock/skins/default/clock.swf 에 복사해 주시면 되겠습니다. clock.swf를 복사해 주세요.
질문 2. 지금 하고 계신대로... default.html 또는 레이아웃 수정에서
<!-- 카운터 출력 -->
<div class="widgetbox">
<img class="zbxe_widget_output" widget="counter_status" skin="styx_flash" />
<img class="zbxe_widget_output" widget="DroArc_clock" skin="default" />
</div>
처럼 계속 img 태그를 넣어 주시면 되겠습니다. img 태그는 관리자페이지 레이아웃에서 [코드생성] 하시면 됩니다.
질문 3. 현재, http://jsksoft2.codns.com:8080/xe/index.php 파일만 가지고 계신데
index.html 파일을 하나 생성하시어 아래 내용을 맨 앞에 넣어 주시면 되겠습니다.
<head>
<META HTTP-EQUIV="refresh" CONTENT="0; URL=http://jsksoft2.codns.com:8080/xe/home/">
</head>
질문 4. 메뉴 우측에 있는 명지컴퓨터는 -> Layout을 하나 더 생성하시어 그 레이아웃으로 지정해 주시면 될것이고,
상단 이미지 우측에 있는 명지컴퓨터는 layout.html 파일에서
<div class="top_logo_image2">
<a href="./INDEX2.HTML"><img src="/xe/layouts/LinuxTree_2D_Dir/images/default/logo_image_2.png" /></a>
</div>
로 지정하시고 index.html 옆에 INDEX2.HTML 파일을 하나 만들어 주시면 되겠습니다.
INDEX2.HTML의 내용은 index.html 처럼 기술하셔도 좋고 또는
<head>
<META HTTP-EQUIV="refresh" CONTENT="0; URL=http://jsksoft2.codns.com:8080/xe/명지컴퓨터/">
</head>
이상입니다.
^^
사람이 만든 것이기에...
컴퓨터나 프로그램 코드는 문제를 해결하는 방법이 사람에 따라 여러가지가 나올 수 있습니다.
위의 방법은 제가 생각하고 있는 방법입니다.
행복하세요.
선생님 안녕하세요.
잘 쓰고 있습니다.
한가지 더 질문드려도 되는지요.
상단의
<!-- Top Img 시작 -->
<div class="top_image">
<!--@if(!$layout_info->top_image)--><img src="./images/{$layout_info->colorset}/top_image.jpg" border="0" /><!--@else--><img src="{$layout_info->top_image}" border="0" />< 플래시 파일 만들어서 넣으려면 어떻게 해야되는지요. 또한 그 크기도 크개 조절할 수 있는지요.
2. 왼쪽에 배경색을 넣고 싶습니다.
3. 저희 홈페이지에 보시면 가운데 '학원게시판', '질문게시판' 기타 게시판이 있는데 어떻게 배경색을 넣을 수 있나요.
제 홈피는 http://jsksoft2.codns.com:8080/xe/home입니다.
감사합니다.
1. 홈페이지 상단에 SWF 플래쉬 파일을 넣는 방법은?
짐작하신 것처럼 그 위치에 넣으시면 됩니다. 예를 들어, 아래와 같이 넣습니다.
이때 중요한 것은 default.css 파일에서 탑 이미지의 세로폭을 맞추어 주셔야 합니다. ^^
<!-- Top Img 시작 -->
<div class="top_image">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="800" height="300" id="Shockwave Flash Object" align="middle">
<param name="movie" value="http://linuxtree.com/swf/flash10.swf" />
</object>
</div>
<!-- Top Img 끝 -->
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
주의! default.css 파일에서 높이를 맞추어 줍니다. 위에서 설정한 SWF 파일의 폭은 300px 입니다. ^^
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
35 /* Site Layout - Login Join 레이어를 위한 영역 정의 132 = 112 + 20 */
36 #top { position:relative; width:980px; height:300px; top:0px; background-color:#000000;}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
질문 2. 그리고 3. 화면 왼쪽에 배경색을 넣으려면?
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
default.css 파일에서 아래와 같이 90번 라임주터 background:#XXXXXX로 맞추어 주시면 됩니다. ^^ 현재 FFFFFF로 되어있습니다.
90 #columnLeft { float:left; width:200px; overflow:hidden; }
91 #columnLeft .leftbox { clear:both; width:200px; border:0px #e0e0e0 solid; padding:2px 0px 0px 0px;_padding-right:3px; background:#FFFFFF; }
92 #columnLeft .loginbox { clear:both; width:200px; background:#FFFFFF; }
93 #columnLeft .widgetbox { clear:both; width:200px; background:#FFFFFF; padding:2px 0px 0px 0px;_padding-right:3px; }
94 #columnLeft .widgetimg { clear:both; width:200px; height:300px; background:url(../images/default/banner_200x300.png) no-repeat center bottom; }
이상입니다.
즐거운 하루되세요.
참. 글을 늦게 봐서 댓글이 늦었습니다.
http://linuxtree.com/zbxe/ 들어와 보시면 SWF 파일 셋팅해 놓았습니다. SWF 파일이 시끄러워서 정신이 없네요. ^^
안녕하세요.
먼저 좋은 레이아웃을 배포해 주셔서 감사합니다.
초보자라 여러 사이트의 도움말을 통해 겨우 홈페이지를 하나하나 만들어 가고 있습니다.
그러던 중 제가 원하는 레이아웃이어서 덥석 다운을 받아 만들고 있는데요.
아래에 첨부한 파일처럼 제목이 길 경우에는 어떤 부분을 조절해야 하는지요?
옆의 제목과 겹쳐보이는 경우가 있었습니다. (우선 지금은 줄였구요.)
앞으로 공부를 많이 해야겠습니다. 답변 부탁드립니다.
(홈페이지는 부족한 부분이 너무 많아서 공개하기가 부끄럽습니다. ^^;;)
조은님.
수정을 했습니다.
기본메뉴가 8개 있는 상태에서 글자수의 차이로 인해 (기본4글자, 9글자) 각 각 크기조절이 가능한지요?
한꺼번에 변화가 되니... 기본메뉴의 수가 많아서인지 뒤로 많이 밀리네요. ㅠㅠ
잠시 홈페이지에서 봐주시면 어떨런지요? ^^;;
