Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

Style Switcher에서 7번 항목 상단 LNB 늘이기

안녕하세요. 아미나에서 놀다가 많이 배우고 있는 윈드씨입니다.

 

스타일 스위쳐의 기능적인 부분에 늘 감탄하면서

 

제가 원하는 스타일을 만들고자 코드를 보면서 수정했던 사항을 문서로 남겨보고자 글을 씁니다.

 

기준은 베이직 테마 기준이고 (미소테마를 구매하지 않아서 죄송 ㅠㅠ)

 

-Style Switcher에서 7번 항목 상단 LNB 색상 늘이기-

 

를 해보았습니다.

 

수정해주실 파일은 

 

1. thema\Basic\assets\switcher.php

2. thema\Basic\assets\js​\switcher.js

3. thema\Basic\colorset\Basic\colorset.css


입니다.


1. switcher.php​ 82번 줄


<h3>7. LNB Style</h3>

<div class="layout-style">

<select id="lnb-style" name="at_set[lnb]">

<option value="">White</option>

<option value="at-lnb-gray"<?php echo ($at_set['lnb'] == "at-lnb-gray") ? ' selected' : '';?>>Gray</option>

<option value="at-lnb-dark"<?php echo ($at_set['lnb'] == "at-lnb-dark") ? ' selected' : '';?>>Black</option>

</select>

</div>


에서 원하시는 만큼 option 값을 추가 해줍니다.


<option value="at-lnb-원하시는 색상(영문으로)"<?php echo ($at_set['lnb'] == "at-lnb-원하시는 색상​(영문으로)") ? ' selected' : '';?>>원하시는 색상(영문으로)</option>


옵션 태그 사이의 텍스트는 드롭다운 리스트에 표시는 되는 문자이니 한글로 코딩하셔도 상관은 없습니다. (알아보기 편하게)


2. switcher.php​ 80번 줄


        //LNB Style

$("#lnb-style").change(function(e){

if($(this).val() == "at-lnb-dark"){

$(".at-lnb").removeClass("at-lnb-gray");

$(".at-lnb").addClass("at-lnb-dark");

$(window).resize();

} else if($(this).val() == "at-lnb-gray"){

$(".at-lnb").removeClass("at-lnb-dark");

$(".at-lnb").addClass("at-lnb-gray");

$(window).resize();

} else{

$(".at-lnb").removeClass("at-lnb-gray");

$(".at-lnb").removeClass("at-lnb-dark");

$(window).resize();

}

});


에서는 추가한 색상 만큼 else if 문이 들어가야합니다.


마지막 else 문은 기본값인 white 를 선택했을때의 처리문이고요


만약 제가 Blue 를 추가했다면 모든 구문에는 Blue 색상을 removeClass를 추가해주셔야합니다.


($(this).val() == "at-lnb-gray")

 

조건식에서 선택되지 않은 색상은 모두 removeClass 해주셔야합니다.


//LNB Style
$("#lnb-style").change(function(e){
if($(this).val() == "at-lnb-dark"){
$(".at-lnb").removeClass("at-lnb-gray");
$(".at-lnb").removeClass("at-lnb-blue");
$(".at-lnb").addClass("at-lnb-dark");
$(window).resize();
} else if($(this).val() == "at-lnb-gray"){
$(".at-lnb").removeClass("at-lnb-dark");
$(".at-lnb").removeClass("at-lnb-blue");
$(".at-lnb").addClass("at-lnb-gray");
$(window).resize();
} else if($(this).val() == "at-lnb-blue"){
$(".at-lnb").removeClass("at-lnb-dark");
$(".at-lnb").addClass("at-lnb-blue");
$(".at-lnb").removeClass("at-lnb-gray");
$(window).resize();
} else{
$(".at-lnb").removeClass("at-lnb-gray");
$(".at-lnb").removeClass("at-lnb-dark");
$(".at-lnb").removeClass("at-lnb-blue");
$(window).resize();
}
});


이런식으로​ 빨간색 구문으로 조건식에 나왔던 인자값을 addClass 로 추가 해줍니다.

나머지 색은 전부 removeClass 


만약 5색상이면 조건문이 5개 이겠죠?

더있다면 그 색상 갯수 만큼의 조건문이 존재하게됩니다.

그리고 그 조건문안에 명령문도 흰색을 뺀 나머지 갯수가 됩니다.

 


3. colorset.css 122번 줄​ 


아래 내용에 색상값이 정의 되어있는 부분이 있습니다.


js 조건문의 클레스의 값과 같아야합니다. 

1번 내용의 option 에서 원하는 색상을 넣으셨던 값하고 같아야하고요.


--------------------------------------------------------------------------------------


.at-lnb-dark.at-lnb { background: rgb(2, 2, 2); border-bottom-color: rgb(34, 34, 34); border-bottom-width: 1px; border-bottom-style: solid; }

.at-lnb-dark.at-lnb .at-lnb-icon > ul.menu > li { border-color: rgb(34, 34, 34); }

.at-lnb-dark.at-lnb .at-lnb-icon > ul.menu > li > a { color: rgb(255, 255, 255); }

.at-lnb-dark.at-lnb .at-lnb-menu > ul.menu > li { border-color: rgb(34, 34, 34); }

.at-lnb-dark.at-lnb .at-lnb-menu > ul.menu > li > a { color: rgb(255, 255, 255); }


.at-lnb-gray.at-lnb { background: rgb(248, 248, 248); border-bottom-color: rgb(228, 228, 228); border-bottom-width: 1px; border-bottom-style: solid; }

.at-lnb-gray.at-lnb .at-lnb-icon > ul.menu > li { border-color: rgb(228, 228, 228); }

.at-lnb-gray.at-lnb .at-lnb-icon > ul.menu > li > a { color: rgb(51, 51, 51); }

.at-lnb-gray.at-lnb .at-lnb-menu > ul.menu > li { border-color: rgb(228, 228, 228); }

.at-lnb-gray.at-lnb .at-lnb-menu > ul.menu > li > a { color: rgb(51, 51, 51); }


--------------------------------------------------------------------------------------------------


.at-lnb-원하는색상(영문으로).at-lnb { background: rgb(원하는 색상의 RGB 값); border-bottom-color: rgb(228, 228, 228); border-bottom-width: 1px; border-bottom-style: solid; }

.at-lnb-원하는색상.at-lnb .at-lnb-icon > ul.menu > li { border-color: rgb(228, 228, 228); } //아이콘색

.at-lnb-원하는색상.at-lnb .at-lnb-icon > ul.menu > li > a { color: rgb(51, 51, 51); } //아이콘색

.at-lnb-원하는색상.at-lnb .at-lnb-menu > ul.menu > li { border-color: rgb(228, 228, 228); }

.at-lnb-원하는색상.at-lnb .at-lnb-menu > ul.menu > li > a { color: rgb(51, 51, 51); }


-------------------------------------------------------------------------------------


원하시는 색상의 개수 만큼 블럭을 복사해서 RGB색상값을 넣어주시면됩니다.


- 그리고 투명도를 주시고 싶으시다면 

rgb(원하는 색상의 RGB 값);


대신에​


 rgba(원하는 색상의 RGB 값(N,N,N) , 투명도(1에서 0까지 소수점으로 표기 );


로 바꾸시면 됩니다.


http://html-color-codes.info/Korean/#Html_Color_Chart


여기는 HTML 색상표 주소입니다.


 

6 Comments
8 우성군 2014.12.14 21:57  
컬러 선택하는게 더 어려운 것 같습니다. ㅠㅠ

좋은 정보 고맙습니다. ㅎㅎ
6 희망규짱 2014.12.14 22:04  
아 저도 공감해요 ㅎ
컬러 선택하기 참 힘들죠.
16 까꿍아비 2014.12.14 23:22  
좋은 정보 고맙습니다~~
9 Tony 2014.12.14 23:57  
html 색상표 사이트가 따로있었네요..
http://search.naver.com/search.naver?where=nexearch&query=html+%EC%83%89%EC%83%81%ED%91%9C&sm=top_hty&fbm=0&ie=utf8

네이버 색상표만 쓰는지라..
1 하이윈드군 2014.12.15 00:05  
초창기에는 보더가 큰 테이블 안에 색상하고 색상값이 들어있는 페이지만 따로 나돌아다니곤 했습니다. 지금도 존재하고요.  -_- 삽질스러운 일이지요. 프로그램적인 요소가 거의 없다 시피 하던 때 말이지만요 ㅋㅎ
9 Tony 2014.12.15 00:18  
지금은 예전보다 세상참 좋아졌죠 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand