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 해주셔야합니다.
이런식으로 빨간색 구문으로 조건식에 나왔던 인자값을 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 색상표 주소입니다.