Create My Own Theme for iOS
KakaoTalk User Guide
creative by TALK Design Team/KAKAO Check Point
• This feature is available for KakaoTalk version 4.0 or later.
• The file name “KakaoTalk.css” cannot be modified.
• Produce 2 images based on the size of iPhone 3GS and 4 or later Retina.
• Sizes given in this document is based on iPhone 3GS.
• The final theme file must be saved as “.ktheme”. STEP 1 Download File
Go to Kakao.com > Service > KakaoTalk > Customized Themes to download KakaoTalk sample themes. STEP 2 Check Modifiable Resource
Theme Information
Style name Class Description Note
ManifestStyle -kakaotalk-theme-id Theme ID com.kakao.talk.ID (Default Information) -kakaotalk-theme-name Theme Name
-kakaotalk-theme-version Theme Version
-kakaotalk-theme-url Theme URL
-kakaotalk-author-name Vendor STEP 2 Check Modifiable Resource
User Profile Image
Style name Class Description Note DefaultProfileStyle1-V4 -ios-profile-small-image (Default Profile Image) -ios-profile-small-image-second -ios-profile-small-image-third Friend Tab 40*40 (Designated)
-ios-groupchat-small-image
-ios-chat-small-image -ios-chat-small-image-second -ios-chat-small-image-third Chat Tab 50*50 (Designated)
-ios-groupchat-chat-image
-ios-profile-large-image -ios-profile-large-image-second -ios-profile-large-image-third Mini Profile 110*110 (Designated)
-ios-groupchat-large-image
-ios-friendgroup-image -ios-friendgroup-image-second Friends Group 50*50 (Designated) -ios-friendgroup-image-third
# Up to 3 different default profile images will be displayed randomly and a profile image for a group chat is displayed on iPhone 4 or older only. STEP 2 Check Modifiable Resource
Navigation Bar
Style name Class Description Note NavigationBarStyle1-V4 background-color - 320*64 (Top Navigantion BG) - Cannot be transparent
-ios-background-image Image or Color -ios-landscape-background-image -ios-landscape-568h-background-image
NavigationItemTitleStyle1-V4 -ios-text-color Title&Button Font Color Colors for the left and right (Title/Button Text) buttons are same as the title. Only opacity will be applied -ios-text-alpha Font Opacity differently.
New Message Notification Bar
Style name Class Description Note MessageNotificationBarBackgrou ndStyle1-V4 background-color Color Only Color can be used (Background)
MessageNotificationBarNameLab -ios-text-color Font Color elStyle1-V4 (Sender Name) -ios-text-alpha Font Opacity
MessageNotificationBarMessageL -ios-text-color Font Color abelStyle1-V4 (Message) -ios-text-alpha Font Opacity STEP 2 Check Modifiable Resource
Tab Bar
Style name Class Description Note TabBarTitleStyle1-V4 -ios-text-color Menu Color (Menu)
-ios-text-alpha Menu Opacity
-ios-selected-text-color Selected Menu font color
-ios-selected-text-alpha Selected Menu font color
TabBarItemStyle1-V4 -ios-background-image - Height at least 49px and up to 66px (Tab Bar) -ios-landscape-background-image BG Image - Opacity can be applied from -ios-landscape-568h-background-image height at least 49px.
-ios-friends-normal-icon-image Icon - Friend -ios-friends-selected-icon-image
-ios-chats-normal-icon-image Icon - Chat -ios-chats-selected-icon-image
-ios-recommendees-normal-icon-image - 60*49 (Designated) Icon - Find Friends - The icon size can be changed -ios-recommendees-selected-icon-image within the given size.
-ios-channel-normal-icon-image Icon - Channel (South Korea) -ios-channel-selected-icon-image
-ios-more-normal-icon-image Icon - More -ios-more-selected-icon-image STEP 2 Check Modifiable Resource
Friends
Style name Class Description Note BackgroundStyle3-V4 -ios-background-image OR background-color Image or Color 320 *504 (Designated) (Friends List BG) SearchBarStyle1-V4 background-color BG color Only color can be used (Find Friends) TableViewCellStyle1-1-V4 border-color Cell Bottom border color (Friends List)
border-alpha Cell Bottom border opacity
-ios-text-color Name color
-ios-text-alpha Name opacity
-ios-highlight-text-color Selected Name color
-ios-highlight-text-alpha Selected Name opacity
-ios-normal-background-color Name Cell Background Color Transparent background is recommended. -ios-normal-background-alpha Name Cell Background Opacity
-ios-selected-background-color Selected Cell Background Color
-ios-selected-background-alpha Selected Cell Background opacity STEP 2 Check Modifiable Resource
Friends
Style name Class Description Note TableViewCellStyle1-1-V4 -ios-newcomer-background-color New Friends BG color (Friends List)
-ios-newcomer-background-alpha New Friends BG opacity
-ios-status-message-background-image Status message BG image
-ios-status-message-text-color Status font color
-ios-status-message-text-alpha Status font opacity
-ios-status-message-text-edgeinsets Status font location
TableViewSectionHeaderStyle1- background-color OR -ios-background-image BG Image OR Color V4 (Section Title : Common) border-color Bottom border color
border-alpha Bottom border cell
-ios-text-color Font color
-ios-text-alpha Font opacity
-ios-text-shadow-color Font shadow color
-ios-text-shadow-alpha Font shadow opacity STEP 2 Check Modifiable Resource
Chats
Style name Class Description Note BackgroundStyle4-V4 (Chat List BG) -ios-background-image OR background-color Image or Color 320 *504 (Designated)
TableViewCellStyle2-1-V4 -border-color Cell Bottom border color (Chat List)
-border-alpha Cell Bottom border opacity
-ios-text-color Name color
-ios-text-alpha Name opacity
-ios-highlight-text-color Selected Name color
-ios-highlight-text-alpha Selected Name opacity
-ios-time-text-color Time Font color
-ios-time-text-alpha Time Font opacity
-ios-detail-text-color Last message font color
-ios-detail-text-alpha Last message font opacity
-ios-normal-background-color Cell Background Color Transparent background is recommended. -ios-normal-background-alpha Cell Background Opacity
-ios-selected-background-color Selected Cell Background Color
-ios-selected-background-alpha Selected Cell Background Opacity STEP 2 Check Modifiable Resource
Chats
Style name Class Description Note - 144 * 144 (Designated) ChatBubbleStyle1-V4 -ios-background-image 버튼 원형 배경 이미지 (채팅 시작하기 버튼) - Include drop shadow area ios-image + 이미지 32 * 32 (Designated) STEP 2 Check Modifiable Resource
Choose Friends (Start a chat/Share )
Style name Class Description Note
TableViewCellStyle4-2-V4 -border-color Cell Bottom border color (Friends List) -border-alpha Cell Bottom border opacity
-ios-text-color Name color
-ios-text-alpha Name opacity
-ios-highlight-text-color Selected Name color
-ios-highlight-text-alpha Selected Name opacity
-ios-normal-background-color Cell Background Color Transparent background is recommended. -ios-normal-background-alpha Cell Background Opacity
-ios-selected-background-color Selected Cell Background Color
-ios-selected-background-alpha Selected Cell Background Opacity
UserSelectBarCloseButtonStyle1- -ios-background-image Delete selected friend 12 *12 (Designated) V4 (Selected Friends)
-ios-text-color Selected Friends Name color
ForwardBarStyleNormal-V4 background-color (Forward Tab) Tab ON -ios-text-color
ForwardBarStyleSelect-V4 background-color (Forward Tab) Tab OFF -ios-text-color STEP 2 Check Modifiable Resource
Find Friends
Style name Class Description Note
BackgroundStyle6-V4 -ios-background-image 또는 background-color Image or Color 320 *504 (Designated) (List Backgroud)
TableViewCellStyle4-1-V4 -ios-normal-background-color Background color (Top Icon menu BG) Transparent background is recommended. -ios-normal-background-alpha Background opacity
-ios-selected-background-color Selected Background color
-ios-selected-background-alpha Selected Background opacity
border-color Separation lines color
RecommendeesFriendsHeaderBut -ios-idsearch-icon-image Icon - Find ID tonBarIconStyle1-V4 (Top Icon) -ios-qrcode-icon-image Icon - Find QR code 44*44 (Designated) -ios-shake-icon-image Icon - Find Shake phone
-ios-plusfriend-icon-image Icon - Plus Friends
ButtonStyle6-V4 -ios-background-image Button Background Image 20*31 (Designated) (Button Add Friend)
-ios-image Add Friend Icon 35*24 (Designated)
-ios-text-color Font color
-ios-text-alpha Font opacity STEP 2 Check Modifiable Resource
More
Style name Class Description Note
MoreBackgroundStyle1-V4 -ios-background-image 또는 background-color Image or Color 320 *504 (Designated) (More List Background)
MoreCellStyle1-V4 border-color Grid Line color (Top Grid Area)
border-alpha Grid Line opacity
ios-text-color Menu font color
ios-text-alpha Menu font opacity
ios-normal-background-color Cell Background Color Transparent background is recommended. ios-normal-background-alpha Cell background Opacity
ios-selected-background-color Selected Cell Background color
ios-selected-background-alpha Selected Cell Background opacity STEP 2 Check Modifiable Resource
More
Style name Class Description Note
MoreIconSetStyle1-V4 -ios-notice-icon-image Icon -Notice (Top Grid Icon) -ios-giftshop-icon-image Icon -Gift shop
-ios-itemstore-icon-image Icon- Item store
-ios-plusfriend-icon-image Icon -Plus friends
-ios-page-icon-image Icon -Page Store 28*28 (Designated) -ios-gamecenter-icon-image Icon -Game
-ios-kakaopay-icon-image Icon -Kakao Pay
-ios-kakaotv-icon-image Icon -KakaoTV
-ios-kakaostyle-icon-image Icon -KakaoStyle
-ios-hotdeal-icon-image Icon -Hotdeal STEP 2 Check Modifiable Resource
Chatting Room
Style name Class Description Note
BackgroundStyle5-V4 -ios-background-image OR background-color Image or Color - 320 *568 (Designated) (Chatting Room Background) ChatMessageCellStyle1-V4 -ios-background-image Bubble Image (My Message) -ios-selected-background-image Selected Bubble Image
-ios-group-background-image Group Bubble Image
-ios-group-selected-background-image Selected Group Bubble Image
-ios-text-color My message font color
-ios-text-alpha My message font opacity
-ios-selected-text-color Selected my message font color
-ios-time-color My message time font color
-ios-unread-color Unread count font color
-ios-title-edgeinsets My message location
-ios-group-title-edgeinsets My Group message location
Object messages like photos/ -ios-image-edgeinsets Object Message location stickers STEP 2 Check Modifiable Resource
Chatting Room
Style name Class Description Note
ChatMessageCellStyle2-V4 -ios-background-image Bubble Image (Sender Message) -ios-selected-background-image Selected Bubble Image
-ios-group-background-image Group Bubble Image
-ios-group-selected-background-image Selected Group Bubble Image
-ios-text-color Sender message font color
-ios-text-alpha Sender message font opacity
-ios-selected-text-color Selected sender message color
-ios-time-color Sender message time color
-ios-unread-color Unread count font color
-ios-title-edgeinsets Sender message location
-ios-group-title-edgeinsets Sender Group message location
Object messages like photos/ -ios-image-edgeinsets Sender object message location stickers STEP 2 Check Modifiable Resource
Chatting Room
Style name Class Description Note ChatInputBarStyle1-V4 -ios-background-image Image 320*49 (Designated) (Message input area)
-ios-landscape-background-image 480*49 (Designated) Landscape image -ios-landscape-568h-background-image 568*49 (Designated)
ChatInputBarSendButtonHighligh background-color Button BG color Only color can be used tedStyle1-V4 (Activated Send button) -ios-text-color Button font color
-ios-text-alpha Button font opacity
ChatInputBarSendButtonDisabled background-color Button BG color Only color can be used Style1-V4 (Deactivated Send button) -ios-text-color Button font color
-ios-text-alpha Button font opacity
ChatInputBarSendButtonVoiceTal kNormalStyle1-V4 background-color Icon color (Activated Free Call icon) ChatInputBarSendButtonVoiceTal kDisableStyle1-V4 background-color Icon color (Deactivated Free Call icon STEP 2 Check Modifiable Resource
Chatting Room
Style name Class Description Note ChatInputBarKeyboardMenuButt onNormalStyle1-V4 ios-image Open option (+ Button) ChatInputBarCloseMenuButtonN ormalStyle1-V4 ios-image Close option 21*21 (Designated) (X Button) ChatInputBarPlusFriendHomeButt onNormalStyle1-V4 ios-image Plus Friends Home (Home Bugtton) STEP 2 Check Modifiable Resource
Passcode
Style name Class Description Note PasscodeBackgroundStyle1-V4 - 320 *568 (Designated) - Background image must be (Passcode BG) -ios-background-image OR background-color Image or Color applied up to the top navigation bar. PasscodeTitleLabelStyle1-V4 -ios-text-color Passcode Title color (Passcode Text)
-ios-text-alpha Title opacity
-ios-text-shadow-color Title font shadow color
-ios-text-shadow-alpha Title font shadow opacity
-ios-bullet-color Bullet color Only color can be used
When entering passcode - First -ios-bullet-first-image Dot When entering passcode - Second -ios-bullet-second-image Dot You can use one or multiple When entering passcode - Third images for bullets. -ios-bullet-third-image: Dot
-ios-bullet-fourth-image When entering passcode - Dot 4 STEP 2 Check Modifiable Resource
Passcode
Style name Class Description Note
PasscodeBulletAndKeypadStyle1- Color can be used instead of ios-keypad-background-color Keypad color V4 keypad image (Keypad) ios-keypad-normal-text-color Number font color
ios-keypad-highlight-text-color Selected font color
-ios-keypad-number0-normal-image ~ 0-9 Keypad Image -ios-keypad-number9-normal-image 75*75 Mandatory
-ios-keypad-back-normal-image Delete Keypad
-ios-keypad-cancel-normal-text-color Cancel font color
-ios-keypad-cancel-normal-text-alpha Cancel font opacity
-ios-keypad-number0-highlight-image ~ Pressed 0-9 Keypad image -ios-keypad-number9-highlight-image 75*75 Mandatory
-ios-keypad-back-highlight-image Pressed Delete Keypad
-ios-keypad-cancel-highlight-text-color Pressed Cancel font color
-ios-keypad-cancel-highlight-text-alpha Pressed Cancel font opacity
# Keypad can be produced with an image or you can use the default Enter Passcode format of iOS and designate a color. STEP 3 Modify Resources
1) Modify Theme Name KakaoTalk.css file contains the following text. Replace the text in red with your theme name, theme version, theme URL and vendor. This will be displayed in More > Settings > Themes in your KakaoTalk.
ManifestStyle { -kakaotalk-theme-id: url(‘com.kakao.talk.winterstoryios’); -kakaotalk-theme-name: url('Winter Theme'); -kakaotalk-theme-version: url('1.0.0'); -kakaotalk-theme-url: url('http://www.kakao.com'); -kakaotalk-author-name: url('Kakao Corp.');
2) Modify Images
Refer to the resources list in the “Check Modifiable Resource” page and replace the image you wish to change with the identical file name. When you place coordinates on CSS, the size must be based on iPhone 3GS and the designated size cannot be modified.
A. When you designate coordinates for both x and y: This only applies to a chat bubble and it will expand depending on the quantity of content in the chat bubble.
B. When you designate only one coordinate: Place a value for x and 0 for y, the size will be fixed and the image will expand horizontally. STEP 4 Install on Phones
Install using safari
1. Once you have modified the theme, compress the CSS file and the image folder to a ZIP file. 2. Change the name of the ZIP file to ktheme. (e.g. theme name.ktheme) 3. Upload the compressed file where you can download it. 4. Enter the URL on the browser or select the link and “Open in KakaoTalk” button will be activated. 5. Select “Open in KakaoTalk” and the theme will be installed.