블로그 또는 웹 템플릿 샘플 사이트를 보다보면, 화면 한쪽에 다양한 컬러나 배경, 기타 옵션 선택을 통해 방문자가 페이지 스타일을 자유롭게 변경할수 있도록 하는 기능이 있는것을 종종 볼수 있다.


colorset1.jpg


다양한 용도로 활용할 수 있어서 알아두면 여러면에서 쓸모가 많은 기능이다.


이곳에는 컬러셋 변경에 대한 예를 들어 설명한다.


1. 컬러값을 배열로 지정한후, 기본값을 로드한다.

{@

$colorset_name = array("default","black","white","sky","blue","green","orange","purple","red","scarlet","yellow");

if(!$layout_info->colorset) $layout_info->colorset = 'random';

if(!in_array($layout_info->colorset$colorset_name )) $layout_info->colorset = $colorset_name[array_rand($colorset_name)];


$layout_info->colorset_path = './layouts/레이아웃/css/'.$layout_info->colorset.'.css';

$link_add = '<link rel="stylesheet" href="{$layout_info->colorset_path}" id="css_color" />';

Context::addHtmlHeader($link_add);

}


2. 아래 구문을 레이아웃 파일안에 추가한다.

<ul id="color_categ"></ul>


<script type="text/javascript">

//<![CDATA[

jQuery(document).ready(function ($) {

var cont=$('#color_categ');

var colors = {count($colorset_name)};

var allColors = '{implode("|", $colorset_name)}'.split("|");

var colorsLinks = '';

for (var i = 0; i < colors; i++) {

if(i < allColors.length) colorsLinks += '<li class="color'+i+'"><a href="javascript:void(0)" rel="'+allColors[i]+'"></a></li>';

}

cont.append(colorsLinks);


if($.cookie("쿠키명")) {

$('#css_color').attr('href', './layouts/레이아웃/css/'+$.cookie("쿠키명")+'.css');

}

$('#color_categ a').live("click", function(){

var set_color = $(this).attr('rel');

$('#css_color').attr('href', './layouts/레이아웃/css/'+set_color+'.css');

$.cookie("쿠키명", set_color);

});

});

//]]>

</script>



번호 제목 글쓴이 날짜 조회 수
61 XE 메일 발송 시 SMTP 서버 설정하는 방법 Study4U 2016.05.19 1193
60 ruleset 기본 예제 Study4U 2015.10.01 222
59 다국어 추가하는 방법 [1] Study4U 2015.07.24 208
» 레이아웃에 템플릿 또는 컬러셋 적용방법 file Study4U 2015.02.20 298
57 확장변수 항목에 required 와 placeholder 적용 file Study4U 2014.12.09 297
56 그룹에 따라 선택적으로 권한 부여하기 Study4U 2014.11.14 3836
55 XE Trigger 완전 정복하기 4편 file Study4U 2014.08.03 381
54 XE Trigger 완전 정복하기 3편 Study4U 2014.08.03 595
53 XE Trigger 완전 정복하기 2편 file Study4U 2014.08.03 784
52 XE Trigger 완전 정복하기 1편 file Study4U 2014.08.03 1149
51 XE 회원 메뉴 또는 팝업메뉴 추가, 편집방법 Study4U 2014.05.20 995
50 윈도우에서 웹서버 [ NGINX + PHP + MySQL ] 설치방법 Study4U 2012.11.08 7105
49 XE 모듈 만들기 Study4U 2012.09.13 7335
48 게시글 본문에 동영상이나 이미지 슬라이드가 자동 출력되게 하는 방법 [4] Study4U 2012.09.11 3390
47 소셜댓글을 게시판의 기본 댓글로 사용하는 방법입니다. Study4U 2012.09.10 3374
46 xe 슬라이더 사용방법 file Study4U 2012.07.21 3161
45 XE 에서 일반 PHP 구문 사용방법 Study4U 2012.07.03 5047
44 FLV, MP4 영상 출력 점검하기 file Study4U 2012.06.02 1947
43 미디어보드 사용 설명서 file Study4U 2012.05.23 1748
42 미디어 보드의 스킨 옵션 설명서입니다. file Study4U 2012.04.16 2594