테마에 필요한 이미지 준비 및 메인페이지 html 수정 안내 > 테마소개

본문 바로가기
사이드메뉴 열기

테마소개 HOME

테마에 필요한 이미지 준비 및 메인페이지 html 수정 안내

페이지 정보

작성자 웹사이팅 댓글 0건 조회 2,105회 작성일 18-02-20 12:25

본문

이미지 준비

본 테마에 기본적으로 필요한 이미지입니다.
이미지는 아래의 사이즈와 파일명으로 제작 후 ftp로 업로드 하시면 됩니다.
이미지의 경로 : 그누보드설치폴더/theme/purewhite/img/ #. 각 이미지별 부분 psd 파일이 필요할 경우 해당 테마 구입페이지의 Q&A로 이메일 주소를 남겨주시면 구매자 확인 후 메일로 발송해 드리고 있습니다.

로고 파일

  • 상단 로고파일 : logo.png (가로: 580px , 세로: 80px)
  • 하단 로고파일 : footerLogo.png (가로: 290px , 세로: 40px)


메인 비주얼이미지(슬라이더용)

  • mainImg01.jpg , mainImg02.jpg , mainImg03.jpg
  • 위 파일명을 기준으로 하여 필요한 이미지 수 만큼 제작해 주신 후 업로드 하시면 됩니다.
    (가로: 1920px , 세로: 900px)


서브페이지 상단용 이미지

  • subTopBg_0.jpg , subTopBg_01.jpg , subTopBg_02.jpg , subTopBg_03.jpg , subTopBg_04.jpg , subTopBg_05.jpg
  • 위 파일명을 기준으로 하여 필요한 이미지 수 만큼 제작해 주신 후 업로드 하시면 됩니다.
    (가로: 1920px , 세로: 500px)

subTopBg_0.jpg 이미지는 메뉴관리에서 지정되지 않은 페이지에 접속 했을 때 나오는 이미지이므로 꼭 등록해 주셔야 합니다.
subTopBg_01.jpg 은 메뉴관리 기준으로 첫번째 메뉴의 배경이미지 , subTopBg_02.jpg 은 메뉴관리 기준으로 두번째 메뉴의 배경이미지로 적용됩니다.

메뉴관리에서 1차메뉴 갯수가 7개를 넘어간다면 theme/purewhite/css/default.css 169번째 줄 부근 아래 코드를 참고하시어 늘리거나 줄여주시면 됩니다.

#page_title.subTopBg_0,
#page_title.subTopBg_00{background-image:URL("../img/subTopBg_0.jpg");} /* 메뉴설정이 없는 페이지에서 출력될 이미지 : 해당 테마의 img 폴더에 업로드하시기 바랍니다. */
#page_title.subTopBg_01{background-image:URL("../img/subTopBg_01.jpg");} /* 첫번째 대메뉴에서 출력될 이미지 */
#page_title.subTopBg_02{background-image:URL("../img/subTopBg_02.jpg");} /* 두번째 대메뉴에서 출력될 이미지 */
#page_title.subTopBg_03{background-image:URL("../img/subTopBg_03.jpg");} /* 세번째 대메뉴에서 출력될 이미지 */
#page_title.subTopBg_04{background-image:URL("../img/subTopBg_04.jpg");} /* 네번째 대메뉴에서 출력될 이미지 */
#page_title.subTopBg_05{background-image:URL("../img/subTopBg_05.jpg");} /* 다섯번째 대메뉴에서 출력될 이미지 */
#page_title.subTopBg_06{background-image:URL("../img/subTopBg_06.jpg");} /* 여섯번째 대메뉴에서 출력될 이미지 */
#page_title.subTopBg_07{background-image:URL("../img/subTopBg_07.jpg");} /* 일곱번째 대메뉴에서 출력될 이미지 */
#page_title.subTopBg_0N{background-image:URL("");} /* n번째 대메뉴에서 출력될 이미지를 추가해 주세요 */
		


index.php 코드수정

theme/purewhite/index.php 파일을 기준으로 한 설명입니다.
해당 테마의 index.php 파일을 에디터 프로그램(메모장, 에디트플러스, 노트패드, 울트라 에디트 등)으로 오픈하여 수정해 줍니다.

메인 비주얼 슬라이더 수정

  • 빨강 : 이미지의 경로입니다.
  • 파랑 : 굵은글씨 부분입니다.
  • 녹색 : 서브타이틀 입니다.
  • 보라 : 해당 슬라이더의 링크(링크가 없을 경우 비워두시면 됩니다).
<section class="mainVisualImage hiddAction">
	<ul>
		<li>
			<img src="<?php echo G5_THEME_IMG_URL ?>/mainImg01.jpg" alt="">
			<h2 class="mvTit01">그누보드5.3 기반</h2>
			<div class="mvTit02">
				<p class="mvTit02txt">퓨어화이트 반응형 홈페이지 테마</p>
				<a href="#" class="mvLink"><b>자세히보기</b></a>
			</div>
		</li>
		<li>
			<img src="<?php echo G5_THEME_IMG_URL ?>/mainImg02.jpg" alt="">
			<h2 class="mvTit01">PURE WHITE</h2>
			<div class="mvTit02">
				<p class="mvTit02txt">그누보드5 반응형 홈페이지 테마</p>
				<a href="#" class="mvLink"><b>자세히보기</b></a>
			</div>
		</li>
		/* 슬라이더의 갯수를 늘리거나 줄이시면 아래 <li>.....</li> 부분을 늘리거나 줄여주시면 됩니다. */
		<li>
			<img src="<?php echo G5_THEME_IMG_URL ?>/mainImg03.jpg" alt="">
			<h2 class="mvTit01">GNUBOARD5.3 BASE</h2>
			<div class="mvTit02">
				<p class="mvTit02txt">퓨어화이트 반응형 테마</p>
				<a href="#" class="mvLink"><b>자세히보기</b></a>
			</div>
		</li>
	</ul>
</section>
		


최신글 코드 수정

  • theme/purewhite/index.php , theme/purewhite/index.simple.php , theme/purewhite/index.product.php 파일을 참고하시어
    생성된 게시판 및 그에 맞는 최신글 스킨을 설정해 주시면 됩니다.
	<?php
	/* 박스형 갤러리 게시판 최신글 */
	// 사용방법 : latest('theme/최신글스킨폴더', '게시판아이디', 출력라인, 글자수);
	echo latest('theme/gallery_box', 'gallery_box', 5, 24);
	?>
		

최신글스킨 종류
theme/purewhite/skin/latest/...

  • theme/basic : 기본적인 최신글 스킨입니다.
  • theme/qna : qna 게시판 스킨과 세트로 활용할 수 있는 스킨입니다.(접수완료, 답변완료 표시)
  • theme/gallery : 기본적인 갤러리 게시판 최신글 스킨입니다.(게시판 설정의 이미지 가로세로에 맞춰 자동으로 썸네일 이미지가 생성됩니다.)
  • theme/gallery_box : 박스형 갤러리 최신글 스킨입니다.(게시판 설정의 이미지 가로세로에 맞춰 자동으로 썸네일 이미지가 생성됩니다.)
  • theme/product : 좌우로 슬라이딩 되는 최신글 스킨입니다. 제품소개 게시판, 갤러리형 게시판에 주로 이용됩니다.
  • theme/webzine : 웹진형 게시판 스킨과 세트로 활용할 수 있는 스킨입니다.

댓글목록

등록된 댓글이 없습니다.

Total 8 / 1 page

테마소개 목록

게시물 검색

커스텀배너 for HTML