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


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>