ios theme guide en - kakao.com

20
Create My Own Theme for iOS KakaoTalk User Guide creative by TALK Design Team/KAKAO

Upload: others

Post on 02-Jun-2022

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: iOS theme guide EN - kakao.com

Create����������� ������������������  My����������� ������������������  Own����������� ������������������  Theme����������� ������������������  for����������� ������������������  iOSKakaoTalk����������� ������������������  User����������� ������������������  Guide����������� ������������������  

creative����������� ������������������  by����������� ������������������  TALK����������� ������������������  Design����������� ������������������  Team/KAKAO

Page 2: iOS theme guide EN - kakao.com

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

Page 3: iOS theme guide EN - kakao.com

Download����������� ������������������  File

Go����������� ������������������  to����������� ������������������  Kakao.com����������� ������������������  >����������� ������������������  Service����������� ������������������  >����������� ������������������  KakaoTalk����������� ������������������  >����������� ������������������  Customized����������� ������������������  Themes����������� ������������������  to����������� ������������������  download����������� ������������������  KakaoTalk����������� ������������������  sample����������� ������������������  themes.����������� ������������������  

STEP����������� ������������������  1

Page 4: iOS theme guide EN - kakao.com

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

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)

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

Page 5: iOS theme guide EN - kakao.com

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

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

Page 6: iOS theme guide EN - kakao.com

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-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-game-normal-icon-image

Icon����������� ������������������  -����������� ������������������  Game

-ios-game-selected-icon-image

����������� ������������������  -ios-more-normal-icon-image

Icon����������� ������������������  -����������� ������������������  More

-ios-more-selected-icon-image

Tab����������� ������������������  Bar

STEP����������� ������������������  2 Check����������� ������������������  Modifiable����������� ������������������  Resource

Page 7: iOS theme guide EN - kakao.com

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

Page 8: iOS theme guide EN - kakao.com

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

STEP����������� ������������������  2

Friends

Check����������� ������������������  Modifiable����������� ������������������  Resource

Page 9: iOS theme guide EN - kakao.com

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

Page 10: iOS theme guide EN - kakao.com

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

Page 11: iOS theme guide EN - kakao.com

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

Check����������� ������������������  Modifiable����������� ������������������  ResourceSTEP����������� ������������������  2

Page 12: iOS theme guide EN - kakao.com

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

MoreIconSetStyle1-V4����������� ������������������  (Top����������� ������������������  Grid����������� ������������������  Icon)

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

28*28����������� ������������������  (Designated)

-ios-settings-icon-image Icon����������� ������������������  -Setting

-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

More

Check����������� ������������������  Modifiable����������� ������������������  ResourceSTEP����������� ������������������  2

Page 13: iOS theme guide EN - kakao.com

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����������� ������������������  locationObject����������� ������������������  messages����������� ������������������  like����������� ������������������  photos/stickers

Chatting����������� ������������������  Room

Check����������� ������������������  Modifiable����������� ������������������  ResourceSTEP����������� ������������������  2

Page 14: iOS theme guide EN - kakao.com

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����������� ������������������  locationObject����������� ������������������  messages����������� ������������������  like����������� ������������������  photos/stickers

Chatting����������� ������������������  Room

Check����������� ������������������  Modifiable����������� ������������������  ResourceSTEP����������� ������������������  2

Page 15: iOS theme guide EN - kakao.com

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

Page 16: iOS theme guide EN - kakao.com

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

Page 17: iOS theme guide EN - kakao.com

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

Page 18: iOS theme guide EN - kakao.com

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

Page 19: iOS theme guide EN - kakao.com

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

Page 20: iOS theme guide EN - kakao.com

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