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

GnuTailwindcss v0.3.0 Dark Mode 지원

· 3년 전 · 16700 · 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개

저의 아이폰에서 크롬으로 보면 아무 문제가 없는데, 왜 그런 증상이 나오는지 모르겠네요.
어쨌든, 문의하신 내용에 대해 말씀 드리겠습니다.

1. 로고의 크기 조절
- head.php의 라인 95에서 class를 추가하여 이미지의 사이즈를 조절하시면 됩니다.

- 수정 전
<a href="<?php echo G5_URL ?>" class="text-lg font-semibold tracking-widest text-indigo-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"><img src="<?php echo G5_THEME_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>"></a>

- 수정 후
<a href="<?php echo G5_URL ?>" class="text-lg font-semibold tracking-widest text-indigo-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"><img src="<?php echo G5_THEME_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>" class="h-6 md:h-auto"></a>

화면 폭이 md까지는 h-auto가 적용되어 일반 크기를 유지하고, md 이하로 줄어들면 높이를 h-6으로 조절하여 약간 작게 조절합니다.
여기에서 h 다음의 숫자를 조절하여 미세하게 조절하실 수 있고, md 대신 lg 등을 사용하여 더 넓은 폭에서 높이의 변화를 주실 수도 있으니, 이 두 가지 요소에 대해 원하는 설정을 해주시기 바랍니다.

2. 검색 아이콘을 최대한 오른쪽으로 붙게 하는 법
css > default.css에서 search-icon을 찾으셔서 left: 50%의 수치를 조절하세요.
숫자를 크게 하면 오른쪽으로 그만큼 이동하게 됩니다.
이 내용은 화면 폭이 1023px 보다 작은 경우에 동작하게 되므로, 원하시는 결과를 얻으실 수 있지 않을까 합니다.

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

감사합니다.
완벽한데요. 잘 해결 되었습니다. 너무 감사합니다. 친절하신 답변에 거듭 감사드립니다.
태마가 딱 제 맘에 드는 태마인데요.... 최근게시물 작업을 어디서 어떻게 해야되나요?
아직까지는 완전 생초보라 여쭤봅니다
좀 알려주시면 감사할것 같아요
최근 게시물의 경우는 일반 모드에서는 문제가 없으나, Dark 모드는 아직 작업하지 않은 관계로 일반 모드로 그대로 나와 좀 흉칙한 모양새가 나오게 되니 이점 양해해 주시기 바랍니다. ^^

일단 최신 게시물을 사용하시려면, 내려 받으신 테마 소스의 폴더에 있는 index.latest.php를 활용하시면 됩니다.

여기에서 두 가지 방법이 있으며, index 페이지 전체를 최신글 모음 위주로 꾸미는 방법과 현재의 페이지를 유지하면서 중간에 최신 게시글 소스를 삽입하여 화면 일부만 꾸미는 방법이 있습니다.

1. 화면 전체를 바꾸는 방법
- 먼저 현재의 index.php의 파일명을 다른 이름으로 임의로 변경
- 그 후에 index_latest.php의 파일명을 index.php로 변경
- 그런 후에 화면 고침을 하시면 최신글 위주로 구성한 메인 페이지를 보실 수 있습니다.

2. 화면 일부만 바꾸는 방법
- index_latest에 있는 최신글 관련 코드만을 복사하여 현재의 index.php에 추가
- 이 경우에는 index_latest.php의 라인 75에서 시작하는 최신글 관련 코드 전체(즉, section 전체)를 복사해 넣을 수도 있고, 다음과 같이 일부만 추가하실 수도 있습니다.

<section class="latest_wr mt-12">
<div class="container mx-auto sm: px-4 text-white relative">
<h2 class="sound_only">최신글</h2>
<div class="latest_top_wr grid grid-cols-1 md:grid-cols-2 gap-4 text-black">
<div>
<?php echo latest('theme/tail_basic', 'basic', 4, 23); ?>
</div>
<div>
<?php echo latest('theme/tail_basic', 'qa', 4, 23); ?>
</div>
</div>
이 부분에 최신글 블록을 더 추가하실 수도 있습니다.
</div>

위에서 말씀 드린 최신글 블록이란 다음과 같은 구성을 의미합니다.
<div class="latest_top_wr grid grid-cols-1 md:grid-cols-2 gap-4 text-black">
<div>
<?php echo latest('theme/tail_pic_block', 'gallery', 4, 23); ?>
</div>
<div>
<?php echo latest('theme/tail_pic_block', 'gallery', 4, 23); ?>
</div>
</div>

소스에도 각주로 내용이 적혀 있지만,
latest(스킨, 게시판아이디, 출력라인, 글자수)와 같은 규칙 대로 적용하시면 됩니다.

좀 복잡하죠? ^^

이 정도가 제가 알려드릴 수 있는 내용의 전부가 아닐까 하며, 도움이 되길 바랍니다.

감사합니다.
좋은테마 정말 감사드려요!
좋게 보아주셔서 감사드립니다. ^^
피앙세님 감사합니다
일단은 메인페이지를 홈페이지 소개 용도로 수정했구요
최근게시물은 아직 작업전이긴한데... 좀있다 작업할려구요....
작업이 원하시는 대로 원활하게 이루어지기 바랍니다.
감사합니다.
피앙새님 주메뉴에 마우스를 오버하면 서브메뉴가 내려오게 할려면 어떻게 해야할까요?
며칠째 고생하던 중 다시 도움을 청합니다.
head.php의 코드에서 다음과 같이 수정하세요.

1.라인 101, 102, 127, 128
@click.away= 을 @mouseleave= 로 변경
@click= 을 @mouseover= 로 변경

2. 라인 109, 134
class="absolute right-0 w-full의 내용을 찾아 top-0 pt-8을 추가

마우스를 올렸을 때, 배경색이 바뀌는 동작에서 일부 이상을 보이기는 하는데, 이 부분은 아직 해결책을 찾지 못했으니 양해 바랍니다.

그리고, 위의 1의 내용을 라인 156에 있는 hamburger 메뉴에는 적용하지 않는 게 좋을 것으로 사료됩니다.

그럼, 원하시는 답글이면 좋겠네요.

감사합니다.

게시글 목록

번호 제목
7794
7698
7516
7495
7433
7314
7194
7113
7110
6928
6858
6733