테스트 사이트 - 개발 중인 베타 버전입니다

그누보드 5.3 부트스트랩 4 반응형(w/side_menu) v1.2(v1.2 업로드: 2019-04-16)

· 6년 전 · 16157 · 73
side.png

### 2019-04-16: 일부 파일 수정 후 v1.2로 변경
1. 웹진 게시판에 가로보다 세로가 긴 이미지 업로드 시 리스트 목록의 썸네일 이미지가 아래로 길게 늘어나는 현상 수정
2. 리스트 게시판, 갤러리 게시판, 웹진 게시판의 내용 보기(View)에서 화면 폭을 조절하면 이미지의 폭이 가로로 꽉 차게 되는 현상 수정

 

### 2019-04-14: v1.0 이후에 수정한 내용을 적용하여 v1.1로 변경

1. 모바일 화면에서 메인 화면의 슬라이드의 크기를 작게 줄임
2. 화면 폭을 넓힐 때, 슬라이드의 이미지가 함께 늘어나는 현상 수정
3. 메인 화면의 최신글 추출 시 제목의 글자 수 제한 자동 조절 기능 추가

4. 테마 폴더 안에 슬라이드의 설정과 관련한 간단한 설명 파일 추가(slide.txt)

단, Hamburger Menu의 Hover 기능은 제외함

 

### 2019-04-13: new_slide.zip 설치 후에 화면 폭을 늘릴 때, 슬라이드의 이미지가 함께 늘어나는 현상 수정
1. new2_slide.zip 파일을 내려받아 기존의 파일을 대체하면 됨

2. 파일의 설치 방법과 슬라이드의 활용과 관련한 간단한 설명을 정리한 information.txt 포함

3. 기존에 올렸던 new_slide.zip은 삭제함

 

### 2019-04-12: 메인 화면의 최신글 추출 시 제목의 글자 수 제한 자동 조절 기능 추가

1. hoover_and_latest.zip을 내려받아 테마 폴더 > skin > latest > basic에 있는 latest.skin.php를 대체하세요.

2. 테마 폴더 index.php의 최신글 1 추출 코드의 맨 마지막 숫자(제목의 글자 수 제한)는 0으로 설정하세요.

예: echo latest('theme/basic', 'basic', 6, 0);

2. 최신글 추출 스킨 중에서 basic 스킨만 수정했습니다.

3. 첨부 파일 수 제한으로 기존에 올렸던 hover_head.zip은 삭제를 하고, hover_head.php와 latest.skin.php를 한 폴더에 담아 hoover_and_latest.zip으로 다시 올렸습니다.

 

### 2019-04-08: PC 모니터에서 화면 폭을 줄였을 때 나타나는 Hamburger Menu를 기존의 클릭 방식에서 Hover 방식으로 변경한 head.php 제작
1. 내려받은 hover_head.php 파일의 파일명을 head.php로 바꾼 후 기존의 head.php와 대체하면 됨
2. 모바일에서는 Hover 방식을 사용할 수 없으므로, 이 방식은 PC 모니터에서만 동작함

 

### 2019-04-06: 화면 폭이 줄어들면, 슬라이드의 이미지의 높이가 줄어들도록 수정
1. 파일을 내려받아 기존의 파일을 대체하면 됨

2. 파일 설치와 슬라이드의 활용과 관련한 간단한 설명을 정리한 information.txt 포함


### 2019-03-24: v1.0_e9 추가 ###

1. Bootstrap 4가 정식으로는 지원하지 않는 ie8, ie9 지원 코드 추가(사용 환경 미비로 실제 동작 상태를 직접 확인하지는 못했음)

2. ie8, ie9이 아닌 경우에는 v1.0을 권장

 

### 2019-02-08: v1.0으로 변경 ###

1. aside에 Notice, 그누보드 로그인, 쪽지, 포인트, 스크랩 추가

 

### 2019-02-04: 갤러리 최신글의 No image 파일 변경 ###

1. 메인 화면의 갤러리 최신글에서 이미지가 없을 때 보여주는 No image 파일을 그누보드 기본 이미지 파일(no_img.png)에서 다른 파일(no_image.png)로 변경

 

### 2019-01-31: v0.9로 변경 ###

1. 메인 화면의 슬라이드 확대 시 이미지가 함께 확대되는 문제 수정
2. 슬라이드의 이미지 전환 주기 설정 옵션을 추가(head.sub.php의 117라인의 data-interval)
3. aside에 설문조사와 접속자 집계 추가
4. Page형 콘텐트에 aside 추가

 

### 2018-12-22: v0.8.1로 변경 ###
1. 갤러리: 리스트 목록을 원본 이미지에서 썸네일 이미지로 변경

2. 리스트, 갤러리, 웹진: 파일 첨부 시 첨부한 파일명이 표시되지 않는 문제 수정

 

그누보드 5.3과 부트스트랩 4를 결합하여 제작한 그누 반응형 테마이며, 사이드 메뉴가 있는 버전입니다.

1. 버전 정보
· 그누보드 v5.3.1.9 / Bootstrap 4

2. 사용법
· 첨부 파일을 내려받은 후 압축을 풀고, theme 폴더에 설치
· 환경설정 > 테마설정: BS4-Aside v1.0으로 설정
· 환경설정 > 기본 환경설정: 최근게시물 스킨, 검색 스킨, 접속자 스킨, FAQ 스킨, 회원 스킨을 (테마) basic으로 설정
· 게시판 관리 > 게시판 관리: 각 게시판의 스킨을 용도에 따라 bs4_basic,_aside bs4_gallery_aside, bs4_webzine_aside 등으로 설정
· 게시판 관리 > 1:1문의 설정: 스킨 디렉토리를 (테마) basic으로 설정

· 내용관리: 각 내용별로 스킨 디렉토리를 (테마) basic으로 설정

 

# 메인 화면만은 사이드 메뉴가 없는 전체 화면으로 이용하고자 하신다면, 지금의 index.php 대신 포함되어 있는 index_side_none.php를 index.php로 파일명을 변경하여 사용하시면 됩니다.

 

3. 모바일 관련 설정

· config.php 수정:

라인 125의 define('G5_USE_MOBILE', true);를 define('G5_USE_MOBILE', false);로 수정

즉, 모바일 모드를 사용 안 함으로 설정함.

 

4. 사용 범위
· 사용에 제한 없음

 

5. 당부의 말씀

작업 시간 등의 부족으로 인해 아직 완성도가 떨어집니다.

아직 미비한 점이 많아 버전을 베타 v0.8로 정했습니다.

현재 버전은 v1.0입니다.

여러분께서 수정 및 보완 작업을 거쳐 좀 더 완성도를 높여 이 테마 게시판에 추가로 공개를 해주셔도 좋을 듯합니다.

모두의 힘으로 언젠가 정식 버전 v1.0으로 거듭나게 되길 바랍니다. ^^

 

# 참고로 위의 링크 사이트에서는 글쓰기가 제한되어 있으니 참고용으로만 활용해 주시기 바랍니다.

 

감사합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 73개

좋은테마 잘 사용합니다.. 감사합니다.

아울러 다음 버전에는 서브페이지 상단에도 반응형 타이틀 이미지가 들어가면 좋을것 같아요..^^

별다른 노력없이 잘 사용하면서 사설이 길었네요...
아무쪼록 다음 버전도 기대합니다...
잘 사용하고 계시다니 다행이네요. ^^
요즘 정신 없이 지내느라 버전 업을 전혀 생각하지 못하고 있는데, 버전 업을 하게 되면 말씀하신 내용을 반영하도록 하겠습니다.

감사합니다. ^^
익스플로러9가 지원이 안되는게 아쉽군요. 부트스트랩 버전 차이가 있어서 그런거겠죠~ 다른 반응형은 9도 잘되거든요.
네~ 아쉽게도 Bootstrap 4는 익스플로러 10 이상에서 사용이 가능합니다.

혹시하는 마음에 Bootstrap 4를 익스플로러 9, 익스플로러 8에서도 동작하게 하는 별도의 코드를 추가해 보기는 했는데, 저의 사용 환경 상 실제의 동작 여부는 확인하지 못했습니다.
전혀 도움이 되지 않을 지도 모르겠지만, ie9 버전을 추가해 놓았으니 파일을 내려받아 한 번 확인을 해보시면 어떨까 합니다.

큰 기대는 하지 않지만, 그 결과가 어떨지 저도 궁금하네요. ^^
네 감사합니다 부트스트랩 3.32버젼 받아서 적용하니깐 슬라이더 정도만 깨지더군요, 위에꺼 다운받아서 한번 해보겠습니다...... https://nemo1101.blog.me/221399587252 여기에서 IETester 받으면 익스플로러 9-8도 확인 가능합니다 , 노트북에 일부러 익스플로러9 사용하는데 거의 비슷하게 테스트 됩니다.
해본결과 대메뉴 정상이고요 하위메뉴들이 맨 우측에서 나오는군요
아래 카드제목 1이 위로 혼자 위로 올라가는군요. 123 나란히 정렬이 안되고요,
많이 바꼈군요.수고했습니다.
저는 macOS를 사용해서 오래 된 웹 브라우저의 각 버전별로 화면을 이미지로 보여주는 툴을 사용해서 확인을 해보기는 했었습니다.
말씀하신 위의 툴을 내려받아 가상 머신에서 돌려보았는데, 접속 주소를 입력하고 Enter 키를 누르면 주소창이 텅 빈 상태가 되면서 접속이 되지 않네요.

어쨌든, Bootstrap 4를 IE8, IE9에서 어느 정도 정상적으로 동작하게 만들기에는 너무 어려운 점이 많아 보입니다.
ie8, ie9용 자바스크립트 파일을 추가해 보았는데, 별 도움이 되지 않은 것 같아 아쉬움이 크네요. 에고~ ^^

이렇듯 직접 실행해 보신 결과를 상세하게 알려주셔서 감사합니다. ^^
6년 전
궁금한 것이 있습니다!
하는데 어떤 명령어를 입력해야 할까요 ㅠㅠ
아래 홈페이지를 작업중인데 연혁과 달력을 반응형으로 적용했는데 사이드 메뉴가 보였으면 하는데 어떻게 해야할까요?!
http://xn--hc0br5i0pg05hb3aj2pgzf.com/g5/

제가 시도한 방법은
각 스킨의 veiw.skin.php에 들어가서
첫줄에
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once(G5_THEME_PATH.'/aside.php');

명령어를 실행했는데 정말 깔끔하게 아무일도 안일어납니다... 8ㅂ8



추가적으로 메인화면의 슬라이드 사진이 윈도우 화면에 따라서 같은 사이즈로 되었으면 하는데 어떻게 해야할까요... ㅠㅠ
mx-auto라는 명령어를 사용해봤는데 전혀 안되더군요...

참고로 저는 php공부를 하나도 안한상태로 그때 그때 필요한 지식만 찾아서 진행중입니다...
말씀하신 슬라이드 이미지의 높이 조절은 원하시는 동작을 반영하여 제가 새로 올려 놓은 new_slide.zip을 내려받아 사용하시면 될 것으로 생각합니다.

그리고 사이드 메뉴의 경우에는 안타깝게도 간단하게 몇 줄의 코드로 해결할 수 있는 구조로 되어 있지 않다는 점을 먼저 말씀드립니다.
사이트에 접속해서 확인해 보니 게시판에 적용을 하신 상태인데, 변경 방법을 간략하게 알려드리오니 작업에 참조하시면 좋을 듯합니다.
아무래도 지금 사용하신 게시판 소스와 사이드 메뉴 구조로 작성된 이 테마의 게시판 소스를 조합하면서 새롭게 작성하는 과정을 거치셔야 할 듯하네요.

- 테마 > skin > board 폴더에 있는 bs4_basic_aside 등을 복사한 후에 복사한 폴더명을 원하는 폴더명으로 변경
- 복사한 테마의 게시판 소스 수정(필요에 따라 list.skin.php, view.skin.php 등의 본문 부분을 적용하고자 하는 게시판의 내용으로 교체)
- 관리자 메뉴의 게시판 관리에서 해당 게시판의 스킨을 복사한 (테마) 게시판으로 설정
- 화면으로 게시판의 상태를 확인해 가며 수정 작업

PHP 공부를 하지 않은 상태에서 그 정도로 꾸며 놓으셨으니 조금만 고생(?)을 하시면, 원하시는 사이드 메뉴 결합에 성공하실 것으로 믿으며, 대단하시다는 말씀도 전하고 싶습니다. ^^
6년 전
아이고 감사합니다 ㅠㅠ
테마 > skin > board 폴더에 원하는 스킨 폴더를 넣은 후 list.skin.php, view.skin.php에 맨위에 include_once(G5_THEME_PATH.'/aside.php'); 명령어 추가해주니까 작동하네요 ㅠㅠ

연이어 질문을 드리자면 게시판 스킨이 테마의 영향을 받고 있는데 basic테마의 영향을 받으려면 어떻게 해야 할까요...?
예를 들면 버튼입니다.... 달력을 출력하는 게시판이 현재 테마에 영향을 받고 있어서 버튼 모양이나 선이 바뀌고 있습니다 ㅠㅠ
제가 이해도가 낮아서 제대로 질문을 하는건지 모르겠네요 ㅠㅠ
우문현답 부탁드립니다... ㅠㅠ

그리고 최신글로 되어있는 곳에 문제점을 수정하고 싶은데 어디를 건드려야 할지 몰라서 넌지시 여쭤보기만 합니당... 말씀해주시면 제가 도전해보곤 싶은데
index.php에서 최신글을 출력할 때
글자수가 길면 날짜를 침범하는 현상이 있습니다! 그래서 홈페이지 [관리자 설정>게시판관리]로 들어가 제목 글자 수를 줄여주니 해결은 됐지만 반응형이다보니 화면이 줄어들었을 때 여백의 미가 상당해지더군요...
[http://sir.kr/data/editor/1904/465ebca88393f5ac6f1cf05ece970374_1554983347_759.png]

게시글 목록

번호 제목
4373
4361
4355
4326
4302
4260
4247
4203
4197
4144
4143
4089