EYOOM

설치

그누보드5가 최초 설치된 서버에 구매한 이윰 테마 업로드 경로와 설치 과정을 설명합니다.

해당 그누보드5 전용 테마는 그누보드5는 5.4 버전을 지원하는 테마 입니다.

기존 사이트 사용을 통해 파일 및 DB 수정한 사이트는 호환에 문제가 있을 수 있으니 백업 후 그누보드5 최신버전 순정으로 진행하기 바랍니다.

  1. 1. 다운로드 받은 파일을 그누보드5가 설치된 서버 루트에 압축해제한 폴더(extend, page, theme, xeyoom)를 업로드 합니다.

    image

  2. 2. '관리자 - 환경설정 - 테마설정'에서 해당 테마에 테마적용 클릭합니다.

    image

  3. 3. '관리자 - 환경설정 - 기본환경설정'에서 최근게시물, 검색, 접속자, faq, 회원스킨을 (테마)basic으로 변경합니다.

    image

  4. 4. '관리자 - 게시판관리'에서 이윰 전용 게시판 스킨 eb_basic, eb_gallery를 선택합니다.

    image

이윰 구조

이윰의 테마 구조와 프로그램 구조를 알려드립니다.

  • theme / 테마명
    • css 1
      • common.css
      • style.css
    • img 2
    • js 3
      • app.js
    • page 4
    • plugins 5
    • shop 6
    • skin 7
      • board
      • connect
      • content
      • faq
      • latest
      • member
      • new
      • outlogin
      • poll
      • popular
      • qa
      • search
      • shop
      • visit
    • head.php 8
    • head.sub.php 9
    • index.php 10
    • tail.php 11

디렉토리 구조

이윰 테마 디렉토리 구조

이윰 테마는 그누보드5 테마 구조에 js, plugins 폴더가 더해져 구성되어 있으며 각각의 폴더 내 포함된 파일들의 역활에 대해 알려드립니다.

1 css

테마의 전체적인 레이아웃 및 기초가 되는 스타일 설정 파일들로 구성

  • common.css: 이윰 테마의 반응형 레이아웃 설정에 공통적으로 사용되는 CSS 파일
  • style.css: 해당 테마의 반응형 레이아웃 설정에 사용된 CSS 파일
2 img

테마에 사용되는 이미지파일을 업로드

3 js

테마에 사용되는 기본적인 js 파일

  • app.js: 테마에 사용되는 스크립트 소스들을 담음.
4 page

개별 일반페이지를 추가하여 작업하실 수 있습니다.

  • page 폴더 내 aboutus.html.php 파일을 생성했다면 아래와 같이 페이지를 불러옵니다.
  • ex) http://사이트주소/page/?pid=aboutus
5 plugins

테마에 사용된 플러그인 모음

6 shop(이윰 쇼핑몰 테마에 제공)

쇼핑몰의 레이아웃 파일

7 skin

게시판, 최신글, 아웃로그인 등 테마의 스킨 폴더

8 head.php

레이아웃 head 파일

9 head.sub.php

레이아웃 head.sub 파일

10 index.php

레이아웃 index 파일

11 tail.php

레이아웃 tail 파일

  • 그누보드(영카트) Root
    • extend
      • xeyoom.package.php
    • page
      • _common.php
      • index.php
    • xeyoom
      • class
      • core
      • extend
      • inc
      • lib
      • common.php
      • config.php

디렉토리 구조

서브 메뉴 출력과 코딩된 페이지 메뉴 등록등 향상된 추가 기능을 제공합니다.

테마 메인

테마 메인을 설명 드립니다.

waypoints 플러그인을 이용해 스크롤 이동시 애니메이션 효과가 나오는 디자인이며 '/theme/eb_busi_010/index.php' 파일 하단 스크립트에서 액션 위치 조정 가능합니다.
waypoints 플러그인의 자세한 사용방법은 waypoints 가이드(http://imakewebthings.com/waypoints/guides/getting-started/)를 참고하기 바랍니다.
애니메이션 CSS 스타일은 /theme/eb_busi_010/css/style.css 파일 'waypoints 애니메이션' 부분을 확인하기 바랍니다.

ie로 서브페이지에서 메인 페이지 이동시 콘텐츠가 출력되지 않는 것을 확인 했습니다.
해당 부분은 waypoints 플러그인을 이용해 스크롤 이동시 해당 위치에 왔을 때 클래스가 입력되어 출력이 되는 것이데 위의 상황에서는 클래스가 입력이 안되며 몇번의 페이지 이동후 작동이 되는 것 같습니다.
ie와 관련해 바로 문제를 찾기는 어려울 것 같으며 해당 사항 해결을 위해 waypoints 플러그인을 사용하지 않는 것이 방법일 듯 합니다. (스크롤 이동시 애니메이션 미사용)
/theme/eb_busi_010/css/style.css 파일 600줄 waypoints 애니메이션 부분을 삭제하며 아래의 소스들을 수정하기 바랍니다.
454줄 삭제
.section-about .about-right .about-img:after {content:"";display:block;position:absolute;top:0;right:0;width:100%;height:100%;background:#57B5E7;}
495줄 삭제
.section-business .business-image:after {content:"";display:block;position:absolute;top:0;right:0;width:100%;height:100%;background:#57B5E7;}
571줄
.banner-link-wrap .banner-link-item {position:relative;padding:50px 40px;transition:all .3s linear}
583줄
.banner-link-wrap .banner-link-box:before, .banner-link-wrap .banner-link-box:after {;width:5px;height:100%}
.banner-link-wrap .banner-link-item:before, .banner-link-wrap .banner-link-item:after {width:100%;height:5px}

  1. 메인 페이지 로더

    image
    • 메인페이지 로딩 시간 동안 출력되는 화면입니다.
    • /theme/eb_busi_010/index.php 파일 '페이지 로더' 부분에 각 소스가 있으며 시간 조정 및 내용 및 이미지 수정합니다.

  2. 상단 레이아웃(Header)

    image
    • 상단 레아아웃으로 로고, 메뉴, 로그인, 검색등 콘텐츠가 있습니다.
    • /theme/eb_busi_010/head.php 파일에서 수정합니다.

  3. 메인 슬라이더

    image
    • /theme/eb_busi_010/index.php 파일 '메인 슬라이더' 부분에 각 소스가 있으며 시간 조정 및 내용 및 이미지 수정합니다.
    • 슬라이드 시간 조정은 스크립트 autoplaySpeed에서 조정합니다.
    • 이미지 비율 2560x1200 픽셀 이미지를 사용 했습니다.

  4. About

    image
    • /theme/eb_busi_010/index.php 파일 'About' 부분에 각 소스가 있으며 내용 및 이미지 수정합니다.
    • 이미지 비율 700x1000 픽셀 이미지를 사용 했습니다.

  5. Business

    image
    • /theme/eb_busi_010/index.php 파일 'Business' 부분에 각 소스가 있으며 내용 및 이미지 수정합니다.
    • 이미지 비율 1000x800 픽셀 이미지를 사용 했습니다.
    • 아이템 3개 출력에 맞게 디자인 되었습니다.

  6. Service

    image
    • /theme/eb_busi_010/index.php 파일 'Service' 부분에 각 소스가 있으며 내용 및 이미지 수정합니다.
    • 아이콘은 fontawesome을 이용했으며 아이템 3개 출력에 맞게 디자인 되었습니다.
    • '최신글' 부분에 출력할 게시판 아이디를 입력하며 옵션 설정합니다.
    • 최신글 스킨파일은 /theme/eb_busi_010/skin/latest/ 폴더 'busi010_gallery, busi010_list'폴더에 있습니다.

  7. Contact / FAQ

    image
    • /theme/eb_busi_010/index.php 파일 'Contact / FAQ' 부분에 각 소스가 있으며 내용 및 이미지 수정합니다.
    • 배경 이미지 비율 2560x930 픽셀 이미지를 사용 했습니다.
    • 아이템 2개 출력에 맞게 디자인 되었습니다.

  8. 하단 레이아웃(Tail)

    image
    • 하단 레이아웃으로 회사정보와 메뉴, 카피라이드등이 있습니다.
    • /theme/eb_busi_010/tail.php 파일에서 수정합니다.

서브 페이지

파일코딩을 통한 페이지 메뉴 등록 방법을 알려드립니다.

/theme/테마명/page 폴더에 있는 직접 코딩 된 php파일을 메뉴로 등록해 출력을 합니다. 예)/theme/테마명/page/overview.html.php

  • 1. page폴더 파일에서 내용과 이미지 수정 후 저장

    image

  • 2. 관리자 메뉴 등록 예)http://사이트 주소/?pid=overview

    image

  • 3. 등록한 메뉴를 통해 코딩된 파일이 메뉴로 출력

    image

서브페이지별 상단 이미지를 등록할 수 있습니다.

/theme/테마명/img/board_title/ 폴더 이미지는 gr_10.jpg(1차메뉴), gr_20.jpg(2차메뉴), gr_30.jpg(3차메뉴) 순으로 출력됩니다.

image

패치 및 기타

이윰 패치 파일을 버전별로 내역을 알려드립니다.

버전 1.2.0 (2020.04.16)

  • · /xeyoom/class/xeyoom.class.php
  • · /xeyoom/inc/subpage.menu.php
  • · /xeyoom/common.php
  • · /theme/eb_busi_010/css/style.css

버전 1.1.4 (2020.03.30)

  • · /xeyoom/class/xeyoom.class.php
  • · /xeyoom/inc/subpage.menu.php

버전 1.1.3 (2019.11.11)

  • · /xeyoom/inc/subpage.menu.php

버전 1.1.2 (2019.10.31)

  • · /xeyoom/class/xeyoom.class.php

버전 1.1.1 (2019.07.01)

  • · /theme/eb_busi_010/skin/latest/busi010_gallery/style.css

버전 1.1.0 (2019.04.19)

  • · 기업테마 #010(EB BUSI 010) 출시
Move Top