고정 헤더 영역
상세 컨텐츠
본문
카카오 서비스에 나와있는 사용자 테마 제작 가이드_2025_01 Updated 버전을 참고하였고,
샘플 테마파일도 카카오 서비스에 나와있는 것으로 사용했다.
열어보니, 이런 이미지 폴더도 존재하고
KakaoTalkTheme.css 파일도 있고,
apeach-11.4.0.ktheme이란 파일도 있었다.
뜯어보니... 이미지 파일과 css 파일을 수정하여, 압축한 뒤 확장자를 ktheme으로 바꾸기만 하면 되는 거였다.
지금은 이미지를 내가 직접 만들기란 힘드니..
이런 식으로 변경된 사실만 알아보고자 한다. (이미지 크기 픽셀은 수정 전과 같다.)
/*
Manifest
*/
ManifestStyle
{
-kakaotalk-theme-name: 'Apeach';
-kakaotalk-theme-version: '11.1.0';
-kakaotalk-theme-url: 'http://www.kakao.com';
-kakaotalk-author-name: 'Kakao Corp.';
-kakaotalk-theme-id: 'com.kakao.talk.theme.apeachios';
}
/*
TabBar Style
*/
TabBarStyle-Main
{
/* 배경 이미지 */
background-color: ;
-ios-background-image: 'maintabBgImage.png'; /* 배경 이미지 top-center-crop */
/* 홈탭 */
-ios-home-normal-icon-image: 'maintabIcoHome.png';
-ios-home-selected-icon-image: 'maintabIcoHomeSelected.png';
/* 친구탭 */
-ios-friends-normal-icon-image: 'maintabIcoFriends.png';
-ios-friends-selected-icon-image: 'maintabIcoFriendsSelected.png';
/* 채팅탭 */
-ios-chats-normal-icon-image: 'maintabIcoChats.png';
-ios-chats-selected-icon-image: 'maintabIcoChatsSelected.png';
/* 친구찾기 (글로벌) */
-ios-find-normal-icon-image: 'maintabIcoFind.png';
-ios-find-selected-icon-image: 'maintabIcoFindSelected.png';
/* 채널탭 */
-ios-browse-normal-icon-image: 'maintabIcoBrowse.png';
-ios-browse-selected-icon-image: 'maintabIcoBrowseSelected.png';
/* 뷰탭 */
-ios-view-normal-icon-image: 'maintabIcoView.png';
-ios-view-selected-icon-image: 'maintabIcoViewSelected.png';
/* 만화탭 (일본) */
-ios-piccoma-normal-icon-image: 'maintabIcoPiccoma.png';
-ios-piccoma-selected-icon-image: 'maintabIcoPiccomaSelected.png';
/* 쇼핑탭 */
-ios-shopping-normal-icon-image: 'maintabIcoShopping.png';
-ios-shopping-selected-icon-image: 'maintabIcoShoppingSelected.png';
/* 콜탭 */
-ios-call-normal-icon-image: 'maintabIcoCall.png';
-ios-call-selected-icon-image: 'maintabIcoCallSelected.png';
/* 더보기탭 */
-ios-more-normal-icon-image: 'maintabIcoMore.png';
-ios-more-selected-icon-image: 'maintabIcoMoreSelected.png';
}
/*
MainView Style
*/
HeaderStyle-Main
{
-ios-text-color: #664242;
-ios-tab-text-color: #B39898;
-ios-tab-highlighted-text-color: #664242;
}
MainViewStyle-Primary
{
background-color: #FFDEDE;
-ios-background-image: 'mainBgImage.png';
/* 텍스트 스타일 */ /* 이름변경 */
-ios-text-color: #664242; /* Title : 리스트 목록*/
-ios-highlighted-text-color: #946C6C; /* Title Pressed */
-ios-description-text-color: #805959; /* Description : 상태메세지 */
-ios-description-highlighted-text-color: #946C6C; /* Description Pressed */
-ios-paragraph-text-color: #805959; /* Paragraph : 라스트메세지 */
-ios-paragraph-highlighted-text-color: #946C6C; /* Paragraph Pressed*/
/* 셀 스타일 */
-ios-normal-background-color: #F66C6C; /* Cell Background */
-ios-normal-background-alpha: 0.0;
-ios-selected-background-color: #664242; /* Cell Background Pressed */
-ios-selected-background-alpha: 0.05;
}
MainViewStyle-Secondary
{
background-color: #FFE3E3;
}
SectionTitleStyle-Main
{
border-color: #F66C6C;
border-alpha: 0.09;
-ios-text-color: #F66C6C;
-ios-text-alpha: 1.0;
}
/*
Feature Style
*/
FeatureStyle-Primary /* Primary : 버튼 텍스트 */
{
-ios-text-color: #805959;
}
ButtonStyle-AddFriend
{
-ios-image: 'findBtnAddFriend.png';
}
/*
DefaultProfile Style
*/
DefaultProfileStyle
{
/* 프로필 */
-ios-profile-images: 'profileImg01.png';
}
/*
ChatRoom Style
*/
BackgroundStyle-ChatRoom
{
background-color: #FFDEDE;
-ios-background-image: 'chatroomBgImage.png';
}
InputBarStyle-Chat
{
/* 입력창 배경 */
background-color: #FFFFFF;
/* 보내기 버튼 */
-ios-send-normal-background-color: #FF7F7F;
-ios-send-normal-foreground-color: #FFFFFF;
-ios-send-highlighted-background-color: #F27979;
-ios-send-highlighted-foreground-color: #FFDEDE;
/* 인풋바 좌측 메뉴 아이콘 */
-ios-button-normal-foreground-color: #E86464;
-ios-button-highlighted-foreground-color: #CB6F6F;
/* CUX 관련 버튼 (신규추가) */
-ios-button-text-color: #191919; /*인풋바 텍스트 컬러 */
-ios-button-normal-background-color: #000000; /* 메뉴버튼 배경 컬러 */
-ios-button-normal-background-alpha: 0.04;
}
/*
Message Style
*/
MessageCellStyle-Send
{
-ios-background-image: 'chatroomBubbleSend01.png' 17px 17px;
-ios-selected-background-image: 'chatroomBubbleSend01Selected.png' 17px 17px;
-ios-group-background-image: 'chatroomBubbleSend02.png' 17px 17px;
-ios-group-selected-background-image: 'chatroomBubbleSend02Selected.png' 17px 17px;
-ios-title-edgeinsets: 10px 11px 7px 17px; /* top, left, bottom, right */
-ios-group-title-edgeinsets: 10px 11px 7px 17px;
-ios-text-color: #FFFFFF;
-ios-selected-text-color: #FFFFFF;
-ios-unread-text-color: #FF7F7F;
}
MessageCellStyle-Receive
{
-ios-background-image: 'chatroomBubbleReceive01.png' 22px 17px;
-ios-selected-background-image: 'chatroomBubbleReceive01Selected.png' 22px 17px;
-ios-group-background-image: 'chatroomBubbleReceive02.png' 22px 17px;
-ios-group-selected-background-image: 'chatroomBubbleReceive02Selected.png' 22px 17px;
-ios-title-edgeinsets: 10px 17px 7px 11px; /* top, left, bottom, right */
-ios-group-title-edgeinsets: 10px 17px 7px 11px;
-ios-text-color: #4D4D4D;
-ios-selected-text-color: #4D4D4D;
-ios-unread-text-color: #FF7F7F;
}
/*
Passcode Style
*/
BackgroundStyle-Passcode
{
background-color: #FFDEDE;
-ios-background-image: 'passcodeBgImage.png';
}
LabelStyle-PasscodeTitle
{
-ios-text-color: #664242;
}
PasscodeStyle
{
-ios-bullet-first-image: 'passcodeImgCode01.png';
-ios-bullet-second-image: 'passcodeImgCode02.png';
-ios-bullet-third-image: 'passcodeImgCode03.png';
-ios-bullet-fourth-image: 'passcodeImgCode04.png';
-ios-bullet-selected-first-image: 'passcodeImgCode01Selected.png';
-ios-bullet-selected-second-image: 'passcodeImgCode02Selected.png';
-ios-bullet-selected-third-image: 'passcodeImgCode03Selected.png';
-ios-bullet-selected-fourth-image: 'passcodeImgCode04Selected.png';
-ios-keypad-background-color: #FFF2F2;
-ios-keypad-text-normal-color: #664242;
-ios-keypad-number-highlighted-image : 'passcodeKeypadPressed.png';
}
/*
Message Notification Bar Style
*/
BackgroundStyle-MessageNotificationBar
{
background-color: #FCC5C5;
}
LabelStyle-MessageNotificationBarName
{
-ios-text-color: #604242;
}
LabelStyle-MessageNotificationBarMessage
{
-ios-text-color: #805959;
}
/*
Direct Share
*/
BackgroundStyle-DirectShareBar
{
background-color: #FFFFFF;
}
LabelStyle-DirectShareBarName
{
-ios-text-color: #B35959;
}
LabelStyle-DirectShareBarMessage
{
-ios-text-color: #D47B82;
}
/*
BottomBanner Style
*/
BottomBannerStyle {
background-color: #664142;
}css파일은 이러했다.
ManifestStyle
{
-kakaotalk-theme-name: 'Eunseong';
-kakaotalk-theme-version: '1.1.0';
-kakaotalk-author-name: 'cjaksqmf1';
-kakaotalk-theme-id: 'com.kakao.talk.theme.apeachios';
}
매니페스트를 대강 수정했다.
/* 배경 이미지 */
background-color: hsl(26, 88%, 48%);
-ios-background-image: 'maintabBgImage.png';
배경색은 주황색으로 해봤다.
MainViewStyle-Primary
{
background-color: #232323;
-ios-background-image: 'mainBgImage.png';
/* 텍스트 스타일 */ /* 이름변경 */
-ios-text-color: #be0000; /* Title : 리스트 목록*/
-ios-highlighted-text-color: #0042a5; /* Title Pressed */
-ios-description-text-color: #805959; /* Description : 상태메세지 */
-ios-description-highlighted-text-color: #946C6C; /* Description Pressed */
-ios-paragraph-text-color: #805959; /* Paragraph : 라스트메세지 */
-ios-paragraph-highlighted-text-color: #946C6C; /* Paragraph Pressed*/
/* 셀 스타일 */
-ios-normal-background-color: #7f0000; /* Cell Background */
-ios-normal-background-alpha: 0.0;
-ios-selected-background-color: #664242; /* Cell Background Pressed */
-ios-selected-background-alpha: 0.05;
}
다양한 색상을 바꿔봤다.
대강 바꿔본 후, 이미지 폴더와 css파일을 압축한 다음, 압축 zip의 확장자를 ktheme으로 바꿨다.
카카오톡으로 .ktheme 파일을 보내서 열어봤더니, 바로 테마를 적용할 수 있었다.
이처럼, 적용이 바로 되었다!
대강 원리는 파악 했고, CSS에서 어떤 코드가 어느 부분을 변경하는지만 알면 될 것 같다.
그건 정리해서 다음에 업로드 해볼 것이다.
