나만의 테마를 만들어 보자. > jquery

정말 오랫만에 글을 쓴다.

지난번에 말한 것처럼 css도 주무르면서 메인 페이지를 만들어 보자.

우선 jquerymobile은 5개의 테마가 있다는 것은 지난번에 말해서 알고 있을 것이다.

그 5개의 테마에 버튼, 리스트 등을 각각 다른 형태로 조합 해서 새로운 모습을 만들 수 있다.

하지만 테마 자체를 나만의 테마로 만들 수 있다면 얼마나 좋을까?

그게 가능하다. 그래봤자 색상 조절 또는 아이콘 바꾸기 정도 되겠지만.. 그게 어디인가...

이제 연두색 테마, 보라색 테마, 은갈치색 테마 등등 나만의 테마가 가능해 진다.

이제부터 그 방법을 펼쳐 보이고자 한다. (별거 없음.. css 파일 하나 조절 하면 되는 것을..)

앞에서 받은 파일 중에 보면 jquery.mobile-1.0.a4.css 라는 녀석이 있을 것이다. (버전 업 되면 달라 지겠지만..)

그거 보면 제일 윗쪽에

/* A
-----------------------------------------------------------------------------------------------------------*/

.ui-bar-a {
 border: 1px solid   #2A2A2A;
 background:    #111111;
 color:      #ffffff;
 font-weight: bold;
 text-shadow: 0 -1px 1px #000000;
 background-image: -moz-linear-gradient(top, 
       #3c3c3c, 
       #111111);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,  #3c3c3c),
  color-stop(1,   #111111));
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')";
}
.ui-bar-a, 
.ui-bar-a input, 
.ui-bar-a select, 
.ui-bar-a textarea, 
.ui-bar-a button {
 font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-a .ui-link-inherit {
 color:      #fff;
}
.ui-bar-a .ui-link {
 color:      #7cc4e7;
 font-weight: bold;
}
.ui-body-a {
 border: 1px solid   #2A2A2A;
 background:    #222222;
 color:      #fff;
  text-shadow: 0 1px 0  #000;
 font-weight: normal;
 background-image: -moz-linear-gradient(top, 
       #666666, 
       #222222);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,   #666666),
  color-stop(1,   #222222));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#222222)')";
}
.ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button {
 font-family: Helvetica, Arial, sans-serif;
}
.ui-body-a .ui-link-inherit {
 color:      #fff;
}
.ui-body-a .ui-link {
 color:      #2489CE;
 font-weight: bold;
}
.ui-br {
 border-bottom: rgb(130,130,130);
 border-bottom: rgba(130,130,130,.3);
 border-bottom-width: 1px;
 border-bottom-style: solid;
}
.ui-btn-up-a {
 border: 1px solid   #222;
 background:    #333333;
 font-weight: bold;
 color:      #fff;
 text-shadow: 0 -1px 1px #000;
 background-image: -moz-linear-gradient(top, 
       #555555, 
       #333333);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,   #555555),
  color-stop(1,   #333333));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')";
}
.ui-btn-up-a a.ui-link-inherit {
 color:      #fff;
}
.ui-btn-hover-a {
 border: 1px solid   #000;
 background:    #444444;
 font-weight: bold;
 color:      #fff;
 text-shadow: 0 -1px 1px #000;
 background-image: -moz-linear-gradient(top, 
       #666666, 
       #444444);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,   #666666),
  color-stop(1,   #444444));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#444444')";
}
.ui-btn-hover-a a.ui-link-inherit {
 color:      #fff;
}
.ui-btn-down-a {
 border: 1px solid   #000;
 background:    #3d3d3d;
 font-weight: bold;
 color:      #fff;
 text-shadow: 0 -1px 1px #000;
 background-image: -moz-linear-gradient(top, 
       #333333, 
       #5a5a5a);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,   #333333),
  color-stop(1,   #5a5a5a));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')";
}
.ui-btn-down-a a.ui-link-inherit {
 color:      #fff;
}
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a {
 font-family: Helvetica, Arial, sans-serif;
 text-decoration: none;
}

이런 녀석이 있다.. 그 다음에는 B, 그 다음에 C ... 그렇게 해서 E 까지..

그래 눈치 챘겠지만 이게 테마 관련 된 css 이다...

나는 그걸 내 나름대로 수정을 했다.

/* blue
-----------------------------------------------------------------------------------------------------------*/
/*상단 header 바 설정*/
.ui-bar-blue {
 border: 0;
 background:    #2e78bf;
 color:      #2e78bf;
 font-weight: bold;
 background-image: -moz-linear-gradient(top, 
       #2e78bf,
       #2e78bf);
 background-image: -webkit-gradient(linear,left top,left bottom,
   color-stop(0,  #2e78bf),
   color-stop(1,  #2e78bf));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2e78bf', EndColorStr='#2e78bf')";
}
.ui-bar-blue,
.ui-bar-blue input,
.ui-bar-blue select,
.ui-bar-blue textarea,
.ui-bar-blue button {
 font-family: Helvetica, Arial, sans-serif;
}
.ui-body-blue {
 border: 0;
 color:      #333333;
 text-shadow: 0 1px 0  #fff;
 background:    #f0f0f0;
 background-image: -moz-linear-gradient(top, 
       #FFFFFF, 
       #b3cee9);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,   #FFFFFF),
  color-stop(1,   #b3cee9));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3cee9')";
}
.ui-body-blue,
.ui-body-blue input,
.ui-body-blue select,
.ui-body-blue textarea,
.ui-body-blue button {
 font-family: Helvetica, Arial, sans-serif;
}
.ui-body-blue .ui-link-inherit {
 color:      #333333;
}
.ui-body-blue .ui-link {
 color:      #2489CE;
 font-weight: bold;
}

.ui-btn-up-blue {
 border: 1px solid   #ccc;
 background:    #eee;
 font-weight: bold;
 color:      #444;
 text-shadow: 0 1px 1px #f6f6f6;
 background-image: -moz-linear-gradient(top, 
       #fefefe, 
       #eeeeee);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,   #fdfdfd),
  color-stop(1,   #eeeeee));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')";
}
.ui-btn-up-blue a.ui-link-inherit {
 color:      #2F3E46;
}

.ui-btn-hover-blue {
 border: 1px solid   #bbb;
 background:    #dadada;
 font-weight: bold;
 color:      #101010;
 text-shadow: 0 1px 1px  #fff;
 background-image: -moz-linear-gradient(top, 
       #ededed, 
       #dadada);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,   #ededed),
  color-stop(1,   #dadada));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#dadada')";
}
.ui-btn-hover-blue a.ui-link-inherit {
 color:      #2F3E46;
}
.ui-btn-down-blue {
 border: 1px solid   #808080;
 background:    #fdfdfd;
 font-weight: bold;
 color:      #111111;
 text-shadow: 0 1px 1px  #ffffff;
 background-image: -moz-linear-gradient(top, 
       #eeeeee, 
       #fdfdfd);
 background-image: -webkit-gradient(linear,left top,left bottom,
  color-stop(0,   #eeeeee),
  color-stop(1,   #fdfdfd));
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#fdfdfd')";
}
.ui-btn-down-blue a.ui-link-inherit {
 color:      #2F3E46;
}
.ui-btn-up-blue,
.ui-btn-hover-blue,
.ui-btn-down-blue {
 font-family: Helvetica, Arial, sans-serif;
 text-decoration: none;
}

보면 눈치 챘겠지만

.ui-bar-a 이렇게 -a 라고 되어 있는 곳을 .ui-bar-blue 라고 -blue로 바꿨다.

나는 ui 바에는 그라디에이션(거 색이 점점 바뀌는)을 사용 안하고 모두 같은 색으로 바를 잡으려 했다.

그래서 .ui-bar-blue 를 보면 background-image : 부분과 -ms-filter 부분에 시작 색과 종료 색을 #2e78bf 로 설정 했다..

그리고 body 에는 그라디에이션을 넣어서 시작색은 #FFFFFF, 종료색은 #b3cee9...

그래.. 나머지도 다 같은 방식이다.. class 적용 시키는 것인다.. 하나하나 설멸 할 필요 없지.. 보면 알테니까.. 보고 모르겠다 싶으면 직접 바꿔 가면서 확인해봐.. 내가 설명 해 주는 것 보다 그게 빠를 꺼야..

하여튼 저렇게 새로운 css 요소를 추가 해 놓고 나서(나는 이걸 custom_m.css 에 추가 했음.. 나중에 버전 업 하면서 jquery.mobile 용 css를 바꿔도 날라가지 않게..) <div data-role="page" data-theme="blue" > 이렇게 테마를 적용 시켜 봤다.

아주 잘 적용 된다. (화면 보여 달라고 하지 말자. 드림위버에서는 이게 적용 안된다. 그러니 서버에 올려서 봐야 하는데 귀찮으.. 하여튼 해봤으니까 잘 된다고 벅벅 우기겠다. )

자 css 수정 하는 법도 봤으니까 메인페이지 디자인을 좀더 다듬어 볼까.

우선 우리가 만들 것에 대한 최종 버전부터 보자. http://m.mbizsupport.kr/site_mobile/main_page/test 이걸 스마트폰이나 html5가 되는 웹브라우저(파폭, 크롬, 사파리 등)로 보면 좋을 것이다.

이대로 만들기를 할껀데...

기대 하고 다음으로 ... (이러다가 해 넘기겠네..)