open all | close all






만나수도원

XE 레이아웃

처음 작성한 언어 : 한국어
Admin
2009.05.10 21:00:24 (*.226.214.55)
6,978

레이아웃을 dtree1.3에서  dtree_magic2로 교제한다.

1. 나름대로 제일 어려운 문제는
  1). 로그인을 교체해야 한다 (기존의 것 사용을 위해서는)
  2). 접속 카운트를 새롭게 삽입해야 한다.
  3). 하단 footer를 새로 만들었다.

2. 수정한 부분은 css에서 할 필요없이 레이아웃 설정에서 하면 된다.
  *  아래를 참조할 것
   로고 top위치설정                       18 -> 10으로(현재로고 사용시)
   로고 left위치설정                        160 -> 10으로
   상단 header 배경이미지            원본 : 980x112  white  :  (현제사용 상단로고 : logo_top55b  750X55 )
   상단 header 배경 높이 설정      180 -> 125으로     ( 상단 배경 이비지 55 + 1차 메뉴 높이 70)   
   1차 메뉴 배경색                            (#273f4c 원본)  ->   #00b550 (녹색)
   1차 메뉴바 top 설정                     120 -> 70으로
         *  원본 메뉴바 이미지를 사용하려면 아래의 첨부파일 menu_bar6.gif를 다운 후 
             레이아웃 설정화면에서 메뉴 이미지 불러오기로 사용하세요. 
   1차 메뉴바 높이 설정                    60  그대로  60
   따라다니는 2차 메뉴 top설정      151   -> 106으로
   언어 :        10.       15
   검색창      18.       5
   상단여백설정                                  64  ->  18


3. 트리 메뉴 x 박스 (만약 문제시만)
  *  정식버전 설정의 하단 부분 참조  ( v1.1부터는 문제해결됨)
  *   디트리메뉴가 배꼽으로 나타날 때 : 여기를 참조하세요.
                       업로드한 레이아웃 폴더이름과 디트리js파일의 경로설정에서 동일해야 함(대략 31번째 줄)
                         (  dtree / js / dtree.js 파일에서  31줄 )    나는 dtree_magic2 로 올렸다.

                                      // Tree object
                                     var dtree_icon_path  = "./layouts/dtree_magic2/images/dtree_img/";
                                    (업로드 할 모르지오레이아웃 폴더명이 dtree_magic2 라면 바로위처럼 빨간색 글씨로 일치 해야함.)


4. 로그인 추가 혹은 수정 해야 한다. 모르지오1.3부터 로그인이 바뀌었다.
*  모르지오1.3을 사용하려면 웹미니 로그인 2.5를 사용하게 되어 있다. 
1).  다운 : xe다운로드 > 위젯 > 로그인스킨 선택 > 웹미니로그인2.5  > 다운받는다    webmini_2_5.zip
2).  설치 : Widgets >  login_inf  > skins  폴드안에 webmini_2_5 를 올린다.

* XE와 같은 스킨을 사용하려면 layout.html을 고쳐서 사용한다.
1).  모르지오1.3  layout.html 원본은 아래와 같다.   373줄아래로
        <!-- 로그인 위젯 -->
            <!--@if($layout_info->login_Use == "yes")-->
            <div id="login_form"> <img class="zbxe_widget_output" widget="login_info" skin="webmini_2_5" colorset="default" /></div>
             <!--@end-->
2). 기존 xe와 같이 사용하려면 아래와 같이 고치면 된다.    373줄 이하 (현재 사용중)
        <!-- 로그인 위젯 -->
            <!--@if($layout_info->login_Use == "yes")-->
            <div id="login_form"> <img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" /></div>
            <div id="margin_bottom_5"></div>
             <!--@end-->

 3). 로그인 아래에 있는 일렬 카운트 아래 소스를 삭제해야 한다. (기본 카운트 사용하지 않을시 사용할 수도 있다)
<div id="wiget_center"><img class="zbxe_widget_output" widget="counter_status" skin="morugio_count" colorset="normal" /></div>

5. 다시 올린 후 고쳐야 할 부분.  (* 주로 이미지들이다)
 1). 레이아웃을 삭제하지 말고 그대로 둔 상태에서 운영자에서 작업을 하면된다. 
 2). bgHeder.jpg 를 수정해야 한다 -> (이름수정)bgHeder_원본.jpg .  bgHeder.jpg 은 흰색으로하고 업로드한다.
     * bgHeder.png 를 수정해야 한다. ->   위와 같이 동시에하면 된다.
     * 기본폴드(보관용)  / images / bgHeader.jpg로 복사해 둔다.
 3).  buttonLang.gif 를 바꾸라 -> 원본은 흰색글씨 이미지이다. -> xe1.2.0에서 찾아 복사하면 된다.
   *  위와 같은 / images / buttonLangXE.png 로 복사해 둔다.
   *  css 의 해당부분(Lang) 글자색(한국어)을 바꾸어야 한다 .   현제 #ffffff(흰색) -> #0070c0으로 바꾸었다.    ( 34즐  )
 4). zeroBoardXE.png 를 삭제 (이름수정)  -> zeroBoardXE_원본.png 
4-1. images 폴드를 현제 사용하는 것에서 선택하여 바꾸면 된다.


6.  1, 2차메뉴 정열 dtree_magic2에서는 그대로 사용하면 된다.
1). 1차메뉴 정열 - 우측으로 20px  - 아래와 같이 수정 ( 4-> 24px로 )
        /* main 1차 메뉴 */
        #gnb { position:absolute; top:112px; left:0px;  width:980px; height:62px; margin-bottom:0px; background-color:#273F4C; overflow:hidden; }
         #gnb li { float:left; list-style:none; /*background:url(../images/default/bgGnbVr.gif) no-repeat left top;*/ padding-left:10px; position:relative; left:24px; white-space:nowrap;}
 
2). dtree_magic2 는 수정할 부분이 없다. 위 1차부분만 수정해 주면 된다.
  
3). 2차메뉴 좌측 정열 : 1차메뉴와 2차메뉴가 시작점이 같도록 정열한다.  css   76줄
  *   /* main 2차 메뉴 */
      .gnb_sub { position:absolute; top:151px; left:8px; height:24px; overflow:hidden; white-space:nowrap;  }
  * 2 -> 8px 로 고쳐야 상하가 같도록 정열된다. ( * 반드시 px를 붙혀야한다.)

 4). * 모르지오 레이아웃 1.3의 수정상태는 아래와 같다 (복사 혹은 숫자만 수정)
    /* main 2차 메뉴 */
    .gnb_sub { position:absolute; top:151px; left:10px; height:24px; overflow:hidden; white-space:nowrap;  }
    .gnb_sub li { float:left; list-style:none; background:url(../images/blue/sub_part.gif) no-repeat left center; padding-      left:2px;position:relative; left:-2px; white-space:nowrap;}
   .gnb_sub li a { display:block; float:left; padding:5px 5px 0 5px; height:18px; color:#F8EA12; white-space:nowrap; text-      decoration:none;font:1.21em font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; }


7. 하단 foot 
1).  layout.html  수정  408줄   (관리 > 레이아웃 편집에서 하면된다.)
dtree_magic2에서는 아래를 복사해서 넣으면 된다.
    <div class="copyright">   <br>    </div>
     <div class="copyright">132-021  서울특별시 도봉구 방학1동 675-37.   Tel : 02-955-6732.  HP : 011-9490-0691.
    fax : 02-6008-4491 </div>
   <div class="copyright">
      Copyright ⓒ 2002~2009 <a href="http://www.koabbey.com/">고려수도원    korea          abbey</a>All rights reserved. V_090430  <a href="mailto:ny628p@koabbey.com">ny628p@koabbey.com</a>
      </div>

2).  css 에서 컬러 수정  ( layout.html 을 수정해도 안될 경우이다)
/* Site Layout - Footer */
#footer { position:relative; width:980px; height:160px; background:url(../images/default/) no-repeat left top; z-index:99;}
#footer .bt_l { float:left; width:10px; border-right:0px solid #dddddd; text-align:center; }
#footer .bt_r { float:left; width:960px; }
#footer .bt_r .b_menu {  margin-top:15px; text-align:center; border-left:0px solid #8c8c8c;}
#footer .bt_r .b_menu a { border-right:0px solid #8C8C8C; 5px; font-weight:bold; color:#3b608d; font:1.0em Tahoma; text-decoration:none; overflow:hidden; }
#footer .bt_r .b_menu a:hover, {color:#30C0FF;}
#footer .bt_r .b_copyright { margin-top:0px; text-align:center; border-left:0px solid #C0C0C0; font:1.0em Tahoma; color:#3b608d; text-decoration:none; overflow:hidden;}
#footer .bt_r .b_copyright a { text-align:center;border-left:0px solid #8C8C8C; 5px; font-weight:bold; color:#0070c0; font:1.0em Tahoma; text-decoration:none; overflow:hidden; }
#footer .bt_r .b_copyright a:hover, {color:#800000;}
#footer .bt_r .b_text { margin-left:5px; margin-top:0px; text-align:center; 5px; font-weight:bold; color:#8C8C8C; font:1em Tahoma; text-decoration:none; overflow:hidden; }
/* Default Skin - End */

 3).  위 두곳 다 수정해야 한다.


8. 상단 언어부분 수정해야 한다.
  * 지금은 흰색이라서 흰색바탕이라 글이 안보인다.  글자색 구분 등이 필요하다.
   * 검색도 고치고 싶으면 생갈을 고친다.
1).  css파일에서
/***********************************************************/
#language { position:absolute; top:0px; right:15px; z-index:100;}
#language strong { color:#ffffff; font:.75em Tahoma; margin-right:3px;}
#language a img { vertical-align:-5px;}
#language ul { position:absolute; top:15px; right:0px; display:none; border:1px solid #b23628; background:#de4332;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:61px; padding:3px 8px; font:9px Tahoma; color:#ffffff; text-decoration:none;}
#language ul li a:hover { background:#bc4032;}

 2).  현재상태
#language { position:absolute; top:0px; right:160px; z-index:100;}
#language strong { color:#5c5c5c; font:.75em Tahoma; margin-right:3px;}
#language a img { vertical-align:-5px;}
#language ul { position:absolute; top:15px; right:0px; display:none; border:1px solid #d9d9d9; background:#de4332;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:61px; padding:3px 8px; font:9px Tahoma; color:#5c5c5c; text-decoration:none;}
#language ul li a:hover { background:#bc4032;}

3). 글자는 이미지를 바꾸어야 한다.  흰색글씨로 되어 있므로 xe1.2.0에서 찾아서 새로 고치든지 이미지를 바꾸면 select language가 보인다.
  *  buttonLang.gif 를 바꾸라. 
  *  로칼 /  images / 에 있다.


9. 검색부분 색갈 수정
    css의 issearch 중 53, 55열을 수정해야 한다
1). 원본은 아래와 같다.
#isSearch .inputText { vertical-align:middle; position:relative; top:0; _top:-1px; left:1px; padding:3px 3px 1px 3px; width:94px; height:13px; color:#ffffff; border:1px solid #8E8E8D; background-color:#857C79; }
#isSearch .inputText:hover,
#isSearch .inputText:focus { border:1px solid #B0B0AF; background-color:#A9A4A3; }
*:first-child+html body#default #isSearch .inputText { position:relative; top:-1px;}
#isSearch .submit { vertical-align:middle; _position:relative; _top:-1px;}
*:first-child+html body#default #isSearch .submit { position:relative; top:-1px;}

2). 수정본은 아래와 같다.  아래를 복사해서 53열부터 아래로 붙혀넣기 하면 된다.
#isSearch .inputText { vertical-align:middle; position:relative; left:1px; padding:3px 3px 1px 3px; width:94px; height:13px; color:#3e3f3e; border:1px solid #8E8E8D; background-color:#D3D3D3; }
#isSearch .inputText:hover,
#isSearch .inputText:focus { border:1px solid #8E8E8D; background-color:#DCDCDC; }
*:first-child+html body#default #isSearch .inputText { position:relative; top:-1px;}
#isSearch .submit { vertical-align:middle; _position:relative; _top:-1px;}
*:first-child+html body#default #isSearch .submit { position:relative; top:-1px;}


10.  각 페이지 하이퍼 링크 밑줄 없애기   ( dtree_magic2는 설정되어 있다)
   *  레이아웃 설정 / 편집에서 -> 편집클릭하고 > 편집창의 최상단에 아래와 같이 삽입한다.

      <style><!--
      A:link { text-decoration:none; }    
      A:visited { text-decoration:none; }  
      A:active { text-decoration:none; }    
      --></style>

11.    레이아웃에 카운트 넣기  (  3). 과 같이 하면 간단하다. = 레이아웃 편집에서 바로 생성하면된다.)
1).  이미지 레이아웃 (1주일)을 삽입하려면
    *  layout.html 의 431열 쯤 좌측 베느삽입 아래에 아래의 소스를 복사해 넣으면 된다.

  <!-- 이미지 카운터 -->
        <div id="wiget01"><img width="100%" height="100" src=common/tpl/images/widget_bg.jpg " class="zbxe_widget_output" style="clear:both;" widget="image_counter" body="" widget_cache="0" graph_width="180" graph_height="150"
        day_range="" bg_color="" check_bg_color="" grid_color="" unique_line_color="" unique_text_color="" point_color="" widget_sequence="476" /></div>
        <div id="wiget"></div>
        <div id="wiget"></div>
        <div id="wiget"></div>
        <div id="wiget"></div>
  </div>
  <div id="columnRight">
  <!-- 컨텐츠 시작 -->

2).   레이아웃 좌측 하단 기본 카운트 설치하기

    관리 / 사이트 설정 / 위젯 /기본카운트 위젯 / 코드생성 / 선택하고 코드생성 한후에 복사해서
    레이아웃의 필요한 부분에 삽입하면 된다.   

    기본레이아웃 위젯 . 스틱스 플래쉬 카운트 (styx-flish)  선택후 하단에서 생성.

    <div id="wiget">여기에 삽입하면된다.</div>
    <img class="zbxe_widget_output" widget="counter_status" skin="styx_flash" />

3).  현제 tree_magic2 레이아웃에 사용하는 카운트는 아래와 같다 
   *  이미지 카운트는 중앙정열을 따로 해야 함으로 기본 카운트와 소스가 조금 달라졌다.

    <!-- 이미지 카운트 -->
    <div style="TEXT-ALIGN: center"> 
    <div id="wiget"><align="right"><img class="zbxe_widget_output" widget="image_counter" skin="styx_flash" /></div>
     </div>

      <!-- 기본 카운트 STYX_ FLASH -->
      <div id="wiget"><img class="zbxe_widget_output" widget="counter_status" skin="styx_flash" /></div>
       <div id="wiget"></div>
   * 위 복사해서 dtree  아래 위젯삽입장소 위2) 와 같이 삽입하면된다.

12. 상단 top 메뉴
  * 정식버전 하단 참조 (우야노 심플 가로 카운트 )
  * 연구가 필요함
  *  설치는 zbxe/widgets/counter_status/skins/ 에 하시고 관리자 페이지에서 생성하시면 되겠습니다.

13. 상단 카운트 출력
  1). 상단 카운트 는 기본적으로 올려져 있으므로 layout.html에서 아래부분의 주소만 수정하면 된다.( * 상단메뉴출력    212 줄 )
     <li ><img width="100%" height="100" src="common/tpl/images/widget_bg.jpg" style="clear:both;" widget="counter_status" body="" skin="uyano_count" colorset="normal" widget_cache="0" widget_sequence="5907" /></li>

  2). uyano 카운터 스킨을  widget ---> counter_status --> skin  안에 (uyano_count)폴드를 넣어 주면 된다.
            
         webmini_2_5.zip


14. 각 페이지의 줄 간격이 좁아졌을 때는 아래와 같이 수정한다.
    * 줄간격이 좁아지는 것은  css 문제.     css 파일 default.css 대략 15번째줄에서
        body { background-color:#FFFFFF; background-position:left top; font-family:"돋움", Dotum, "굴림", Gulim,Tahoma, Sans-serif;}을
        body { background-color:#FFFFFF; background-position:left top;  } 으로 바꾸어 주세요.





God Bless You !

최근 수정일 : 2009-05-14 22:43:58 - Admin
이전 목록
번호
제목
글쓴이
공지 홈 메인 피이지 2014-11-27 (수정) secret
박노열
    2013-01-21 2014-11-27
공지 홈 메인 페이지 (2014-11-27. 수정)
박노열
2072   2013-01-21 2014-11-27
공지 레이아웃 편집 (2014-11-27. 수정) secret
박노열
    2012-01-30 2015-08-25
공지 디트리 매직 2 설정 (2014-11-27. 수정) secret
박노열
    2012-01-30 2014-11-27
dtree_magic2 수정 내역 / V090510 file
Admin
6978   2009-05-10 2009-05-14
33 메뉴가 9개 이상일 때
Admin
4478   2011-05-28 2011-05-28
32 상단 부분 크기 조절 / 후레쉬 삽입 / 공식
Admin
6919   2009-06-03 2009-06-03
31 로고제작 / 메이사님의 도움 file 4
Admin
7859   2009-05-29 2011-08-19
30 모르지오 매직2.0 원컬럼 / 최종완료 file 1
Admin
9702   2009-05-28 2009-05-28
29 모르지오 매직2.0 xe / 최종완료 file 3
Admin
7055   2009-05-28 2009-05-28
28 모르지오 매직2.0 dtree / 최종완료 file 3
Admin
7250   2009-05-28 2009-05-28
27 tree_magic2 에 사용하는 카운트들
Admin
5270   2009-05-14 2009-05-15
26 각 페이지 줄 간격이 좁아질 때
Admin
6019   2009-05-12 2009-05-13
25 모르지오 매직2.0 원컬럼 레이아웃! file
Admin
6439   2009-05-10 2009-05-10
24 모르지오레이아웃 매직2.0 (XE메뉴형) file 1
Admin
7720   2009-05-10 2009-05-10
23 모르지오레이아웃 매직 2.0 (디트리메뉴형) file 1
Admin
7229   2009-05-10 2009-05-10
22 기본 카운트 삽입 1
Admin
6193   2009-05-09 2009-05-24
21 안녕 하세요 2
우리아기
5553   2009-05-09 2009-05-10
20 layout에 이미지 카운트(1주일) 넣기
Admin
6300   2009-05-03 2009-05-13
19 웹미니 로그인 2.5 위젯 file
Admin
7944   2009-04-30 2009-04-30
이전 목록