ios theme guide en - kakaostep2 checkmodifiableresource stylename class description note...

Create�My�Own�Theme�for�iOSKakaoTalk�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”.

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



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.�


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


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


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-image

Icon�-�Friend

-�60*49�(Designated)�-�The�icon�size�can�be�changed�within�the�given�size.

-ios-friends-selected-icon-image

-ios-chats-normal-icon-image

Icon�-�Chat

-ios-chats-selected-icon-image

-ios-recommendees-normal-icon-image

Icon�-�Find�Friends

-ios-recommendees-selected-icon-image

-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

Tab�Bar

STEP�2 Check�Modifiable�Resource


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



-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

STEP�2

Friends

Check�Modifiable�Resource


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-highlight-text-color Selected�Name�color


-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-alpha Selected�Cell�Background�Opacity

Chats


Chats



ChatBubbleStyle1-V4��(채팅�시작하기�버튼)

-ios-background-image 버튼�원형�배경�이미지-�144�*�144�(Designated)�-�Include�drop�shadow�area

ios-image +�이미지 32�*�32�(Designated)



-border-color Cell�Bottom�border�color

-border-alpha Cell�Bottom�border�opacity



-ios-highlight-text-color Selected�Name�color


-ios-normal-background-color Cell�Background�ColorTransparent�background�is�recommended.

-ios-normal-background-alpha Cell�Background�Opacity


-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�)



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-plusfriend-icon-image Icon�-�Plus�Friends

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



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



MoreIconSetStyle1-V4�(Top�Grid�Icon)

-ios-notice-icon-image Icon�-Notice


-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

-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

More



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



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



ChatInputBarStyle1-V4�(Message�input�area)

-ios-background-image Image 320*49�(Designated)

-ios-landscape-background-image

Landscape�image


-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


Chatting�Room


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


Chatting�Room


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



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


#�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

ios theme guide en - kakaostep2 checkmodifiableresource stylename class description note...

Documents