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

GnuTailwindcss v0.3.0 Dark Mode 지원

· 3년 전 · 16689 · 187
screenshot.png

GnuTailwindcss v0.2.1에 Dark Mode를 추가한 버전입니다.
그외에 Video 게시판의 Naver TV와 관련한 오류를 수정했으며, 기존의 레이아웃을 일부 수정하였습니다.

이번에도 두서없이 작업하느라 GnuTailwindcss v0.2.1의 경우와 같이 부족한 부분이 많고, 자잘한 버그가 많겠지만, 이 또한 이해해주실 것으로 믿습니다. ^^

'일반 모드'와 '다크 모드' 간의 전환은 상단의 Navbar 오른쪽에 있는 해/달 아이콘을 클릭하시면 됩니다.
참고로, 최신글 위주로 구성한 index 파일(index_latest.php)과 최신글 스킨들은 Dark Mode를 적용하지 않은 상태입니다.


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

그누보드 5.3.x에서는 사용할 수 없으며, 5.4 이상에서 사용이 가능합니다.
 

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

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

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

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

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

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

그럼, 즐거운 연말 보내시고, 올 한 해 잘 마무리하시기 바랍니다.
감사합니다.

댓글 작성

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

로그인하기

댓글 187개

소중한 자료 감사합니다. 초보인데, 저에게 너무나 보석과도 같은 자료네요
건강하시고, 앞으로 하시는 일 모두 만사 형통하시길 바랍니다!
미비된 부분이 있더라도 양해하여 주시고, 사용에 어려움이 없길 바랍니다.
한풍 님의 생활에도 항상 행운이 함께 하길 바랍니다.
감사합니다. ^^
2년 전
소중한 자료를 공개해주셔서 저도 아주 큰 도움을 받았습니다.
웹을 시작한지 몇 일 안되었지만 덕분에 홈페이지를 운영하게 되었습니다.
감사드립니다^^

혼자서 헤매다가 해결이 안되어서 여쭤봅니다.
slick 슬라이드에서 자동으로 넘어가는 시간 조절은 어디서 하나요?
안녕하세요?

올려주신 글을 이제서야 보게 되었기에 답글이 늦어졌네요.

말씀하신 slick slider의 옵션은 tail.php에서 설정하실 수 있습니다.
라인 124에 있는 <!-- Initialize Slick --> 아래에 다음과 같이 설정하시면 됩니다.

autoplay: true, 밑에 autoplaySpeed: 2000, 등과 같이 입력해 주시면 됩니다.
참고로, ms 단위이므로 2초는 2000, 3초는 3000 등으로 설정하시면 됩니다.

홈페이지를 운영하시게 되셨다니 축하의 마음을 전하며, 사이트가 번창하길 바랍니다. ^^

감사합니다.
닥크모드가 인기가 좋아요 그래서 추천합니다
그런데 게시판이 적어요
다크 모드가 인기가 많다니 다행이네요.
그런데 게시판이 적다는 의미는 무엇일까요?
게시판의 대부분이 일반, 앨범, 웹진, 비디오 등이며, 그에 관한 형태는 모두 있는데, 그 이외에 다른 형태가 또 있는 걸까요?
그게 무엇일지 살짝 궁금해지네요.
적다고 하신 의미에 다른 뜻이 있는 것인가, 하는 생각이 들기도 하고요.
[http://sir.kr/data/editor/2308/c2264bb21a3b2b756f7de11b61e1b029_1691764754_4469.jpg]
초보자 설치를 했는데 애러가 나네요
그림과 같이 수정방법 쫌 알려주세요
감사합니다.
그누보드의 버전이 5.4.X이고, 변형하지 않은 순수 그누보드라면 위의 이미지와 같은 현상이 발생하지 않을 것으로 생각합니다.
우선, 그누보드의 버전이 본 테마의 지원 환경에 맞는지 확인해 보시는 것이 좋을 듯합니다.
만약, 버전이 다르다거나, 순수 그누보드가 아니라면, 버전이 맞는 순수 그누보드로 재설치하시는 것을 권합니다.

본 테마가 지원하는 버전이 아니라거나, 혹은 버전이 맞는데도 위의 현상이 나타난다면 일단 아래와 같이 진행해 보시기 바랍니다.

지금의 현상은 레이아웃이 어긋나는 문제이므로 해당 홈페이지의 소스 중에서 해당 부분의 css가 어떻게 구성되어 있는지를 알아야 정확하게 손을 볼 수 있을 텐데, 지금은 그런 상황이 아니니, 일단 화면 상으로 보아서 판단한다면, 대략 다음과 같은 과정을 거쳐 수정하셔야 할 것으로 생각합니다.

해당 게시판 폴더(Webzine 게시판이 아닐까 합니다.)의 style.css의 라인 34(본 테마 기준임)에 있는 #bo_v_sns li a {} 부분에 display: flex; align-items: center를 추가해 보시면 어떨까 합니다.

그리고 추천, 비추천이 원래는 이미지 상단의 우측에 나타나야 하는데, 이렇듯 범위를 벗어나 있다는 게 좀 이해가 가지 않네요.
그래도 살펴볼 부분을 말씀드리면, 해당 게시판(갤러리 게시판이 아닐까 합니다.)의 폴더에서 list.skin.php의 라인 152의 class="gall_option이 있는 부분에서 left-8을 right-x 의 형식(여기에서 x는 숫자입니다.)으로 바꿔서 어떻게 변화하는지 살펴보시면서 해결책을 찾는 것이 어떻까 합니다.
이 부분은 구성이 다소 복잡하여, 현재 해당 홈페이지의 소스를 살펴보기 전에는 무어라 말씀드리가 어렵다는 점을 양해하여 주시면 고맙겠습니다.

웹 브라우저의 개발자 도구에서 해당 부분의 css 적용이 어떻게 되고 있는지 확인하시면서 손을 보실 것을 권합니다.
[http://sir.kr/data/editor/2308/baf06fac2d6b01d626bda709d9ef2129_1692159673_4022.png]

위의 그림도 수정이 안되고 지금 이그림도 글쓰기 관리자 모두 안나타나고 그러네요
한번 봐주세요
http://selfjunsu.dothome.co.kr/bbs/board.php?bo_table=gallery
소스 확인을 위해 알려주신 주소로 접속하였으나 글을 볼 권한이 없다고 해서 비회원이어서 그런가 보다 하고 가입을 했는데, 가입을 해도 글을 볼 권한이 없다고 나오네요. ㅠㅠ
게시글을 볼 수 있도록 해당 게시판의 글보기 권한을 레벨 2로 낮춰주셔야 할 듯하네요.
아니면 user1234로 가입했으니, 이 사용자의 권한을 글을 볼 수 있는 권한으로 임시 조정해 주셔도 되겠구요.

게시글 목록

번호 제목
10417
10319
10312
10281
10244
10110
9656
9529
9500
9442
9387
9351