VK03 테마
01
테마 설치
그누보드 설치 후 위즈테마 파일을 업로드하면 설치 안내 팝업이 자동으로 표시됩니다.
설치 안내
그누보드 설치가 완료된 후 제공받은 위즈테마 파일을 업로드하면 설치 안내 팝업이 자동으로 표시됩니다.
신규로 그누보드를 설치한 경우에는 [자동설치] 버튼을 클릭하면 샘플 테마와 동일한 구성으로 메뉴, 게시판, 기본 설정이 자동 적용됩니다.
기존에 운영 중인 홈페이지에 테마를 적용하는 경우에는 사이트의 기존 설정과 데이터 구조를 고려해야 하므로 [닫기] 버튼을 눌러 자동설치를 종료한 뒤 수동 설치로 진행해 주세요.
수동 설치에 대한 자세한 내용은 [설명서 보기] 버튼을 통해 확인하실 수 있습니다.
위즈테마 VK03설치
위즈테마 VK03를 설치하시겠습니까?
기존 홈페이지를 운영 중이라면 자동설치 대신 닫기를 누른 후
수동으로 설정하시기 바랍니다.
수동으로 설정하시기 바랍니다.
수동설치로 진행하실 경우 wiz.init.php의 #wizthemeInstallLayer 팝업 코드를 제거하세요.
02
페이지 추가
관리자 메뉴 설정을 이용하면 VK03 테마의 구조에 맞춰 자동으로 메뉴가 구성됩니다.
관리자에서 메뉴 생성
VK03 테마는 관리자페이지 > 환경설정 > 메뉴설정에서 일반페이지 또는 게시판을 생성하면 자동으로 셋팅됩니다.
03
CSS 경로
테마 수정 시 자주 사용하는 CSS 파일 위치입니다.
css경로
/wzd_lib/font_defualt.css 기본 폰트 셋팅
/wzd_lib/common.css 기본 팝업등
/wzd_lib/css/layout.css 메인 및 전체 레이아웃
/wzd_lib/css/sub.css 서브 컨텐츠
/wzd_lib/css/responsive.css 메인 및 전체 레이아웃 반응형
/wzd_lib/css/sub_responsive.css 서브 컨텐츠 레이아웃 반응형
/wzd_lib//css/index-slick.css 메인 비주얼 슬라이드
04
로고 수정
테마 로고 이미지와 관련 CSS 수정 방법입니다.
로고수정
/wzd_lib/css/layout.css
head.php 로고 경로 : /img/common/logo.png
logo.png 는 로고 2개를 이어 붙힌 이미지입니다.
height: 19px; 는 두개의 로고중 상단 첫번째 사이즈를 입력하시면 됩니다.
.header h1 a {
overflow: hidden;
display: block;
height: 19px; // 로고 1/2 세로 사이즈
background: url('../../img/common/logo.png') 0 0 no-repeat;
text-indent: -9999px;
}
05
상단 네비게이션
상단 메뉴의 폰트, 간격, hover 영역을 조절하는 방법입니다.
상단 네비게이션
head.php
대메뉴 폰트 조절
.header .gnb li {
float: left;
width: 170px; // 네비게이션 가로 간격
text-align: left;
}
.header .gnb .depth1>a {
display: block;
height: 57px;
padding: 40px 0 0;
font-size: 20px; //메인 네비 폰트 사이즈
}
#header.all {
height: 350px; // 마우스 올리면 떨어지는 전체배경 세로 높이
background: #fff;
z-index: 1100;
}
#header.all:before {
position: absolute;
left: 0;
top: 95px; //메인메뉴와 서브메뉴의 상단 간격
width: 100%;
height: 260px; // 마우스 올리면 떨어지는 배경 세로 높이
background: #f1f1f3; // 떨어지는 메뉴 배경 색상
content: "";
}소메뉴 폰트 조절
header .nav .depth02>li a {
color: #000;
display: block;
padding: 10px 0; // 10px 상하 높이
transition: .4s;
font-size: 16px;
font-family: 'Poppins', 'NotoSans', sans-serif;
}메뉴 hover시 백그라운드 높이 조절
.header.down .gnb-bg {
height: 220px;
}
06
메인 비주얼
메인 슬라이드 이미지, 영상, 문구를 수정하는 방법입니다.
메인비주얼
index.php
이미지 변경
vk테마의 상단 메인 비주얼은 index.php에 있습니다.
<div class="swiper-slide slide00">
... 안의 내용이 상단 슬라이드 비주얼 영역
</div>
https://placehold.co/1920x1024 를 이미지 경로에 맞게 변경하세요
<div class="slide-image slide-media" style="background-image:url('https://placehold.co/1920x1045.jpg');">
예)
<div class="slide-image slide-media" style="background-image:url('<?php echo G5_THEME_URL?>/img/main/visual01.jpg');">유튜브 주소변경
https://www.youtube.com/watch?v=QV5EXOFcdrQ 주소형식이 같게 변경
----------------------------------------------------------------
<!-- 슬라이드02 유튜브-->
<div id='bgPlayer1' class="item item02 youtube">
<figcaption class="caption">
<div class="container">
<h1 class="wiz_swiper">YOUTUBE <br> PLAYERS CODE</h1>
<div class="line wiz_swiper"></div>
<p class="wiz_swiper">위즈테마템플릿 VK02버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
</div>
</figcaption>
<div id="bgPlayer" class="player" data-property="{useOnMobile:true,mobileFallbackImage:'http://theme03.wiztheme.net/slider2.jpg',videoURL:'https://www.youtube.com/watch?v=QV5EXOFcdrQ',vol:'90',stopMovieOnBlur:false,containment:'#bgPlayer1',showControls:false,startAt:0,mute:true,autoPlay:true,loop:true,opacity:1,quality:'highres',optimizeDisplay:true}">
</div>
<div class="overlay data-overlay" data-overlay="0,0,0, 0.5"></div>
</div>
<!-- 슬라이드02 유튜브 마감 -->
슬라이드 폰트 크기 등 css변경
/wzd_lib/css/index-slick.css
.main-slider .caption h1 { //큰 글씨
color: #fff;
font-size: 54px;
line-height: 66px;
font-weight: 900;
font-family: 'Poppins', 'NotoSans', sans-serif;
transition-delay: .6s;
transition-duration: 1.2s;
transform: translateX(-5%);
}
.main-slider .caption p { //작은 글씨
color: #fff;
font-size: 19px;
line-height: 29px;
font-weight: 400;
margin-top: 24px;
color: rgba(255, 255, 255, .5);
margin-bottom: 0;
font-family: 'Poppins', 'NotoSans', sans-serif;
transition-delay: .6s;
transition-duration: 1.2s;
transform: translateX(-5%);
}
슬라이드 추가 및 삭제
기존소스에서 하나 더 추가
<div class="item item03 image">
<figure>
<div class="slide-image slide-media" style="background-image:url('<?php echo G5_THEME_URL?>/img/main/visual_02.jpg?ver=<?php echo G5_CSS_VER; ?>');">
</div>
<figcaption class="caption">
<div class="container">
<h1 class="wiz_swiper">고객과 함께 행복한 사회 <br class="hidden-sm hidden-xs"> 쉽게 만드는 위즈테마</h1>
<div class="line wiz_swiper"></div>
<p class="wiz_swiper">위즈테마템플릿 VK02버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
</div>
</figcaption>
</figure>
</div>
<!-- 추가 -->
<div class="item item04 image">
<figure>
<div class="slide-image slide-media" style="background-image:url('<?php echo G5_THEME_URL?>/img/main/visual_02.jpg?ver=<?php echo G5_CSS_VER; ?>');"></div/>
<figcaption class="caption">
<div class="container">
<h1 class="wiz_swiper">고객과 함께 행복한 사회 <br class="hidden-sm hidden-xs"> 쉽게 만드는 위즈테마</h1>
<div class="line wiz_swiper"></div>
<p class="wiz_swiper">위즈테마템플릿 VK02버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
</div>
</figcaption>
</figure>
</div>
<!-- 추가 마감 -->
07
메인 온라인 문의
메인 온라인 문의 영역 설정 방법입니다.
메인 온라인 문의
index.php
메인 온라인문의에서 글을 남길시 "value="online"" 실제 온라인문의의 게시판테이블명을 수정해 주세요.
<input type=hidden name=bo_table value="online"> <!-- 글 넘겨올 게시판 아이디 -->