(수정본3_211226) GnuTailwindcss v0.2.1 > 그누보드5 테마

그누보드5 테마

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

(수정본3_211226) GnuTailwindcss v0.2.1 정보

(수정본3_211226) GnuTailwindcss v0.2.1

첨부파일

GnuTailwind_v0.2.1.zip (7.4M) 607회 다운로드 2021-09-17 00:46:18
patch_v0.2.1.zip (48.7K) 11회 다운로드 2021-09-17 00:46:18
head.zip (2.7K) 9회 다운로드 2021-09-17 01:59:28
view.skin.php.zip (4.8K) 11회 다운로드 2021-12-26 15:22:50
테스트한 버전5.4.5.5
호환 가능 버전5.4 이상

본문

[공지]
2021.12.26: 동영상 게시판에서 Naver TV 동영상을 처리하지 못하는 오류를 수정하였으며, 해당 파일(view.skin.php.zip)을 첨부하오니 파일을 내려받으신 후에 skin > board > tailwind_video 폴더에 있는 view.skin.php 파일을 교체하시기 바랍니다.

210917: v0.2.1을 내려받으셨던 분들께서는 head.zip을 내려받아 기존의 head.php 파일과 교체해 주시면 고맙겠습니다.
몇몇 에러 메시지 관련 수정 작업을 해서 v0.2.1을 올렸는데, 그만 실수로 메인 페이지의 전체 검색 버튼 토글 관련 스크립트를 삭제해서 검색 버튼이 토글되지 않는 증상이 있기 때문입니다.

[ 안내 ]
v0.2를 내려받으신 분들께서는 v0.2.1을 내려받아 전체를 교체하시거나, patch 파일을 내려받아 해당 파일만 교체하시기 바랍니다.

### GnuTailwindcss v0.2.1 ###
- 중복 및 불필요한 코드 삭제 또는 변경
- 웹진 게시판 제목 길이에 따른 폭 변화 제한
패치 내용은 동봉된 설명문을 참조하시기 바랍니다.


GnuTailwindcss  v2.x는 v0.1을 일부 개선한 버전입니다.
- 동영상 게시판(Video)과 웹진 게시판(Webzine) 추가
- 인텍스 페이지(index.php)에 섹션(New-Idea) 추가
- 각 게시판과 전체 검색의 레이아웃 개선


# 사용 환경 및 지원
그누보드 5.4.5.5 버전을 사용하였으며, tailwindcss 2.2.7 버전을 사용하였기에 이 테마는 인터넷 익스플로러는 지원하지 않습니다. (tailwindcss 1.9까지만 인터넷 익스플로러를 지원)

그누보드 5.3.x에서는 사용할 수 없으며, 5.4 이상이면 사용이 가능할 것으로 생각합니다.
공교롭게도 몇 개 설치해 놓은 그누보드의 버전이 모두 5.4.5.5이기에 직업 확인하지는 못했지만, 5.4.x면 사용이 가능하지 않을까 생각합니다.
 

# 구성 파일
- 게시판: basic, Gallery, Webzine, Video
- 최신글: tail_basic, tail_notice, tail_pic_block, tail_pic_list
 

그리고 index 파일은 두 개를 제공합니다.
- index_latest.php:  slick 슬라이더와 최신글의 네 가지 타입의 조합으로 구성
- index.php: 사이트 소개 형식으로 구성하였으며, AOS를 사용하여 간단한 애니메이션을 적용했고, 슬라이더는 swiper를 사용
 

slick 슬라이더에 사용한 이미지는 img > slick 폴더, swiper 슬라이더에 사용한 이미지는 img > testimonials 폴더에 있습니다.
 

# 설정
반응형으로 사용할 것이기에 config.php의 라인 130 부근에서 아래의 내용을 찾아 true를 false로 바꿔주셔야 합니다.
define('G5_USE_MOBILE', true); // 모바일 홈페이지를 사용하지 않을 경우 false 로 설정
 

그리고 관리자에서 테마를 변경하시고, 기본환경설정에서는 아래의 내용을 모두 (테마) basic으로 맞춰주세요.
(최근게시물 스킨, 검색 스킨, 접속자 스킨, FAQ 스킨, 회원 스킨)
 

관리자의 게시판 관리에 있는 1:1 문의 설정에서 스킨 디렉토리를 (테마) basic으로 맞춰주신 후 사용하시면 됩니다.


감사합니다.

추천
19

댓글 전체

그누보드에 tailwindcss를 적용하기 위해 CDN 방식을 사용했는데, 이런 경우에는 모든 파일을 일일이 검색하여 변경하셔야 합니다.

php 파일: indigo라는 단어로 검색하여 변경
css 파일: rgba(99, 102, 241, 1)과 rgba(224, 231, 255, 1)로 검색하여 변경

사용한 보라색이 한 가지가 아니기에 위의 과정을 거친 후 화면에서 확인하여 변경할 부분이 더 있다면, 해당 소스에서 추가로 변경해주셔야 합니다.
이때, 웹 브라우저의 개발자 도구를 통해 소스 내의 위치를 알아낸 후 수정하시면 도움이 될 것입니다.
이런~ 변경하실 때, 찾기로 해서 하나씩 변경하기보다는 찾기 및 바꾸기로 검색하시어 일괄 변경을 하시면 좀 더 빠르게 변경하실 수 있을 것으로 생각합니다. ^^
indigo  같은 경우에는 text의 경우에는 text-indigo-500, text-indigo-100, background의 경우에는 bg-indigo-500, bg-indigo-100 등이 주로 사용되었으니 참조하시면 좋을 듯합니다.
감사합니다. 그런데 크롬에서 관리자 도구로 확인하니 웹집게시판에서

Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-migrate-1.4.1.min.js?ver=191202:2 JQMIGRATE: Migrate is installed, version 1.4.1
font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
DevTools failed to load source map: Could not load content for http://iplace.co.kr/v54/theme/10_GnuTailwind_v0.2/assets/swiper/swiper-bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

와 같이 오류가 뜨는데 이상 없는 건가요~?
소스 중에 테스트를 하느라 잠시 넣어두었던 소스를 삭제하지 않아 중복된 것이 있었고, 이런 경우에는 둘 중에 하나는 실행이 되므로 묹제가 발생하지는 않습니다.

그리고 CDN을 통하지 않고, js 파일을 저장하여 사용하면서 누락된 파일이 있는데, 이는 없어도 무관한 것이지만 마치 큰 에러가 난 것처럼 메세지가 나타나네요.

jquery-migrate 관련 메시지는 에러는 아니고, jquery를 여러 버전을 사용하는 경우에 호환이 되도록 설치하는 파일이 있는데, 이를 설치했다는 메시지이므로 에러나, 경고와는 무관한 것으로 생각합니다.

또한 나중에 적용해볼까 하여 잠시 넣어두었던 소스도 삭제하지 않아 불필요하게 에러 메시지를 띄우는 게 있었고, 웹진 게시판의 경우에는 제목이 짧을 때, 박스의 폭이 함께 줄어드는 오류가 있음도 알게 되어 이도 수정했습니다.

몇몇 에러, 중복 또는 불필요한 소스를 정리해서 다시 올려놓도록 하겠습니다.
심각한 에러를 일으키지는 않는데, 결함임은 분명하네요. ^^

문제점을 지적해주셔서 감사의 마음을 전합니다. ^^;;
제가 크롬이 아닌 파이어폭스를 주로 사용하기에 그런 메시지가 뜨는 걸 모르고 있었답니다. ^^
덕분에 보기 흉한(?) 메시지를 날릴 수 있었으니 감사드립니다.
덕분이라니요~~제가 덕분에 다시 한번 감사드립니다.
그런데 상단의 검색 토글관련 스크립트가 버젼업 되면서 삭제되었네요~~현재 작동안합니다...
앗! 그 부분을 제가 착각했네요.
에러를 일으킬 여지를 없애는 쪽으로만 집중하다가 검색 토글과 연관되어 있다는 것을 잠시 착각했네요.
다시 손을 보아서 올리도록 하겠습니다.
더는 실수하면 안 되는데 말이죠. ^^
이번에도 다시 감사드립니다. ^^;
기존의 index.php를 다른 이름으로 먼저 변경하시거나, 다른 곳으로 옮겨 놓으시고, 최신글 모음인 index_latest.php의 파일명을 index.php로 바꾸시면 됩니다.
너무너무 훌룡하십니다. 심플하고 깔끔하고 그런데 메인 페이지 TRANSACTIONS 바로 아래 갤러리 게시판 하나 삽입 시키자면 어떻게 해야 될까요.
일단 한 줄에 6개의 갤러리 파일을 표시하는 것을 기준으로 말씀드리겠습니다.

먼저 index.php에 아래의 코드를 추가하세요.

<section id="about" class="about bg-white py-12 overflow-hidden">
  <div class="container mx-auto px-4 sm:px-0" data-aos="fade-up">
    <h2 class="sound_only">최신글</h2>
    <div class="latest_top_wr text-black">
      <div>
        <?php echo latest('theme/tail_pic_block', 'gallery', 6, 23); ?>
      </div>
    </div>
  </div>
</section>

그리고 최신글 스킨으로 tail_pic_block를 사용했기에 tail_pic_block > latest.skin.php에서 아래와 같이 수정해주세요.

- 수정 전
<ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 xl:gap-6">

- 수정 후
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4 xl:gap-6">

답글을 올리기 위해 확인하다보니, 한 줄에 표시하고자 하는 갤러리 파일의 수에 따라 index.php뿐만이 아니고 최신글의 latest.skin.php도 그에 맞춰 수정을 해야 하는 문제가 있네요.

그런데 최신글을 한 번만 사용한다거나, 하나의 최신글 스킨을 동일한 갯수로 표시하고자 할 때는 여러 번 사용해도 문제가 없지만, 어떤 경우에는 4개, 어떤 경우에는 6개 등으로 그 갯수를 달라 하며 여러 번 사용할 때에는 문제가 될 수 있으니, 이점 유념하시기 바랍니다.

참고로, 화면 폭의 변화에 따른 grid의 갯수의 변화는 원하시는 쪽으로 수정하여 사용하시면 됩니다.
즉, lg일 때 몇 개, md일 때 몇 개 등의 수치는 원하시는 갯수로 설정하시면 됩니다.
피앙세 님 이렇게 신속하게 답변을 달아주셔서 너무나 감사합니다. 재주가 미천하나 시간이 나는대로 작업을 하도록 하겠습니다. 추석 명절 잘 지내시고 가족들도 모두 무탈하시기를 진심으로 기도하겠습니다.
연휴 잘 보내셨나요?
여쭤볼게 또 생겼는데... 인덱스 페이지에 불필요한 섹션들을 날리니까 PC 버전에선 하단이 공백으로 나옵니다.
내용이 짧아지더라도 공백없이 height 가 100%로 보여지게 할 수 있는 방법이 있을까요?
자꾸 질문만 드려서 죄송합니다.ㅠ
아래와 같이 진행해 보시기 바랍니다.

- body 태그에 클래스를 추가해 주세요.

변경전:
<body<?php echo isset($g5['body_script']) ? $g5['body_script'] : ''; ?>>

변경 후:
<body<?php echo isset($g5['body_script']) ? $g5['body_script'] : ''; ?> class="flex flex-col h-screen">

- index.php에서 제일 끝에 아래의 소스를 추가해 주세요.
<div class="flex-grow"></div>

원하는 결과가 나오길 바랍니다.
감사합니다.
아.. 결과는 동일합니다 ㅠㅠ

중간에 한 섹션 height가 줄어버리네용..;;

index.php 에 삽입하는 내용은 tail.php include 위에 넣었습니다.
@media (min-width: 1280px)
.xl\:grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

>> 최신글형 index.php를 쓰고 있습니다.  css를 조금 손보고 싶은데 불가능 할까요??
    gride- ~~ : repeat(6,minmax(0,1fr));    4분할을 6분할로 하고 싶어서요.ㅠ
제가 제대로 이해한 것인지 모르겠는데, 위에 무쏘님의 질문글에 올린 저의 답글을 참조하시면 도움이 되지 않을까 합니다.

저 위의 답글은 최신글이 없는 일반 index.php에 최신글 섹션을 추가하는 내용인데, 최신글이 없던 index.php에 최신글을 6분할로 추가하는 방법을 설명한 글입니다.

index.php에 최신글 섹션을 추가하는 경우에, 3분할이 아닌 경우에는 불편하게도 최신글 소스도 함께 수정해야만 하는 결점(?)이 있더라구요.
이는 최신글 스킨을 tailwind css의 grid 방식으로 처리해서 발생한 문제인데, 이를 수정하려면 손을 좀 보아야 해서 기존의 상태에서 바로 사용하기 위해서는 어쩔 수 없이 최신글 스킨을 일부 수정해서 사용해야 하는 상황입니다.

따라서 index.php에 최신글 불러오는 부분을 추가하는 것과 함께 최신글 스킨도 3분할이 아닌 경우에는 일부 수정하여 사용하셔야 함을 유념하시기 바랍니다.

최신글이 3분할 기준으로 작성되어 있어서, 분할 수가 달라지면 그에 맞춰 수정해야 하는데, 위의 설명글이 6분할에 대한 것이니 적용에 큰 무리가 없지 않을까 생각합니다.

그럼, 좋은 결과 있길 바랍니다.

감사합니다.
고맙습니다. 피앙세님 잊지 않고 상세한 설명 다시 해주시니 너무나 몸둘바를 모르겠습니다. 저는 이런저런 사정 때문에 아직 작업을 시작도 못하고 있네요, 건강 잘 챙기시고 무탈하세요
테마 설정에서.. 다른 설정 부분이 필요한건가요?

화면에
"메인 페이지
그누보드 v5.4.x의 Tailwind CSS 버전입니다.
Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크입니다."

이게 적혀(index.php 파일에 이렇게 있으니.. 당연한건데..) 있고.. 이렇게 표시만 되는데..
여기서 더 무슨 작업을 해야하는지요...


테마 사용하셨던분들 계시면 감사히 조언 듣겠습니다 (_ _)
테마 폴더에 설치 후, config에서 Mobile 사용 안 함으로 설정, 관리자의 기본 설정에서 몇 군데를 (테마)basic으로 맞춰 주시기만 바로 적용이 됩니다.
화면 상태를 보면 지금 Tailwind CSS가 전혀 적용이 되지 않은 상태로 보이네요.
그누 버전이 5.4 이상인지, 기본 설정을 하셨는지, 다시 한 번 확인해 보시기 바랍니다.
고생이 많으셔요... 몇가지 질문이 있어요 ㅠ.ㅠ
아무래도 버전문제일 수도 있어서 다시 설치 해도 같은 문제입니다.

define('G5_GNUBOARD_VER', '5.4.5.5');
(테마)basic 으로 모두 변경

Tailwind css 를 별도로 설치를 해야하나요?

현재 cafe24 에서 10G 광아우토반 FullSSD Plus 비즈니스 사용중입니다.
귀찮으시겠지만서도.. 답변 이렇게 부탁드립니다. 바쁘신데 죄송합니다 ㅠ.ㅠ
Tailwind CSS는 CDN 방식으로 테마 소스에서 직접 읽어오게 되어 있습니다.
따라서 이 CSS가 제대로 읽혀졌다면, 저 위의 이미지처럼 Tailwind CSS가 전혀 적용되지 않은 화면은 나올 수가 없습니다.
복잡한 설정을 요하는 것도 아니고, 그냥 테마 설치 후 모바일 사용 안 함, 그리고 테마 지정 몇 군데 정도인데 이런 증상이 나오다니 아무리 생각해도 이해가 잘 안 됩니다.

해서, 한 가지 떠오르는 것은 혹시 익스플로러를 사용하시는 것은 아닌지요?
Tailwind CSS의 이전 버전, 즉 1.9 이하의 버전은 익스플로러를 지원하지만, 이 테마에서 사용하는 Tailwind CSS의 버전은 2.x로서 익스플로러는 지원하지 않습니다.
이런 이유 때문에 테마 공개 시에 분명하게 언급한 상태입니다.

만약 익스플로러를 사용하신 게 아니라면, 그누 버전도 문제 없어 보이고, 설정도 하셨다고 하는데 이런 이상 증상이 나온다니 안타깝지만 저로서도 딱히 원인을 찾기가 어려워 보이네요.
질문드립니다.
게시판에 글을 쓰면 h2나 h3 폰트 크기가 다 똑같이 나오는데
css 수정을 어느 부분을 해야 할까요?
그리고 멋진 테마를 이렇게 공개해주시고 너무너무 감사드립니다.
해당 증상의 원인을 찾아보니, 이는 Tailwind CSS가 HTML의 CSS 규칙을 초기화했기 때문입니다.
초기화 내용 중에 h1~h6가 포함되어 있는 것으로 여겨집니다.
이는 Tailwind CSS의 경우만이 아니고, 순수 CSS로 작업하는 경우에도 실무에서는 HTML의 CSS 규칙을 모두 초기화한 후에 작업하는 경우가 꽤 많습니다.

지금의 상태에서 문제를 개선하기 위해서는 일단 다음과 같은 세 개의 방법 등을 이용하셔야 하겠네요.


1. CSS 규칙 추가 작성

일부 특정 게시판에만 적용하시고자 한다면, 해당 게시판 스킨의 style.css에 추가하시고, 그렇지 않고 모든 사이트 전체에 적용하고자 하신다면, 테마 스킨의 default.css에 추가하세요.

일단 추가할 내용은 다음과 같습니다.

h1 {font-size: 32px !important;}
h1 {font-size: 24px !important;}
h1 {font-size: 18px !important;}
h1 {font-size: 16px !important;}
h1 {font-size: 13px !important;}
h1 {font-size: 10px !important;}

important를 적용하지 않으면, Tailwin CSS의 영향으로 적용되지 않습니다.
그리고, 참고로 h1~h6의 경우에 각 브라우저 별로 크기가 조금씩 상이하기도 한데, 위의 수치를 적용하면 무난할 것으로 생각합니다.


2. Tailwind CSS의 문법을 적용

문서를 작성할 때, HTML 모드에서 Tailwin CSS의 문법을 사용하는 방법업니다.

<div class="text-sm>H1일 때</div>
<div class=text-normal">H2일 때</div>
<div class="text-lg">H3일 때</div>
<div class="text-xl">H4일 때</div>
<div class="text-2xl">H5일 때</div>
<div class="text-3xl">H6일 때</div>


3. DHTML 사용

해당 게시판의 설정에서 DHTML 사용을 설정하여 사용하는 방업니다.


또 어떤 태그에서 문제가 생길지 알 수 없지만, 우선 H1~H6 태그의 경우에는 이 정도가 새선할 수 있는 방법으로 여겨지네요. ^^

그럼, 도움이 되는 내용이었길 바랍니다.

감사합니다.
웹 프레임워크를 사용하면 아무래도 그 특성에 영향을 받게 되는 문제는 어쩔 수 없지 않을까 합니다.
부디 사용에 어려움이 없으면 좋겠습니다. ^^
감사합니다.
동영상게시판 에서 에러가 있는거 같은데 해결방법을 몰라 여기 문의드립니다.ㅜㅜ

동영상게시판에, 유튜브 주소를 넣고 게시물 올리면 정상 등록, 게시물 확인이 됩니다.근데 네이버동영상주소를 넣으면등록은 되는데 게시물 확인시 내용이 안보입니다.

Iplace.co.kr사이트 video게시판
파키케팔로사우루스를 구해줘!
게시물 들어가면 화면구성이 이상하게보이는것처럼요

어디를 뒤져봐야할지 막막해서 도움 청하고자 글 올립니다
해당 증상을 바로 잡아서 수정한 파일을 첨부해 놓았으니 내려받으셔서 해당 파일을 교체하시기 바랍니다.
아니면, 이번에 Dark Mode를 추가한 버전을 새로 올려 놓았으니 신버전을 내려받아 사용하시는 것이 더 좋을지 모르겠네요. ^^

감사합니다.
설치하니까 글 올라가는거는 정상적으로 되네요. ㅎㅎ
너무 고맙습니다. 그런데, 또 예상치 못한 문제가..ㅜㅜ

실례를 무릅쓰고,ㅜㅜ 혹시나 해서 한번 더 문의 드려요.

http://2dkf.co.kr/bbs/board.php?bo_table=media

이 게시판 보시면,,, 첫번째, 세번째 영상은 아예 안나오고,두번째 영상은 나오고..

이게 네이버쪽 설정문제는 아닌거 같은데, 혹시 이게 내가 뭔가를 손대야 하는 상황인가요?
정말 난감합니다.

URL보면 정상적으로 동영상 보이는데, 홈페이지에서만 안보이네요.ㅜㅜ
지금 확인해 보았는데, 영상 구현에는 문제가 없어 보입니다.
연결은 되는데, 해당 동영상의 공개 설정 등에서 문제가 있어 공개가 되지 않는 화면으로 넘어가는 게 아닐까 하는 생각이 듭니다.
제가 네이버 TV는 사용을 해보지 않아서 영상을 올릴 꼉우에 해야 하는 설정 관련 내용을 잘 알지 못해 정확한 답변이 어렵지만, 아무래도 동영상 연결 자체는 되는데, 해당 동영상의 설정에서 공개가 아닌 비공개 등으로 설정이 되어 지금과 같은 화면이 나오는 것으로 여겨지네요.

정리하면, 네이버 TV에 올려져 있는 다른 영상들은 모두 정상적으로 연결이 되는데, 직접 올리신 영상만 플레이 와면이 아닌 안내 화면이 나온다는 것은 아무래도 동영상 공개와 관련한 설정의 문제일 가능성 커보이니 영상을 올리실 때 진행해야 하는 공개 여부 관련 설정 등을 살펴보시면 해답을 구하실 내용이 아닐까 합니다.

그래도 혹시 모르니 한 번 확인해 보시고, 그래도 문제가 있다면 알려주시기 바랍니다.
잘 해결되었으면 합니다.
와~~ 이게 무슨 상황인지 진짜 모르겠네요.
그냥 궁금증만 폭발하고 있습니다.

갑자기 지금 접속해 보니까 되네요. 
네이버TV에서 건든것도 없는데,,,, 

혹시나 의심되는 상황중 하나는,, HTTPS, SSL인증이 아닐까 싶은 생각.

제 도메인에 대해서, 오전까지 SSL인증이 완료 안됐었는데, 그게 적용되고 나서 이제 제대로 작동하는것일까요?ㅎㅎ 일단 되니까 안심은 되는데, 그래도 원인을 모른채 해결되니까 찜찜한 기분을 어쩔수 없네요. ^^

암튼, 하나하나 친절히 답변 주셔서 너무 감사했습니다.
그러네요.
안 되면 왜 안 되는지, 되면 왜 되는지 알면 좋은데 말이죠. ^^

속 썩이던 문제가 해결되어 정말 다행입니다.
감사합니다.
올해 마무리 잘되시고, 내년에도 번창하시고 건강하세요~
궁금한 부분이 있어 문의드릴려고 합니다.



이미지는 현재 제가 홈페이지에서 모바일 버전을 하였을 경우 나오는 모습입니다.

config.php의 내용 중 mobile이 들어간 부분을 true에서 false로 변경하려고 들어갔으나
모바일이라는 단어가 보이지 않는데 조치가 가능할까요?

- 직접 표기해주신 부분 :  define('G5_USE_MOBILE', true); //

- 제 파일에 표기되는 부분 :
  1. if (!defined('_GNUBOARD_')) exit;
  2. if(! defined('G5_THEME_DEVICE')) define('G5_THEME_DEVICE', '');

config.php 수정 시 연결 프로그램: 메모장, 비쥬얼 스튜디오 코드 사용
텍스트가 출력되는 라인이 37줄 정도 되는데 본문에 표기해주신 130라인이 제가 표기한 37줄
안에 들어가는 다른 단위일까요?
어? 분명히 며칠 전에 답글을 올렸는데, 무슨 일인지 답글이 사라져버렸네요.

설정을 제대로 하셔서 문제가 없는 상태라고 하시니 다행이네요. ^^
감사합니다.
근데 제가 select 를 추가 하려고 하는데...css에 추가를 해야 할거 같은데...

혹시 어떻게 해야 해야 할까요?~~~ㅠㅠ

죄송합니다..초보라서...
tailwindcss에서 select를 사용하는 것은 일반 HTML 문법과 동일합니다.
즉, select 하위에 option문을 사용하시면 됩니다.

https://tailwindcss.com/docs/appearance

원하는 내용으로 수정이 잘 이루어지길 바랍니다.
감사합니다.
1. 상단 전화번호가 있는 topbar 부분은 head.php에서 아래의 내용을 찾아 수정하세요.

<section id="topbar" class="bg-indigo-500 text-white py-2 text-base">
bg-indigo-500이 배경 색상이니 이를 수정하시면 됩니다.

2. 하단 주소가 있는 footer 부분은 tail.php에서 아래의 내용을 찾아 수정하세요.

<div id="footer" class="w-full bg-indigo-500 text-white">
bg-indigo-500이 배경 색상이니 이를 수정하시면 됩니다.

class를 통한 색상 지정에서 원하는 색상은 tailwindcss의 경우에는 아래의 링크에서 내용을 참조하여 적용하시면 됩니다.

https://tailwindcss.com/docs/customizing-colors

그럼, 도움이 되었길 바랍니다.

감사합니다.
멋진 테마를 공개해주셔서 감사합니다.
다른 작업을 새로 하게되면 잘 사용하도록 하겠습니다.
피앙세님의 댓글 반응에 대한 충실한 자세를 보면 탄복할만 합니다.
감사합니다.
좋은 테마 감사합니다. 한가지 질문이 있는데, 메뉴 마우스오버 했을때 나오는 연보라색 배경과 클릭시 바뀌는 보라색 글자색을 어떻게 바꿀 수 있을까요?
감사히 잘 쓰고 있습니다.
한가지 궁금한 사항이 있어서요.. 그누보드 자체가 회원탈퇴 기능이 없긴하지만..
혹시 회원탈퇴 스크립트는 어떻게 써야 할까요??
이곳 (https://gnustudy.com/bbs/board.php?bo_table=skin_etc&wr_id=16) 에서 보고 해봐도 적용이 안되네요. ㅠㅠ 회원탈퇴 버튼이 안보여서요.. ㅠㅠ
올려주신 링크 페이지의 내용대로 진행하면, 아무런 문제 없이 탈퇴 기능의 추가가 가능합니다.
단, 최고 관리자는 탈퇴할 수 없으며, 정보 수정 페이지로 들어가더라도 관리자 페이지에서 정보 수정하라는 메시지가 나오게 됩니다.
따라서 최고 관리자로 로그인한 상태에서는 탈퇴 기능을 확인할 수가 없으니 임의의 일반 회원 아이디를 하나 생성한 후에 확인해 보시면 될 것입니다.

1.
테마 > skin > member > basic 폴더에 있는 register_form.skin.php 에서 아래의 내용을 추가해 주세요.
$w==''?'회원가입':'정보수정';  이라는 내용을 찾으신 후, 바로 그 아래 라인에 추가하시면 됩니다.

 <?php if ($w == 'u') { ?><a href="javascript:member_leave();" class="btn_close leading-8 h-8 px-3 inline-block text-center font-normal border-0 text-base transition transition-colors duration-300 ease-out text-white bg-gray-500 hover:bg-gray-600 rounded mr-1">회원탈퇴</a><?php } ?>

2.
그리고 그 아래의 <script>가 시작하는 부분 바로 위에 아래의 내용을 입력하세요.

<script>
function member_leave() {  // 회원 탈퇴 tto
    if (confirm("회원에서 탈퇴 하시겠습니까?"))
        location.href = '<?php echo G5_BBS_URL ?>/member_confirm.php?url=member_leave.php';
}
</script>

3.
마지막으로, 회원 탈퇴 버튼과 왼쪽의 정보 수정 버튼이 밀착되어 보기에 좋지 않으니, <button type="submit" id="btn_submit" 라인의 class에 mr-3을 추가하세요.


그럼, 어려움 없이 탈퇴 기능 추가에 성공하시길 바랍니다.

감사합니다.
안녕하세요 사이트 회원가입약관 페이지에서(http://iplace.co.kr/v54/bbs/register.php) 상단을 수정하고싶은데...

혹시 어떤 파일을 고쳐야하는지 알수 잇을까요?
음~ 지금 말씀하시는 상단(빨간색 사각 테두리 안의 내용)이라는 것이 회원가입약관에서만 사용하는 것이 아닌, 모든 하면에서 사용되는 부분인데, 회원가입약관에 국한해서 질문하신 의도가 무엇인지 알기가 어렵네요.

그래서 원하시는 내용이 아닐 수도 있을 것이란 말씀을 미리 드리며, 상단 수정에 관해서 말씀을 드리겠습니다.

테마 폴더 > head.php가 저 상단과 관련된 파일이며, <section id="topbar"...로 시작하는 부분이 indigo 배경색의 부분이고, <header id="header"...로 시작하는 부분이 로고를 비롯한 메뉴를 구성하는 부분입니다.

질문하신 의도를 제가 제대로 이해하지 못한 것 아니냐는 생각이 드는데, 혹시라도 원하시는 내용이 아니라면, 다시 상황 설명을 부연하여 글을 올려주시면 고맙겠습니다.
유튜브 동영상을 게시판에 업로드하고, 크기를 화면에 맞게 조절이 되게 설정했습니다.

근데 아무리 스타일을 조정해도 그누보드 게시판 내에 기본으로 설정된 스타일 때문인지 따로 설정한 스타일 코드가 먹히질 않네요ㅜ 16:9 비율로 화면 꽉차게 설정한 패딩값이 그냥 진짜 패딩으로 인식되네요ㅠ


게시판에는 모바일반응형 유튜브를 올릴방법이 없을까요?
현재로서는 모바일에서 보이는 유튜브가 width="560" 에 고정되서 잘리네요;;;


<div class="videoWrapper" style="position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;" >
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
width="560" height="315" src="https://www.youtube.com/embed/4wKTZsUp7TQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
동영상 추가의 경우에는 본 테마에 포함한 video 게시판을 사용하시면 되는데, video 게시판이 아닌 기본 게시판에서 동영상을 추가하여야만 하는 상황이라면 아래와 같이 수정해 주세요.
단, 동영상의 종류가 많아 그 모두를 지원하려면, 대대적인 수정이 필요하기에 일단 Youtube 만을 지원하는 내용으로 말씀드립니다.

1. 기본 게시판의 style.css에 아래의 내용을 추가

.video-container,
.video-container-naver {
  padding-bottom: 56.25%;
}

.video-container-naver iframe,
.video-container embed,
.video-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


2. 기본 게시판의 view.skin.php에서 <!-- 본문 내용 시작 { --> 의 바로 위에 아래의 코드를 추가

<!-- Link 1에 입력한 Youtube 삽입 -->
<?php
$youtube = explode("/", $view['wr_link1']);

if($view['wr_link1']) {
?>
<div class="video-container relative pt-7 h-0 overflow-hidden">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/<?php echo end($youtube); ?>" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<?php } ?>


3. 본문 작성 시에 본문에 내용이 없으면, 입력이 되지 않으므로 필요한 내용을 입력하시고, 하단의 링크 1에 Youyube의 링크 주소를 입력하세요.
iframe이 아닌, https://youtu.be/XmlL6Yu0daE 와 같은 공유 주소를 입력하세요.


4. 그리고 동영상이 제대로 전체 폭으로 나타나는지 확인하세요.
만약 전체 폭으로 나오지 않는다면, 화면 고침 또는 강제 화면 고침을 하여 수정 사항이 반영되도록 해보시기 바랍니다.


그럼, 도움이 되는 답글이길 바랍니다.

감사합니다.
질문드립니다!
1. 상단왼쪽 헤드에 팩스를 추가하려고 하는데 부트스트랩 아이콘을 추가해도 뜨질않네요;; 기존 메일 아이콘이 bi-envelope 으로 되어있던데, 부트스트랩 사이트에서 검색해서 <i class="bi bi-envelope-paper"></i>이렇게 추가하니 뜨질않습니다;;; 추가로 설정해야하는 부분이 있나요?


2. 그리고 tail.php 파일을 수정했는데 메인index에 표시되는 tail.php 는 수정적용이 되는데 서브페이지에 나오는 tail.php 파일은 수정전파일로 뜨네요;; 경로설정을 따로 해줘야 하는건가요?
1. bootstrap-icons의 버전을 올려주셔야지만 지원 받을 수 있는 아이콘입니다.
따라서 head.sub.php에서 기존의 1.5 버전 관련 코드를 아래의 코드로 대체하시기 바랍니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

2. 서브 페이지의 태마 설정을 살펴보셔서 제대로 설정하셨는지 확인해 보세요.
관리자 메뉴의 게시판 또는 내용 관리에서 해당 게시판이나 내용의 테마 설정을 테마 (basic)로 설정하지 않아 발생하는 문제가 아닐까 합니다.
지원버전이 달랐군요! 감사합니다
서브페이지에 인식되는 tail.php 가 theme 폴더안의 파일이 아니라 theme 바깥의 tail.php 를 인식하더라고요.. 중복 수정했더니 해결되었습니다!
전체 188 |RSS
그누보드5 테마 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT