그누 반응형(부트스트랩 4) BS4 v3.0(전체 검색 추가: 190617) > 그누보드5 테마

그누보드5 테마

테마 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

그누 반응형(부트스트랩 4) BS4 v3.0(전체 검색 추가: 190617) 정보

그누 반응형(부트스트랩 4) BS4 v3.0(전체 검색 추가: 190617)

첨부파일

첨부파일 bs4_v3.0_set.zip (18.9M) 508회 다운로드 2019-05-20 17:30:08
첨부파일 Page Sample.zip (3.8K) 26회 다운로드 2019-05-20 17:30:08
첨부파일 head_search.zip (9.2K) 9회 다운로드 2019-06-17 17:18:42

본문

테마의 설치, 설정 및 본 테마의 운용과 관련한 내용을 자세하게 정리한 매뉴얼(텍스트 파일과 PDF 파일)이 포함되어 있으니 이를 참조하여 테마의 설정을 진행하시고, 운용 시 소스 수정 등에 참고하시기 바랍니다.
 
그리고 이 테마를 사용하여 웹 사이트를 구축하신 분들은 이곳 그누보드5의 사용후기 게시판에 사용 후기를 올려주시면 고맙겠습니다. 이 테마가 어디에서, 어떻게 활용되고 있는지 매우 궁금하답니다. ^^
 

### 2019-06-17: v3.0 헤드(상단 메뉴)에 전체 검색 임시 추가

1. head에 게시판 전체 검색 기능 임시 추가

2. head에서 전체 게시판 검색을 사용하길 원하는 경우에는 다음과 같이 기존의 파일을 대체하여 사용하시기 바랍니다.

   1) head_search.zip 내려받음

   2) head.php를 내려받은 head.php로 대체

   3) 테마 폴더 > skin > search > basic > search.skin.php를 내려받은 search.skin.php로 대체

 

참고: 전체 검색과 관련한 질문이 올라와서 이에 대한 답글을 올리면서 급하게 작성하였기에 디자인적인 면에서 미비한 점이 있음을 양해하여 주시면 고맙겠습니다. ^^

 

### 2019-05-20: v3.0 오류 수정

1. Page Sample에 포함한 세 개의 php 파일에서 이미지의 경로가 잘못되어 있어 이를 수정

2. 위의 Page Sample.zip을 내려받거나, 해당 php 소스의 img 경로를 bs4_v3.0으로 직접 수정하셔도 됩니다.


### 2019-05-19: v3.0
1. 스크립트 누락으로 aside에 서브 메뉴가 표시되지 않는 오류 수정

2. 최신글 스킨인 webzine_owl에서 글 제목 대신 보드 id를 표시한 오류 수정(링크도 수정)

3. 로그인 상태에서 캘린더 게시판의 글쓰기로 들어가면 푸터의 폭이 줄어드는 오류 수정

4. aside에 탭방식의 최신글, 최신댓글 추가

5. aside에 bxslider 방식의 최신글 추가

6. 푸터의 새소식 섹션에 최신글 방식을 적용(기존의 내용을 직접 지정하는 방식도 그대로 사용 가능)

7. 탭 방식의 최신글 스킨: 액티브 탭에 배경색을 추가하고, 기존의 2개의 탭에서 3개의 탭을 보여주도록 변경(소스에는 네 번째 탭의 코드도 포함되어 있음)

8. 캘린더 게시판: 년/월 셀렉트 박스의 인터페이스 개선 및 input 박스 레이아웃 변경, 카테고리 사용 시 달력과 오늘/내일의 일정 란에 표시되는 제목에 카테고리도 함께 표시되도록 개선, 768px 이상에서는 강제 줄바꿈 적용

9. 모든 게시판: 제목의 sort 필드를 제목 링크 표시 방식에서 아이콘 링크 방식으로 개선, 카테고리 사용 시 입력 모드에서 표시되는 셀렉트 박스의 인터페이스 개선

10. 그누보드 메뉴에 속한 페이지 중에서 레이아웃이 와이드로 퍼지거나 상단의 패럴렉스 이미지에 타이틀이 가려지는 문제 등을 수정

11. 그 외의 syntax 오류 등을 수정


* 첨부 파일 구성: bs4_v3.0, index 모음(4개), 페이지 샘플 모음(3개), 매뉴얼(txt, PDF)

추천41

댓글 전체

마음에 드신다 하시니 정말 다행이네요.
일정관리 스킨이 유독 디자인적인 면에서 신경이 쓰여 내내 고심했거든요.
감사합니다. ^^
^^ 데모페이지에서 페이지형 콘텐츠 1 ~ 3 페이지 이미지가 깨지네요 ^^

../theme/bs4_v2.5/img/page/xxx.jpg  >> ../theme/bs4_v3.0/img/page/xxx.jpg 로 수정해주시면 되겠네요 ^^

정말 고생하셨습니다. ^^
피앙세님 꾸준히 좋은 테마 공개해주셔서 감사합니다
http://www.n001.com
bs4_v2.8 버전으로 홈페이지를 만들고 있습니다.

메인페이지 롤링이미지를 밑으로 조금 이동하고 싶은데 어느 파일을 확인해야 할지 알려주시면 감사하겠습니다.

이렇게저렇게 파일 수정해보고 있는데, 안되는군요
상단 메뉴의 높이가 늘어나 메인 페이지는 물론 서브 페이지의 상단도 영향을 받고 있기에 다음과 같이 메인 페이지와 서브 페이지에 대해 모두 수정을 해주셔야 합니다.
 
1. 메인 페이지
테마 > asset > css > carousel.css의 라인 14에 상단 마진을 추가하세요.

수정 전:
.carousel {
    margin-bottom: 0.1rem;
}

수정 후:
.carousel {
    margin-bottom: 0.1rem;
    margin-top: 2.4rem;
}

2. 서브 페이지
테마 > css > default.css의 라인 192에 상단 마진을 추가하세요.

수정 전:
/* Sub Parallax Element Style*/
.paral-sub {
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}

수정 후:
/* Sub Parallax Element Style*/
.paral-sub {
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
margin-top: 2.4rem;
}

어렵지 않게 잘 수정되길 바랍니다. ^^
홈페이지 폰트라는 게 정확히 무얼 말씀하시는 건지요?
혹시 웹 폰트를 말씀하시는 것인가요?
만약 웹폰트가 맞다면, 가장 인지도가 높은 구글 폰트 사이트를 방문하시면 도움이 될 것으로 생각합니다.

https://fonts.google.com/

웹 폰트가 아닌 다른 의미의 폰트를 말씀하시는 것이라면, 그 의미를 다시 한 번 설명해 주시면 고맙겠습니다. ^^
지금 이 테마에서 사용하는 폰트 설정은 다음과 같습니다.

font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif !important;

웹 사이트에 접속하는 사용자의 컴퓨터에 애플 산돌 고딕 네오가 설치되어 있으면 우선 애플 산돌 고딕 네오로 표현되고, 해당 서체가 사용자의 컴퓨터에 없다면, 그 다음 순위인 맑은 고딕을 적용하도록 되어 있습니다.
만약 맑은 고딕이 없다면, 그 다음 순위인 sans-serif로 보여지게 되겠죠,

애플 산돌 고딕 네오는 매킨토시의 macOS에서 제공하는 기본 서체이고, 맑은 고딕은 Windos OS에서 제공하는 기본 서체입니다.

매킨토시를 사용하는 저의 경우에는 컴퓨터에 애플 산돌 고딕 네오 서체가 있으니까 당연히 애플 산돌 고딕 네오로 표현이 되고, Windows OS를 사용하는 사용자의 경우에는 컴퓨터에 애플 산돌 고딕 네오는 없고, 대신 맑은 고딕이 있으므로 맑은 고딕으로 표현이 되는 것입니다.

폰트 적용을 하지 않은 게 아니라, 폰트 설정은 명확하게 해놓은 상태이며, 단지 산다라신 님께서는 macOS가 아닌 Windows OS를 사용하실 것이기에 맑은 고딕 서체가 적용되는 게 당연한 결과입니다.
즉, 화면에 보여지는 서체는 웹 폰트를 사용하지 않는 한, 사용자의 컴퓨터 환경(사용자의 컴퓨터에 설치한 서체)에 따를 수밖에 없답니다. ^^

참고로, 애플 산돌 고딕 네오는 컴퓨터에서만 사용할 수 있고, 웹 폰트로는 제공되지 않기에 웹에서는 사용할 방법이 없습니다.
매킨토시를 사용해야만 웹 사이트 접속 시 사용할 수 있는 서체라는 점을 말씀드립니다. ^^
<!-- Start of Middle Parallax Section -->
<?php
$paral_pic = "paral_modern_2.jpg";
?>

<div class="parallax-modern-2 paral-mordern-2" data-parallax="scroll" data-image-src="<?php echo G5_THEME_URL ?>/img/paral/<?php echo $paral_pic ?>">
</div>
<!-- End of Middle Parallax Section -->

2.5 테마 사용중입니다. modern_2.jpg 이미지 넣을라고 위에처럼 추가했더니 안됩니다 어떤식으로 추가 해야하나요?
버전 2.5에서는 parallax-modern-2를 사용하지 않았고, 버전 2.8부터 parallax-modern-2를 사용하게 되었습니다.
따라서 버전 2.5에서는 parallax-modern-2에 대한 설정이 아예 없기에 이를 사용하기 위해서는 관련 코드를 추가해 주셔야만 동작하게 됩니다.

테마 > css > default.css 파일을 여신 후에 /* End of Parallax */라는 부분을 찾으셔서 그 위에 아래의 코드를 추가해 주세요.

.paral-modern-2 {
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}
.parallax-modern-2 {
    min-height: 150px;
    background: transparent;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* End of Parallax */

위와 같이 /* End of Parallax */ 윗 부분에 추가하시면 됩니다.

그리고 index.php 맨 아래에 다음과 같은 코드가 있을 텐데, 이를 삭제해 주세요.
굳이 집어 넣지 않아도 될 코드를 제가 집어 넣었기에 버전 2.8부터는 삭제한 상태입니다.

<script>
$('.parallax-window-main').parallax({imageSrc: '<?php echo G5_THEME_URL ?>/img/paral/<?php echo $paral_pic ?>'});
</script>

물론 패럴렉스로 배경 이미지로 추가하고자 하는 이미지 파일은 테마 > image > paral 폴더에 추가하셔야 합니다.
이 경우에는, paral_modern_2.jpg를 추가하시면 됩니다.

그리 어렵지 않게 성공하실 것으로 믿습니다. ^^
그리고 가능하다면, 버전 3.0을 사용하시는 게 어떨까 하는 생각입니다.
기능 추가는 물론 몇몇 잠재적 오류들도 개선한 버전이기 때문입니다.

그럼, 홈페이지 예쁘게 꾸미시기 바랍니다. ^^;;
답변 정말 감사합니다. 잘 따라해서 적용까진 했는데, 저는 이미지가 좌우가 꽉차게 출력이 됩니다. 샘플 페이지처럼 가운데로 정렬을 하고싶은데 어떻게 하는지 모르겠습니다.

+ 방금 추가한 이미지 마우스 위 아래로 스크롤하면 이미지가 움직이는데 안움직이게 하는 방법도 궁금합니다.
이것저것 확인해 보았는데, 패럴렉스 배경이미지의 크기 조절은 의도한 대로 제어하기가 힘드네요.
aside의 사용 여부와 패럴렉스 이미지를 두 개 이상 사용하는가 등에 따라 배경 이미지의 폭이 달라지는 현상이 있습니다.
이는 사용자가 어떤 레이아웃에서 몇 개의 패럴렉스를 사용하느냐에 따라 배경 이미지의 폭이 서로 다르게 나타나는 문제가 있어 여러 방면으로 테스를 해보았지만, 한 가지 해결책을 제시하기엔 어려움이 있다는 점을 알려드립니다.

일단 이 문제는 이미지를 다 보여주지 않고 일부만을 보여주길 원하시는 경우이므로 패럴렉스의 배경 이미지로 사용하는 이미지를 편집해서 화면에서 보여주고 싶은 폭만큼 이미지를 잘라서 사용하시는 게 가장 좋은 방법일 듯합니다.
즉, 폭이 1,920 픽셀인데, 그 중에서 800 픽셀의 폭만큼만 보여주고 싶다면, 높이는 그대로 유지하고 폭에 대해서는 그 800 픽셀의 폭만을 남기고 보여지길 원하지 않는 나머지 폭 부분은 잘라낸 이미지를 사용하시면 되지 않을까 합니다.

그리고 패럴렉스 배경 이미지가 스크롤 시 조금씩 이동하는 기능을 비활성하고 싶으시다면, 다음의 코드를 사용하면 이동 없이 고정시킬 수 있습니다.

수정 전:
<div class="parallax-modern-2 paral-mordern-2" data-parallax="scroll" data-image-src="<?php echo G5_THEME_URL ?>/img/paral/<?php echo $paral_pic ?>">
</div>

수정 후:
<div class="parallax-modern-2 paral-mordern-2" data-speed="0" data-parallax="scroll" data-image-src="<?php echo G5_THEME_URL ?>/img/paral/<?php echo $paral_pic ?>">
</div>

즉, 코드 중간에 data-speed="0"를 추가해 주시면 됩니다.
안녕하세요 ^^
죄송하지만 혹시 최신글에서 pic_owl 또는 webzine_owl를 여러번 출력하고 싶은데
예를 들어 index.php페이지에서
최신글을

<div id="clothing-nav-content" class="tab-content">
<!-- Start of Latest: Owl Carousel(Gallery) -->
<?php // 사용방법 : latest(스킨, 게시판 아이디, 출력 라인, 글자 수);
echo latest('theme/pic_owl', 'gallery_01', 6, 0);
?>
<!-- End of Latest: Owl Carousel(Gallery) -->
</div>
<div id="clothing-nav-content" class="tab-content">
<!-- Start of Latest: Owl Carousel(Gallery) -->
<?php // 사용방법 : latest(스킨, 게시판 아이디, 출력 라인, 글자 수);
echo latest('theme/pic_owl', 'gallery_02', 6, 0);
?>
<!-- End of Latest: Owl Carousel(Gallery) -->
</div>
<div id="clothing-nav-content" class="tab-content">
<!-- Start of Latest: Owl Carousel(Gallery) -->
<?php // 사용방법 : latest(스킨, 게시판 아이디, 출력 라인, 글자 수);
echo latest('theme/pic_owl', 'gallery_03', 6, 0);
?>
<!-- End of Latest: Owl Carousel(Gallery) -->
</div>

위와 같이 3번을 사용 하게 될 경우 첫번째 것만 나오고 그 뒤는 안나오는데

이부분을 사용 하려면 어떻게 수정을 해야 하지 궁금합니다.

죄송하지만 답변 부탁드립니다.

초보가 욕심만 많아 자꾸 피앙세님을 귀찮게 하네요 ^^;;
올려주신 코드 내에 탭 최신글 코드가 부분, 부분 섞여 있기에 탭 최신글에 pic_owl 최신글이나 webzine_owl 최신글을 포함시켜서 생기는 문제로 이해하고, 그에 대한 답글을 올렸다가, 다시 글을 읽어보니 원하시는 내용이 아니었네요.
그래서 다시 새로운 답글을 추가했습니다.

일단, 제가 처음에 올렸던 답글의 내용은 다음과 같습니다.

### 처음 답글 ###
올려주신 코드를 보면 탭 최신글에 pic_owl 최신글과 webzine_owl 최신글을 이용하시는 것 같은데, 현재 탭 최신글은 일반 게시판(베이직, 갤러리, 상담, 일정 등)만 사용하도록 코딩되어 있습니다.
탭 최신글, pic_owl 최신글, webzine_owl 최신글은 각각이 최신글 기능이며, 각각의 최신글 기능에 또 다른 최신글 기능을 포함시키는 게 아니라, 각각의 최신글에는 일반 게시판만을 포함시켜야 합니다.

탭 최신글에 pic_owl 최신글과 webzine_owl 최신글 등의 여타 최신글을 포함할 경우에는 최신글을 뽑아오기는 하지만, 탭 제목이 표시되어야 할 부분이 빈 여백으로 나오고, 그 하단에 게시판의 제목이 나타나기 때문에 탭 최신글에 다른 최신글 기능을 포함하는 방식은 현재의 코딩 구성 상 적절한 방법이 아닙니다.
지금의 구성에서도 구현되기는 하지만, 별도의 작업을 통해 여러 군데를 수정하지 않는 한, 좀 흉칙한 모양새가 되네요.
그렇다고 지금 말씀하시는 것처럼 맨 처음의 게시판만 나온다거나 하지는 않습니다.
나오기는 다 나오는데, 레이아웃이 좀 이상해질 뿐입니다.

pic_owl 또는 webzine_owl를 여러 개 사용하고자 하신다면, 탭 최신글 기능에 포함시키지 마시고, 그냥  pic_owl 최신글 코드와 webzine_owl 최신글 코드를 원하시는 만큼 독립적으로 추가해서 사용하시기 바랍니다.

올려 놓으신 코드가 완전한 것이 아닌 듯이 여겨지는데, 올려 놓으신 코드만을 보고서 판단한 것이라 제가 질문의 의도를 잘못 판단한 것일 수도 있을 듯합니다.

저의 답글을 보시고, 궁금하거나, 좀 더 설명해 주시고자 하는 것이 있으시면, 지금 하시고자 하는 내용에 대한 부연 설명을 부탁드리며, 상세한 코드나 아니면 해당 주소를 알려주시면 판단하기에 도움이 될 것으로 생각합니다. ^^

### 새로운 답글 ###
일단, 탭 최신글에 pic_owl 최신글이나 webzine_owl 최신글을 포함하는 건 지양하시는 게 좋을 듯합니다.

그럼, 지금 나타나는 증상에 대한 해결책을 말씀드리겠습니다.
아래와 같이 세 군데를 수정해 주세요.

1. 테마 > skin > latest > pic_owl > latest.skin.php의 라인 15

수정 전:
<div id="owl-pic" class="owl-carousel owl-theme">

수정 후
<div class="owl-pic owl-carousel owl-theme">


2. 테마 > skin > latest > webzine_owl > latest.skin.php의 라인 18

수정 전:
<div id="owl-news" class="owl-carousel-webzine owl-carousel owl-theme latest-news">

수정 후:
<div class="owl-news owl-carousel-webzine owl-carousel owl-theme latest-news">

3. index.php의 하단에 있는 java script 두 군데

1) Owl Carousel Trigger(Latest Gallery)

수정 전:
$('#owl-pic').owlCarousel({

수정 후:
$('.owl-pic').owlCarousel({

2) Owl Carousel Trigger(Latest Webzine)

수정 전:
$('#owl-news').owlCarousel({

수정 후:
$('.owl-news').owlCarousel({


한 마디로 정리하면, 현재 id( # )로 지정한 곳을 class( . )로 변경하는 것입니다.
id는 한 프로세스 내에서 오직 한 곳에서만 사용하는 유일성을 가지고 있는 태그이고, class는 중복 사용이 가능한 태그입니다.
제가 중복 사용은 염두에 두지 않았기에 id를 사용했으며, id라는 태그의 속성 상 중복해서 사용하는 경우에 오직 한 곳에서만 동작이 되는 현상이 있었다는 점을 말씀드립니다.

그럼, 원하시는 답글이 되었길 바랍니다. ^^

아! 그리고 올려 놓으신 코드 중에서
<div id="clothing-nav-content" class="tab-content">와 이를 닫아주는 </div>
태그 없이 그냥
<?php echo latest('theme/pic_owl', 'gallery_01', 6, 0); ?>
태그만으로 사용하시는 게 어떨까 합니다.
^^ 제가 독학으로 홈페이지를 공부하다 보니 id와 class의 차이를 몰랐네요

이렇게 친절한 답변 정말 감동 받았습니다.

감사합니다.  정말 많은 도움 되었습니다.

지금 제작 하고 있는 홈페이지는 조만간에 완성해서 올리겠습니다. ^^

지인이 회사 홈페이지를 만들어 달라고 해서 제작중에 있거든요 ^^
정말좋네요^^
혹시 버튼 css는 어느파일인지요? 부탁드립니다.
buttons.scss파일이라고 뜨는데 타사이트 css링크인가요?^^
buttons.scss와 navscss 경로좀 부탁드립니다.
좋게 보아주셔서 감사합니다. ^^

이 테마는 부트스트랩을 사용 중인데, 부트스트랩의 css와 js를 내려받아 서버에 설치하지 않고, CDN 형식으로 부트스트랩 서버에 접속해서 받아오게 되어 있습니다.
따라서 지금 말씀하시는 scss는 부트스트랩에서 제공하는 것을 링크를 통해 받아와서 사용하는 형식으로 되어 있습니다.
그런 이유로 scss의 직접 수정은 안 되고, 수정하고자 하는 부분에 지정된 scss의 내용을 새로 작성해서 default.css 등에 추가함으로써 설정값을 변경하는 방식으로 사용하셔야 합니다.

default.css에 보시면, 현재 사용 중인 메뉴 바의 설정 내용이 있으며, 제작 의도에 맞춰 새로운 설정 값을 지정함으로써 부트스트랩에서 제공하는 기본 값을 변경하여 사용하고 있습니다.

참고로, scss들의 링크 주소는 다음과 같습니다.

https://stackpath.bootstrapcdn.com/bootstrap/scss/mixins/_hover.scss
https://stackpath.bootstrapcdn.com/bootstrap/scss/_navbar.scss
https://stackpath.bootstrapcdn.com/bootstrap/scss/_button.scss

그럼, 도움이 되는 내용이길 바랍니다. ^^
앗! 어찌 그런 생각을 하시나요? ^^
파일을 내려받으신 분들이 잘 활용하신다면 정말 좋겠다는 생각을 하고 있습니다.
그누보드는 물론 여러 분들이 좋은 자료, 답변들을 올려주셔서 저 또한 많은 도움을 받았기에 저도 무언가 해야겠다는 생각이 들었답니다.
아직 부족한 부분이 있지만, 사용에 어려움이 없길 바랍니다. ^^;;
안녕하세요 질문이 있어 이렇게 또 댓글을 답니다. ^^;;

죄송하지만 bs4_counsel 스킨에서

비회원이  글쓰기를 하기위해서

관리자에서 게시판 관리에서 권한은 모두 1로 주었고 글읽기는 2, 답변은 10을 주었습니다.

그런데 비회원 접속시 "글쓰기"버튼이 활성화 안됩니다.

이 부분은 어디를  수정해야 하나요?

제가 초보라 개발자님을 많이 괴롭혀서 죄송합니다. ^^;; 꾸벅
지금 확인해 보았는데, 아무 이상 없이 잘 등록됩니다.
제가 2,5 버전으로 상담 게시판을 추가하고선, 곧 바로 비회원 글 등록이 되지 않는 증상을 발견해서 바로 수정해서 다시 올린 적이 있습니다.
만약 지금 사용 중인 버전이 2.5 버전 또는 그 이하 버전이라면, 상위 버전을 내려받아 상담 게시판을 교체한 후에 다시 확인해 보시기 바랍니다.

저는 게시판 설정에서 모든 권한은 그냥 1로 두고, 비밀글 사용 항목에서 '무조건'으로 설정한 상태였으나, 글이 등록되지 않는다는 글을 올리셨기에 일단 저의 환경 그 상태로 등록을 해보았고, 아무 이상 없이 등록되기에 하늘나누기 님께서 사용 중인 설정을 그대로 적용(비밀글은 사용 안 함)해 놓고 점검을 해보아도 글 등록에는 이상이 없었다는 점을 알려드립니다.

참고로, 글 읽기를 2로 설정해 놓은 경우에는 글을 등록하자마자 글을 읽을 권한이 없다는 경고 메시지가 뜨긴 하는데, 확인해 보면 글은 정상적으로 등록이 된 상태입니다.
글쓰기 권한이 1로 되어 있으면 비회원 글 등록에는 아무 문제가 없다는 점을 알려드립니다.
네 자세한 답변 감사합니다. 저는 지금 2.8번으로 사용하고 스킨은 모두 3.0에서 가져와서 사용하고 있습니다...

일단 이유를 다시 확인해보겠습니다..

바쁜신와중에 이렇게 답변을 달아주셔서 감사합니다.

행복한 주말 되세요 ^^
잠깐 바쁜 삶을 사는 동안 버전이 엄청 올라갔네요...
버전을 적용해서 다시 수정할 엄두가 안나서 그냥 바라만 보고 있어야겠네요!
항상 수고하십니다!

저는 상담소 홈페이지를 마침내 제작 완성해서 운용중에 있구요~
이제 홍보와 사람들의 많은 관심만 있으면 될 듯합니다 감사합니다~ㅎㅎㅎㅎㅎ
나중에 열심이 생겨 다시 적용하게 되면 많은 댓글 남기겠습니다~!

http://xn--hc0br5i0pg05hb3aj2pgzf.com/
처음부터 더 깔끔하게 작업해서 올려야 했는데, 그러질 못했습니다.
새로운 버전은 기능 추가는 물론 이전 버전에 있던 버그들도 수정한 내용이 있으니 기회가 되면 버전을 올려 적용하시는 게 좋을 듯합니다.

기존의 홈페이지에 적용하여 운용하고 계시는데, 부디 아무 문제 없이 잘 활용되면 좋겠습니다.
사람들의 많은 관심과 애정을 받는 사이트가 되길 바랍니다.
감사합니다. ^^
나름 신경 써서 매뉴얼도 만들었는데, 도움이 되는 듯하여 다행이네요. ^^
아무쪼록 사용에 불편함이 없으면 좋겠습니다.
감사합니다. ^^
특정 그룹만 최신글애 나오게 하려면, 간단한 설정만으로는 안 되고, 그룹 최신글 관련 소스를 새로 작성하여 추가한 후 해당 소스를 사용하여야 합니다.
이곳의 팁자료실 게시판이나, 질문답변 게시판에서 검색을 하셔서 해당 소스를 찾은 후에 추가해서 사용하는 방법을 이용하셔야 할 것입니다.
공교롭게도 문의하신 내용이 테마의 소스를 이곳저곳 수정하여 새로 작성해야 하는 내용이어서 도움을 드리지 못함을 양해하여 주시면 고맙겠습니다. ^^
감사히 잘 쓰고 있습니다

페이지형 콘텐츠에서는 풀스크린으로 나오는데
게시판 스킨들처럼 폭이좁고 사이드 메뉴도 나오게 하려면 어떻게 해야되나요 ?
관리자로 로그인하시면, 그누보드 메뉴에 '테마 설정'이라는 메뉴가 나옵니다.
이 테마 설정에서 '게시판, 페이지 사이드 설정' 항목의 옵션을 선택하여 원하는 레이아웃을 적용하시면 됩니다. ^^
1.메인사이드설정  - 있음
2, 게시판,페이지사이드 설정 - 있음
3. 사이드위치 - 왼쪽
4. 메인화면 상단설정 - 슬라이드

이렇게 설정되어있는데 안나오네요
http://www.dg.or.kr/g5/bbs/content.php?co_id=garden
로그인하신 후에 관리자 > 게시판관리 > 내용관리로 들어가세요.
그런 후에 스킨 디렉토리 항목을 테마 (basic)으로 설정하고, 확인 버튼을 클릭하여 저장하세요.
그리고 다시 접속해 보면 aside가 정상적으로 나타날 것입니다.

즉, 내용 관리에서는 항상 스킨 디렉토리 항목을 테마 (basic)으로 설정해야 함을 유념하셔야 합니다. ^^

홈페이지 제작에 어려움이 없길 바랍니다. ^^;;
먼저 이렇게 좋은 스킨을 공개해 주셔서 감사드립니다.^^
내용관리에서 페이지를 설정하고 인덱스와 동일한 head.php 파일을 사용했는데요.
css가 적용이 안되는지 메뉴부분 레이아웃이 인덱스와 다르게 깨지는 현상이 생깁니다.
내용관리에서 상단파일관리에서 인덱스와 동일한 head.php 를 불러오려면 어떻게 해야하는지 질문드립니다.
현재 저는 ../theme/bs4_v3.0/head.php 이렇게 불러왔습니다.
관리자로 로그인하신 후에 게시판 관리 > 내용 관리로 들어가세요.
그런 후, 사용하려 하는 내용에 대해 수정 모드로 들어가셔서 스킨 디렉토리를 테마 (basic)으로 맞춰주세요.
다른 설정 없이 단지 스킨 디렉토리만 맞춰주시면 됩니다.

위의 내용은 매뉴얼에 나와 있는 내용이오니, 매뉴얼을 다시 한 번 정독하시면 도움이 될 듯합니다. ^^
피앙세님 넘 감사히 사용중 입니다 ^^
질문이 많아서 귀찮지요 ?
근데 또 질문 해야 할거 같아요 ㅠㅠ

멋지기는 하지만 일반 사용자한테는 관리가 좀 힘들듯 해서요.
메인페이지  Parallex는 사용하고
게시판 또는 페이지 상단의 Parallex 이미지는 사용하지 않았으면 좋겠습니다.
head.php에서 해당부분 지우니 칸이 벌어져서요.....

게시판 또는 페이지 상단의 Parallex 이미지는 사용하지 않을수 있는 방법좀 알려 주시면 감사하겠습니다.

친절 하심에 언제나 감사 드립니다 ^^
지금 버전 3.0을 사용 중이신 게 맞죠?
그렇다면 head.php의 라인 229~257의 내용을 지워주시기만 하면 아무 문제 없이 사용하실 수 있습니다.

부연 설명을 드리면,

<!-- 게시판 또는 페이지 상단의 Parallex 이미지 지정을 함 -->
위의 라인부터 시작해서...

<div class="parallax-window-sub paral-sub" data-parallax="scroll" data-image-src="<?php echo G5_THEME_URL ?>/img/paral/<?php echo $paral_pic ?>">
<h1 class="display-4"><?php echo $h1 ?></h1>
<p class="lead"><?php echo $p ?></p>
</div>
<?php } ?>

위의 부분까지 삭제하면, 게시판과 페이지 콘텐츠 모두 상단 메뉴와 적당한 간격을 두고 표시됩니다.
어떤 부분을 삭제하셨는지 알 수는 없지만, 아마도 삭제를 제대로 하신 게 아닌 것으로 여겨지네요.
아니면, 혹시 다른 수정 사항이 있다면, 그 내용이 영향을 끼치는 것일 수도 있겠구요.
제가 확인한 결과, 별 다른 이상을 발견하지는 못했기 때문입니다.

그리고 일반 사용자가 레이아웃의 이곳저곳을 마음대로 수정하면서 사용하는 것은 어느 테마나 어려운 것이 아닐는지요?
관리가 어려울 것이라 말씀하셨지만, 지금 요구하시는 내용은 엄밀히 말하면 관리의 범주라기보다는 제작의 범주에 속하는 문제가 아닌가 사료되옵니다. ^^
아래 조금 덜 지웠네요 ^^
이제 되었습니다.

더이상의 테마가 필요 없을듯 합니다.
완벽합니다 ^^

피앙세님 멋진 테마 공개해 주셔서 너무 감사합니다 ~~~~

언제나 건강하시고
대박 하세요 ^^
전 그누 초보이고 적용 전입니다.

미리보기하려면 링크에서 테마설정(임시공개) 이죠..

그리고 멋진 이미지들은 어디까지 사용가능한지요?

아이콘...배경..

사용해보고 감상평 적겠습니다. 감사합니다!!@@
지금 공개해 놓은 테마 사이트에서는 일반 사용자가 관리자로 로그인할 수 없기 때문에 테마 설정 메뉴를 볼 방법이 없는 상태입니다.
그래서 테마 사이트에서는 테마 설정을 임시 공개 형식으로 따로 메뉴를 만들어 놓은 상태이지만, 테마를 내려받아 설치하시고, 관리자로 로그인하시면 그누보드 메뉴에 테마 설정이 자동으로 나타나게 됩니다.
따라서 테마 설치 후 관리자로 로그인하면, 언제든지 관리자의 의도대로 테마 설정을 할 수 있도록 해놓았음을 알려드립니다. ^^

그리고 이미지의 경우에는 대부분 공개 이미지를 사용하였기에 어디에서든 아무런 제한 없이 사용이 가능합니다.
그런데, index_modern_2,php의 상단에 나오는 세 개의 이미지는 공개용 이미지로 판단했으나, 다시 확인해 보니 그렇지 않을 가능성도 있어 보이니, 이 세개의 이미지는 일단 사용을 자제하시는 게 좋을 듯합니다.
이 부분은 좀 더 확인한 후에 그에 맞는 조치가 필요할 경우에는 조치를 취할 예정입니다.

그럼, 사용에 어려움이 없길 바랍니다.

감사합니다. ^^
게시판 검색 부분이라는 것이 개별 게시판에서의 검색이 아닌, index 페이지 등에서 사용할 전체 검색을 말씀하시는 것인지요?

각 게시판애서 해당 게시판별 검색은 돋보기 아이콘을 클릭하여 검색하면 되지만, 사이트 전체에 대한 검색은 현재 지원하지 않고 있습니다.

따라서 index 등에서 사용헐 전체 게시판 검색은 소스를 새로 작성해서 따로 추가하여야 합니다.
급한 대로 이와 관련한 소스를 작성하여 첨부하오니 head_search.zip를 내려받아 사용하시기 바랍니다.

설치 방법:

1. 기존의 head.php를 내려받은 head.php로 대체

2. 테마 폴더 > skin > search > basic > search.skin.php를 내려받은 search.skin.php로 대체

급하게 작성하여 올리느라 디자인적인 측면에서 일부 미비한 점이 있으니, 이점 양해하여 주시면 고맙겠습니다. ^^
덕분에 잘 적용하였습니다.
이제부터 시작이니 질문이 많아질 듯 예상합니다.
마치 창을 통해 자동차를 보는듯한 연출은 압권입니다.^^
공부하면서 질문 올리오니 자주 방문하여 주십시오 ㅋ~~
귀한 도움 감사합니다.
잘 적용하셨다니 다행이네요. ^^

이제 본격적으로 홈 페이지를 꾸미신다니 큰 어려움 없이 잘 진행되길 바랍니다.
감사합니다. ^^
상단 메뉴 바탕색/하단 바탕색/ 배경검은색? 이 어디인지 못 찾아서요.. 변화주고자합니다;;
theme/bs4_v3.0/css/default.css 에서 찾는거 아닌가요...쩝..
--------------------------------
/* head */
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
.top-bg-black {background: rgba(0, 0, 0, 0.6)}
.bg-footer {background: rgba(0, 0, 0, 0.9)}

감사합니다. 초(보라 죄)송합니다~^
상단 메뉴의 배경색은 테마 > asset > offcanvas에 있는 offcanvas.css의 라인 63이 해당됩니다.

.bg-dark {
    background-color: rgba(0,0,0,.9) !important;
}

참고로, rgba의 앞 세 숫자가 rgb 색상 값이고, 그 뒤의 숫자가 투명도입니다.

그리고 메뉴의 글씨의 색상은 default.css의 라인 18이 해당됩니다.

.nav-link {
    color: rgba(255,255,255,1) !important;

또한 메뉴에 마우스 오버 시의 글씨의 색상은 default.css의 라인 14가 이에 해당됩니다.

.dropdown-item:hover, .nav-link:hover {
    color: #007bff !important;
}

위의 설명을 참조하시어 배경색, 글씨색, 마우스 오버 시의 글씨 색을 원하는 색상으로 수정하시면 됩니다. ^^
감사합니다.
.bg-dark {
    background-color: rgba(0,0,0,.9) !important;
} 를 색상(투명도) 정하면 메뉴배경색과 맨 아랫쪽 카피라이트 부분바탕색이  동시 영향받는군요

---이부분---
<div class="copy py-4 bg-dark"> //<---------이거 설정은 어디있습니까?

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p class="m-0 text-center text-white">Copyright &copy; GNU-BS 4 v3.0 2019. All rights reserved.</p>
</div>
</div>
</div>
</div>

--------------
맨위 배경색
맨 아랫쪽 카피라이트
각각 색상 등을 설정코자 합니다만..

기왕에 카피라이트 바로 위 부분도 알려주시면 큰 도움되겠습니다.
그럼,,  더 공부하다가 오겟습니다.
지금 코드를 보면 상단 메뉴 쪽의 배경색 클래스와 푸터의 배경색 클래스가 bg-dark라는 동일한 클래스명을 사용하기에 수정 내용이 양쪽 모두에 반영되게 됩니다.
따라서 푸터만을 위한 별도의 클래스를 하나 만들어서 사용하면 될 것입니다.

예를 들면,, bg-footer 등과 같은 별도의 클래스명으로 푸터의 배경색을 설정하는 코드를 작성하고, 그 클래스명을 푸터에 배정하면 됩니다.

부연 설명을 하면,

.bg-footer {
    background-color: rgba(255,255,255,.8) !important;
}

등으로 css를 작성하고,

<div class="copy py-4 bg-footer>

식으로 푸터 부분에 기존의 bg-dark 대신에 변경한 클래스, 즉 bg-footer로 지정하시면 됩니다.
어느 파일을 다운 받아 설치를 해야 하나요? 전부 다운 받아 압축 풀어 올렸는데..테마가 뜨질 않내요.. 극초보라 뭘 해야할지 몰겠어요
파일을 내려받은 후에 압축을 풀면, bs4_v3.0_set  폴더 안에 bs4_v3,0 폴더가 있습니다.
이 bs4_v3.0 폴더가 테마 폴더이므로, 이 bs4_v3.0 폴더를 theme 폴더에 설치하시면 됩니다.^^

그런 후에 Manual 폴더 안에 있는 매뉴얼 파일을 참조하여 설치 및 설정을 진행하세요.

참고로, index,php를 바꾸고자 하시면, index_set 폴더 안에 있는 4개의 파일 중 하나를 택하여 기존의 index.php를 대체하여 사용하시면 됩니다.
좋은테마 잘사용중인데 한가지 건의 또는 질문이있습니다.
게시판중에 유튭게시판을 다른 스킨을 가져와 설치해도 항상 오류가나더라구요
혹시 추가 계획은 없으실까요? ㅠㅠ
요즘 진행 중인 장기 프로젝트가 있어 내년 초까지는 시간적인 여유가 여의치 않음을 양해 바랍니다.
상황이 될 때 시도는 해보겠으나, 언제가 될지는 장담하기가 어렵네요.
지금 현재의 테마 자체로는 안 되고, 별도의 jquery 등을 추가하여 손을 보아야 합니다.
제가 요즘 정신이 없어 손을 보기엔 어려움이 있음을 양해 바랍니다.
언젠가 손을 볼 수는 있겠으나 이 또한 언제가 될지 말씀 드리기가 쉽지 않네요.
정말 세심한 노력이 돗보이는 테마입니다.
저도 부트스트랩 테마를 몇번 설치해봤지만 너무 깔끔하고 세련됨에 감탄을 금할 길 없네요~~^^
이번에 처음 그누보드 테마를 적용해봅니다.
사이트 상단에 문자로 적용된 로고를 이미지로 변경하는 방법을 찾을 수가 없네요~~^^;;
bs4 > theme > bs4_v3.0 > head.php 파일을 여신 후에 65 라인을 수정하세요.

수정 전:
<a class="navbar-brand" href="<?php echo G5_URL ?>"><?php echo $config['cf_title']; ?></a>

수정 후
<a class="navbar-brand" href="<?php echo G5_URL ?>">로고 이미지 주소</a>

로고 이미지 주소는 예를 들면, bs4 > theme > bs4_v3.0 > img 폴더에 logo.png 파일이 있다면,

로고 이미지 대신에 <?php echo G5_THEME_IMG_URL ?>/logo.png 형식으로 대체하시먄 됩니다.

격려의 말씀, 감사합니다. ^^
상단의 첨부 파일 중에서 head_search.zip을 내려받아 사용하세요.
설차 방법은 상단에 있는 버전 히스토리 중에서

### 2019-06-17: v3.0 헤드(상단 메뉴)에 전체 검색 임시 추가

의 내용을 참조하세요. ^^
슬라이드 사진이 웹에서 확대된다는 말씀의 의미가 정확히 어떤 것인지 잘 모르겠습니다.

일단, 슬라이드와 관련한 css는 bs4_v3.0 > asset > css에 있는 carousel.css이므로, 슬라이드와 관련한 설정은 이 css 파일의 내용을 수정하면 됩니다.
피앙세님 덕분에 테마 잘 사용하고 있습니다.^^
제가 여러모로 다른분이 만드신 스킨을 이 테마에 접목시켜 보려고 많은 노력을 기울였지만, 너무 초보라 여러개발자님들이 도와주셔도 잘 안되네요~~
포기하려 했지만, 몇몇 스킨은 너무 욕심이 나서 도저히 포기가 안됩니다.
언제가 되더라도, 꼭 해결하고 싶어요~~

https://sir.kr/g5_skin/30908?page=5
그누위즈님의 그누보드5.4 masonry 갤러리 게시판 입니다.
4개의 갤러리 중에 2개는 피앙세님의 BS4 v3.0 테마에서 제공해주신 갤러리 스킨을 그대로 쓸꺼구요~~
2개는 그누위즈님의 masonry 갤러리게시판을 써보려고 합니다.

얼마전에 이 내용으로 질문을 올렸는데, 결국 해결을 못했어요~~
https://sir.kr/qa/320352?vpage=1#answer_320466 입니다.
나중에라도 답변 부탁 드립니다.

게시판에 들어가면 이런식으로 나오네요 ㅜㅜ
그리고 메인 슬라이드에 있는 이미지와 글자는 어떻게 수정하는지 알고싶습니다...
게시판스킨이 적용이 안된건가  꺠지네요..
내려받은 파일의 압축을 푸시고, 폴더의 내용을 확인하시면, 매뉴얼이 있습니다.
그 매뉴얼 안에 설치 방법도 정리해 놓았으니 찬찬히 읽어보시면서 설치 및 설정을 다시 진행해 보세요.
그러면 문제가 해결될 것으로 생각합니다.
해당 게시판의 설정에서 사용 스킨을 지정하는 항목과 config.php에서 mobile 부분을 false로 바꾸는 부분 등, 몇 가지 설정만 맞춰주시면 문제가 없을 것으로 생각합니다.

슬라이드는 bs4_v3.0  폴더에 있는 head.php의 내용 중에서 슬라이드 관련 항목을 수정하시면 됩니다.
이 또한 매뉴얼에 자세하게 정리해 놓았으니 참조하시기 바랍니다. ^^
피앙세님 좋은스킨 오픈해주셔서 감사합니다
그런데 제가 기존에 작업하던게 있어서 pc용은 놔두고 모바일만 쓰고싶은데 가능할까요?
가능하다면 어떻게 하면 되는지 알려주시면 감사하겠습니다
본 테마는 반응형을 기준으로 합니다.
오직 PC쪽 소스에서만 작업하며, 모바일인 경우에는 PC쪽 소스가 알아서 반응하여 적절하게 배치가 되는 방식입니다.
따라서 모바일 관련 소스는 전혀 손을 대지 않습니다.
반응형이기에 하나의 소스로 PC, 모바일 모두에 적절하게 반응하게 됩니다.
따라서 모바일만 사용한다는 의미 자체가 성립되지 않는 것으로 생각합니다.
반응형이라는 특성 상 지금 의도하시는 목적에는 부적합할 수밖에 없지 않나 하는 생각이 드네요.

이 테마를 설치하시고, 그냥 모바일에서만 사용하면 되는 것 아닌지요?
그러면 안 되는 것인지요?
아.. 제가 기존에 pc용으로만 운영하는 사이트가 있는데 하필 버전업 완료후에 피앙세님 테마를 보게 되었습니다
새로 작업할려니 엄두가 안나서 말씀드린것입니다
스킨이 멋있어서 써보고싶은 마음이었네요
답글 감사합니다
피앙세님, 안녕하세요?
이 테마에서 제공되어지는 일정관리를 관리자페이지에서도 사용하고 싶은데 어떻게 해야 하나요?
풍성한 한가위 되시고, 항상 행복하세요~~^^
자문자답입니다.
칼렌다 게시판 하나 추가 후

bs4_v3.0 테마 내 head.php를 수정했습니다.
감사합니다.^^
피앙세님, 안녕하세요?
왼쪽 aside의 메뉴가 이상한 것 같습니다.


제가 메뉴설정에서 회사소개 메뉴를 추가하고 난 후인것 같은데(정확한 시점을 모르겠습니다.)
어디가 잘못되었는지 찾을수가 없습니다.

어떻게 수정해야 할까요?
사이드의 메뉴는 그누보드의 관리자 메뉴에 있는 메뉴 설정을 참조하여 화면에 표시하는 기능이므로 메뉴 설정쪽을 살펴보셔서 원인을 찾으셔야 할 것으로 여겨집니다.

그게 아니라면, aside.php의 <div id="mysubmenu"> 하단의 내용 중 일부를 수정해서 발생하는 문제일 수도 있겠네요.

관리자의 메뉴 설정, aside.php 소스를 잘 살펴보시고, 문제의 원인을 찾을 수 없다면, 메뉴 재설정 또는 aside.php의 재설치 등을 진행해 보시기 바랍니다.

그럼, 이 문제가 잘 해결되길 바랍니다. ^^
피앙세님, 안녕하세요

덕분에 테마 감사히 쓰면서 페이지 만들고있습니다!!

http://rumex1991.dothome.co.kr/g5/

지금 이런 사이트를 만들고 있는데요.

http://rumex1991.dothome.co.kr/g5/bbs/content.php?co_id=vision

이런 콘텐츠 페이지들의 헤드(푸터)는 같을텐데

인덱스에서는 이미지가 같이 내려오지 않는데

콘텐츠 페이지에서는 Heading의 설명이 나와있는 이미지가 같이 내려와버립니다.

크롬으로 코드를 보면서 봤을 때는 transform의 3dtranslate 이 쪽 문제일수도 있겠다 싶은데

이쪽은 제가 조절할 방법이 없더라구요.

혹시나 글을 보신다면 방법을 알려주셨으면 감사하겠습니다.
안녕하세요?

살펴보긴 했는데, 소스 자체를 살펴보는 게 아니어서 문제의 원인으로 여겨질 부분은 찾아내지 못했습니다.
일단 사소한 문제이긴 하겠지만, 아래의 부분을 수정해 주셔야 할 듯합니다.

- 수정 전
<a class="nav-link dropdown-toggle" href="http://rumex1991.dothome.co.kr/g5">메인 화면</a>

- 수정 후
<li class="nav-item><a class="nav-link dropdown-toggle" href="http://rumex1991.dothome.co.kr/g5">메인 화면</a></li>

지금 나타나는 증상은 Parallax와 관련된 문제이므로, head.sub.php의 Parallax 관련 소스와 default.css의 Parallax 관련 부분을 살펴보시기 바랍니다.

지금 작업해 놓은 위의 두 소스는 백업을 한 상태에서, 내려받은 원본의 소스로 대치했을 때는 정상적으로 동작하는지 먼저 확인해 보실 것을 권합니다.
그래도 증상이 해결되지 않는다면, 아마도 다른 소스쪽에 추가한 자바스크립트 등과 충돌하여 발생하는 문제일 수도 있지 않을까 합니다.

내려받은 원본 테마를 다른 이름으로 설치한 후에 테마를 변경하여 정상적으로 동작하는 걸 확인하신 상태에서 찬찬히 점검을 해보시는 것도 한 방법이 되지 않을까 합니다.

소스 자체를 확인하는 게 아니어서 원인 파악에 한계가 있다는 점을 양해바랍니다.
전체 108 |RSS
그누보드5 테마 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT