Upload
lamliem
View
220
Download
0
Embed Size (px)
Citation preview
Create�My�Own�Theme�for�iOSKakaoTalk�User�Guide�
creative�by�TALK�Design�Team/KAKAO
UPDATE 2017/03/21
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”.
Download�File
Go�to�Kakao.com�>�Service�>�KakaoTalk�>�Customized�Themes�to�download�KakaoTalk�sample�themes.�
STEP�1
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
ManifestStyle�(Default�Information)
-kakaotalk-theme-id Theme�ID com.kakao.talk.ID
-kakaotalk-theme-name Theme�Name
-kakaotalk-theme-version Theme�Version
-kakaotalk-theme-url Theme�URL
-kakaotalk-author-name Vendor
Theme�Information
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
DefaultProfileStyle1-V4�(Default�Profile�Image)
-ios-profile-small-image�-ios-profile-small-image-second�-ios-profile-small-image-third�
-ios-groupchat-small-image
Friend�Tab 40*40�(Designated)
-ios-chat-small-image�-ios-chat-small-image-second�-ios-chat-small-image-third�
-ios-groupchat-chat-image
Chat�Tab 50*50�(Designated)
-ios-profile-large-image�-ios-profile-large-image-second�-ios-profile-large-image-third�
-ios-groupchat-large-image
Mini�Profile 110*110�(Designated)
-ios-friendgroup-image�-ios-friendgroup-image-second�-ios-friendgroup-image-third
Friends�Group 50*50�(Designated)
User�Profile�Image
#�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.�
Style�name Class Description Note
NavigationBarStyle1-V4�(Top�Navigantion�BG)
background-color
Image�or�Color
-�320*64��-�Cannot�be�transparent
-ios-background-image�-ios-landscape-background-image�-ios-landscape-568h-background-image
NavigationItemTitleStyle1-V4�(Title/Button�Text)
-ios-text-color Title&Button�Font�Color Colors�for�the�left�and�right�buttons�are�same�as�the�title.�Only�opacity�will�be�applied�differently.-ios-text-alpha Font�Opacity
Navigation�Bar
STEP�2
Style�name Class Description Note
MessageNotificationBarBackgroundStyle1-V4�(Background)
background-color Color-�Only�Color�can�be�used.-�Different�color�is�recommended.
MessageNotificationBarNameLabelStyle1-V4�(Sender�Name)
-ios-text-color Font�Color
-ios-text-alpha Font�Opacity
MessageNotificationBarMessageLabelStyle1-V4�(Message)
-ios-text-color Font�Color
-ios-text-alpha Font�Opacity
New�Message�Notification�Bar
Check�Modifiable�Resource
STEP�2
Style�name Class Description Note
MessageNotificationBarBackgroundStyle1-V4�(Background)
background-color Color Only�Color�can�be�used
MessageNotificationBarNameLabelStyle1-V4�(Sender�Name)
-ios-text-color Font�Color
-ios-text-alpha Font�Opacity
MessageNotificationBarMessageLabelStyle1-V4�(Message)
-ios-text-color Font�Color
-ios-text-alpha Font�Opacity
New�Message�Notification�Bar
Check�Modifiable�Resource
Style�name Class Description Note
SimpleMessageNotificationBarBackgroundStyle1-V4�(Background)
background-color Color -�Only�Color�can�be�used
SimpleMessageNotificationBarBackgroundStyle1-V4�(Sender�Name)
-ios-text-color Font�Color
-ios-text-alpha Font�Opacity
SimpleMessageNotificationBarBackgroundStyle1-V4�(Message)
-ios-text-color Font�Color
-ios-text-alpha Font�Opacity
Mention,Complete,Etc.��Toast�Notification�Bar
Style�name Class Description Note
TabBarTitleStyle1-V4�(Menu)
-ios-text-color Menu�Color
-ios-text-alpha Menu�Opacity
-ios-selected-text-color Selected�Menu�font�color
-ios-selected-text-alpha Selected�Menu�font�color
TabBarItemStyle1-V4�(Tab�Bar)
-ios-background-image�-ios-landscape-background-image�-ios-landscape-568h-background-image
BG�Image
-�Height�at�least�49px�and�up�to�66px��-�Opacity�can�be�applied�from�height�at�least�49px.
-ios-friends-normal-icon-imageIcon�-�Friend
-�60*49�(Designated)�-�The�icon�size�can�be�changed�within�the�given�size.
-ios-friends-selected-icon-image
-ios-chats-normal-icon-imageIcon�-�Chat
-ios-chats-selected-icon-image
-ios-recommendees-normal-icon-imageIcon�-�Find�Friends
-ios-recommendees-selected-icon-image
-ios-channel-normal-icon-imageIcon�-�Channel�(South�Korea)
-ios-channel-selected-icon-image
-ios-game-normal-icon-imageIcon�-�Game�(South�Korea)
-ios-game-selected-icon-image
�-ios-more-normal-icon-imageIcon�-�More
-ios-more-selected-icon-image
Tab�Bar
STEP�2 Check�Modifiable�Resource
Style�name Class Description Note
BackgroundStyle3-V4�(Friends�List�BG)
-ios-background-image�OR�background-color Image�or�Color 320�*504�(Designated)
SearchBarStyle1-V4�(Find�Friends)
background-color BG�color Only�color�can�be�used
TableViewCellStyle1-1-V4�(Friends�List)
border-color Cell�Bottom�border�color
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�ColorTransparent�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
Friends
STEP�2 Check�Modifiable�Resource
Style�name Class Description Note
TableViewCellStyle1-1-V4�(Friends�List)
-ios-newcomer-background-color New�Friends�BG�color
-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-V4�(Section�Title�:�Common)
background-color�OR�-ios-background-image BG�Image�OR�Color
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
FriendBubbleStyle1-V4��(Add�Friend�button)
-ios-background-imageAdd�Friend�button�background�image
-�144�*�144�(Designated)�-�Include�drop�shadow�area
-ios-image Add�Friend�image32�*�32�(Designated)
-ios-close-image close�image32�*�32�(Designated)
STEP�2
Friends
Check�Modifiable�Resource
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�(Chat�List)
-border-color Cell�Bottom�border�color
-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�ColorTransparent�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
Chats
Check�Modifiable�ResourceSTEP�2
Chats
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
ChatBubbleStyle1-V4��(new�Chat�button)
-ios-background-imagenew�chat�button�background�image�
-�144�*�144�(Designated)�-�Include�drop�shadow�area
-ios-image Add�chat�image 32�*�32�(Designated)
-ios-close-image close�image 32�*�32�(Designated)
Style�name Class Description Note
TableViewCellStyle4-2-V4�(Friends�List)
-border-color Cell�Bottom�border�color
-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�ColorTransparent�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-V4�(Selected�Friends)
-ios-background-image Delete�selected�friend 12�*12�(Designated)
-ios-text-color Selected�Friends�Name�color
ForwardBarStyleNormal-V4�(Forward�Tab)
background-colorTab�ON
-ios-text-color
ForwardBarStyleSelect-V4�(Forward�Tab)
background-colorTab�OFF
-ios-text-color
Choose�Friends�(Start�a�chat/Share�)
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
BackgroundStyle6-V4�(List�Backgroud)
-ios-background-image�또는�background-color Image�or�Color 320�*504�(Designated)
TableViewCellStyle4-1-V4�(Top�Icon�menu�BG)
-ios-normal-background-color Background�colorTransparent�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
RecommendeesFriendsHeaderButtonBarIconStyle1-V4��(Top�Icon)
�-ios-idsearch-icon-image Icon�-�Find�ID
44*44�(Designated)
-ios-qrcode-icon-image Icon�-�Find�QR�code
-ios-shake-icon-image Icon�-�Find�Shake�phone
-ios-tell-fiend-icon-image Icon�-�Invite
ButtonStyle6-V4�(Button�Add�Friend)
-ios-background-image Button�Background�Image 20*31�(Designated)
-ios-image Add�Friend�Icon 35*24�(Designated)
-ios-text-color Font�color
-ios-text-alpha Font�opacity
Find�Friends
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
MoreBackgroundStyle1-V4�(More�List�Background)
-ios-background-image�또는�background-color Image�or�Color 320�*504�(Designated)
MoreCellStyle1-V4�(Top�Grid�Area)
border-color Grid�Line�color
border-alpha Grid�Line�opacity
ios-text-color Menu�font�color
ios-text-alpha Menu�font�opacity
ios-normal-background-color Cell�Background�ColorTransparent�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
More
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Recommended�Type Note
MoreIconSetStyle1-V4�(Top�Grid�Icon)
-ios-notification-icon-image Icon-�Notification 35�*�35�/�PNG�70�*�70�/�PNG
new�(Version�5.7.0�or�later)
-ios-giftshop-icon-image Icon�-Gift�shop
40�*�40�/�PNG�80�*�80�/�PNG
-ios-itemstore-icon-image Icon-�Item�store
-ios-plusfriend-icon-image Icon�-Plus�friends
-ios-page-icon-image Icon�-Page�Store
-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 Version�5.1.0�or�later
-ios-makers-icon-image Icon�-Makers Version�5.4.0�or�later
-ios-hairshop-icon-image Icon-�Hairshop Version�5.7.0�or�later
-ios-mart-icon-image Icon-�Mart Version�5.9.7�or�later
-ios-order-icon-image Icon-�Order new�(Version�6.1.5�or�later)
-ios-account-icon-image Icon�-kakao�Account�(Global)
-ios-bargain-icon-image Icon�-bargain�(only�Japan)
-ios-theme-icon-image Icon�-theme�(Global)
More
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
MoreNotificationCellStyle1-V4�(notification�List) -ios-unread-background-color Unread�Cell�background�Color Version�5.7.0�or�later
-ios-unread-background-alpha Unread�Cell�background�Opacity Version�5.7.0�or�later
More�>�Notification
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
BackgroundStyle5-V4�(Chatting�Room�Background)
-ios-background-image�OR�background-color Image�or�Color -�320�*568�(Designated)
ChatMessageCellStyle1-V4�(My�Message)
-ios-background-image Bubble�Image
-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
-ios-image-edgeinsets Object�Message�location Object�messages�like�photos/stickers
Chatting�Room
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
ChatMessageCellStyle2-V4�(Sender�Message)
-ios-background-image Bubble�Image
-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
-ios-image-edgeinsets Sender�object�message�location Object�messages�like�photos/stickers
Chatting�Room
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
ChatInputBarStyle1-V4�(Message�input�area)
-ios-background-image Image 320*49�(Designated)
-ios-landscape-background-image
Landscape�image
480*49�(Designated)
-ios-landscape-568h-background-image 568*49�(Designated)
ChatInputBarSendButtonHighlightedStyle1-V4�(Activated�Send�button)
background-color Button�BG�color Only�color�can�be�used
-ios-text-color Button�font�color
-ios-text-alpha Button�font�opacity
ChatInputBarSendButtonDisabledStyle1-V4�(Deactivated�Send�button)
background-color Button�BG�color Only�color�can�be�used
-ios-text-color Button�font�color
-ios-text-alpha Button�font�opacity
ChatInputBarSendButtonVoiceTalkNormalStyle1-V4(Activated�Free�Call�icon)
background-color Icon�color
ChatInputBarSendButtonVoiceTalkDisableStyle1-V4� (Deactivated�Free�Call�icon
background-color Icon�color
Check�Modifiable�ResourceSTEP�2
Chatting�Room
Style�name Class Description Note
ChatInputBarKeyboardMenuButtonNormalStyle1-V4�(+�Button)
ios-image Open�option
21*21�(Designated)ChatInputBarCloseMenuButtonNormalStyle1-V4(X�Button)
ios-image Close�option
ChatInputBarPlusFriendHomeButtonNormalStyle1-V4(Home�Bugtton)
ios-image Plus�Friends�Home
Check�Modifiable�ResourceSTEP�2
Chatting�Room
Style�name Class Description Note
PasscodeBackgroundStyle1-V4�(Passcode�BG) -ios-background-image�OR�background-color Image�or�Color
-�320�*568�(Designated)�-�Background�image�must�be�applied�up�to�the�top�navigation�bar.
PasscodeTitleLabelStyle1-V4�(Passcode�Text)
-ios-text-color Passcode�Title�color
-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
-ios-bullet-first-imageWhen�entering�passcode�-�First�Dot
You�can�use�one�or�multiple�images�for�bullets.�
-ios-bullet-second-imageWhen�entering�passcode�-�Second�Dot
-ios-bullet-third-image:When�entering�passcode�-�Third�Dot
-ios-bullet-fourth-image When�entering�passcode�-�Dot�4
Passcode
Check�Modifiable�ResourceSTEP�2
Style�name Class Description Note
PasscodeBulletAndKeypadStyle1-V4�(Keypad)
ios-keypad-background-color Keypad�colorColor�can�be�used�instead�of�keypad�image
ios-keypad-normal-text-color Number�font�color
ios-keypad-highlight-text-color Selected�font�color
-ios-keypad-number0-normal-image�~�-ios-keypad-number9-normal-image
0-9�Keypad�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�~�-ios-keypad-number9-highlight-image
Pressed�0-9�Keypad�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
Passcode
Check�Modifiable�ResourceSTEP�2
#�Keypad�can�be�produced�with�an�image�or�you�can�use�the�default�Enter�Passcode�format�of�iOS�and�designate�a�color.�
Modify�ResourcesSTEP�3
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.�
1)�Modify�Theme�Name
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.');�
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.�
2)�Modify�Images
Install�on�PhonesSTEP�4
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.�
Install�using�safari