ios theme guide en 최종 - kakao€¦ · (my chat bubble) ios background image backgroundimage ios...

Create a Theme Follow the directions below to create a theme file.

1．Download Sample Theme or Project File KakaoTalk Theme for iPhone has been designed by expanding the CSS format, and has been implemented so

that the style is described and applied based on the basic attributes of iOS.

A zip file that contains a sample of a KakaoTalk theme is provided in [KakaoTalk homepage > KakaoTalk User

Theme]. Download the sample theme of your choice.

* CSS：Style sheet that has saved the web documents overall style.

2．KakaoTalk Theme Components and Precautions (1) KakaoTalk.css：Includes information on including images, layouts and text colors to types defined by each style. Each file name is fixed、and is not applied to the theme when modified.

(2) .png file (Images that are included in the ʻ‘Imagesʼ’ directory: Image files described in the CSS Requires both iPhone 3gs resolution image and high resolution images for iPhone 4 and up. Add @2x on the same file name for Retina images.

Ex）Letʼ’s assume that the general (for 3gs）image file name is bg.png. Name for iPhone 3gs image: bg.png Name for iPhone4、4s（Retina）image: [email protected]

(3) A zip file format that compresses KakaoTalk.css and Images directory is used, and the extension must be converted to ʻ‘.kthemeʼ’. Is not recognized as an app if the file extension is not converted to .ktheme.

3. Modifiable Resources (Resources in Samples）

The following is a list of KakaoTalk resources (images and colors) that can be modified using the theme function. * The table below has been listed based on the KakaoTalk sample theme. Please refer to 7. Reference for the

complete list of modifiable resources.

Type Style Name Element Description

Navigation Bar

(Upper Section

Title)

NavigationBarStyle1

(Upper section title background)

-‐‑‒ios-‐‑‒background-‐‑‒image Background image

(Fix height to 45px)

NavigationItemTitleStyle1

(Upper section title color)

-‐‑‒ios-‐‑‒text-‐‑‒color Text color

-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color Text shadow color

-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha Text shadow transparency

-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset Text shadow direction

ButtonStyle7-‐‑‒1

(Upper section title right button)

-‐‑‒ios-‐‑‒background-‐‑‒image Button background image







(Upper section title right button

inactive)




-‐‑‒ios-‐‑‒text-‐‑‒alpha Text color transparency





(Upper section title left (back)

button)








(Upper section title right button

active)







Tab Bar

(Lower Section Tab

Area)

TabBarTitleStyle1

(Text color)


-‐‑‒ios-‐‑‒text-‐‑‒color Text color transparency




-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒color Text color when selecting tab

-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒alpha Text transparency when selecting

tab

-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒color Text shadow color when selecting

tab

-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒alpha Text shadow transparency when

selecting tab

-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒offset Text shadow direction when

selecting tab

TabBarItemStyle1

(Tab bar image)

-‐‑‒ios-‐‑‒background-‐‑‒image Tab bar button background image

(Fix size to 320x49)

-‐‑‒ios-‐‑‒selection-‐‑‒indicator-‐‑‒image Tab bar select tab image

(Fix size to 78x44)

-‐‑‒ios-‐‑‒friends-‐‑‒normal-‐‑‒icon-‐‑‒image ʻ‘Friendsʼ’ tab icon image

(Fix to 30x30)

-‐‑‒ios-‐‑‒chats-‐‑‒normal-‐‑‒icon-‐‑‒image ʻ‘Chatsʼ’ tab icon image

(Fix to 30x30)

-‐‑‒ios-‐‑‒recommendees-‐‑‒normal-‐‑‒icon-‐‑‒

image

ʻ‘Friends?ʼ’ tab icon image

(Fix to 30x30)

-‐‑‒ios-‐‑‒more-‐‑‒normal-‐‑‒icon-‐‑‒image ʻ‘Moreʼ’ tab icon image

(Fix to 30x30)

-‐‑‒ios-‐‑‒friends-‐‑‒selected-‐‑‒icon-‐‑‒image Select ʻ‘friendsʼ’ tab icon image

(Fix to 30x30)

-‐‑‒ios-‐‑‒chats-‐‑‒selected-‐‑‒icon-‐‑‒image Select ʻ‘chatsʼ’ tab icon image

(Fix to 30x30)

-‐‑‒ios-‐‑‒recommendees-‐‑‒selected-‐‑‒icon-‐‑‒

image

Select ʻ‘friends?ʼ’ tab icon image

(Fix to 30x30)

-‐‑‒ios-‐‑‒more-‐‑‒selected-‐‑‒icon-‐‑‒image Select ʻ‘moreʼ’ tab icon image

(Fix to 30x30)

Friend List BackgroundStyel3

(Friend list background)

-‐‑‒ios-‐‑‒background-‐‑‒image or、

background-‐‑‒color

Background image or background

color

(Recommend size 960x960)

SearchBarStyle1

(Search bar)




-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒

background-‐‑‒image

Search text field box background

image


-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒leftview-‐‑‒

image

Search icon

(Fix size to 15x15)

TableViewSectionHeaderStyle1

(Friend list section title area)





-‐‑‒ios-‐‑‒text-‐‑‒margin Text position margin


TableViewCellStyle1-‐‑‒1

(Friend list cell area)

border-‐‑‒color Cell area lower border color

-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒color Cell area background color

-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒alpha Cell area background color

transparency

-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒color Cell selection area background

color

-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒alpha Cell selection area background

color transparency

-‐‑‒ios-‐‑‒newcomer-‐‑‒background-‐‑‒color New friend cell area background

color

-‐‑‒ios-‐‑‒newcomer-‐‑‒background-‐‑‒alpha New friend cell area background

color transparency


-‐‑‒ios-‐‑‒highlight-‐‑‒text-‐‑‒color Cell selection text color

-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒background-‐‑‒

image

Status message background image

-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒color Status message text color

-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒

edgeinsets

Status message text area

top/bottom, left/right margin

adjustment value

トークリスト BackgroundStyle4

(Chat list background)

-‐‑‒ios-‐‑‒background-‐‑‒image or



color


TableViewCellStyle2-‐‑‒1

(Chat list cell area)




transparency


color


color transparency



-‐‑‒ios-‐‑‒time-‐‑‒text-‐‑‒color Time text color

-‐‑‒ios-‐‑‒detail-‐‑‒text-‐‑‒color Last message text color

DefaultProfileStyle1

(Chat room thumbnail image)

-‐‑‒ios-‐‑‒profile-‐‑‒small-‐‑‒image 1:1 chat room thumbnail image

(Fix size to 32x32)

-‐‑‒ios-‐‑‒groupchat-‐‑‒small-‐‑‒image Group chat room thumbnail image

(Fix size to 32x32)

-‐‑‒ios-‐‑‒profile-‐‑‒large-‐‑‒image Large thumbnail image


Friend

Recommendation

List

BackgroundStyel6





color

TableViewSectionHeaderStyle2 -‐‑‒ios-‐‑‒text-‐‑‒color Text color




-‐‑‒ios-‐‑‒text-‐‑‒margin Text position margin


More MoreBackgroundStyle1





color


MoreCellStyle1

(ʻ‘Moreʼ’ cell area)




transparency


color


color transparency



MoreIconSetStyle1

(ʻ‘Moreʼ’ icon)

-‐‑‒ios-‐‑‒account-‐‑‒icon-‐‑‒image Kakao Account

(Fix to 36x35)

-‐‑‒ios-‐‑‒notice-‐‑‒icon-‐‑‒image Notice icon

(Fix to 36x35)

-‐‑‒ios-‐‑‒settings-‐‑‒icon-‐‑‒image Settings icon

(Fix to 36x35)

-‐‑‒ios-‐‑‒giftshop-‐‑‒icon-‐‑‒image Gift Shop icon

(Fix to 36x35)

-‐‑‒ios-‐‑‒itemstore-‐‑‒icon-‐‑‒image Item Store icon

(Fix to 36x35)

-‐‑‒ios-‐‑‒plusfriend-‐‑‒icon-‐‑‒image Plus Friend icon

(Fix to 36x35)

-‐‑‒ios-‐‑‒gamecenter-‐‑‒icon-‐‑‒image Games icon

(Fix to 36x35)

Chat Room BackgroundStyle5

(Chat room background)




color


ChatMessageCellStyle1

(My chat bubble)



-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets Text area margin adjustment

-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets Image area margin adjustment

ChatMessageCellStyle2

(Chat friendʼ’s chat bubble)



-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets Text area margin adjustment

-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets Image area margin adjustment

ChatMessageCellUserNameLabelStyle

1

(Chat friendʼ’s chat bubble user

name)





ChatInputBarStyle1

(Message input bar)


(Fix to 320x38)

-‐‑‒ios-‐‑‒plus-‐‑‒icon-‐‑‒image + button image

(Fix to 26x28)

-‐‑‒ios-‐‑‒emoticon-‐‑‒icon-‐‑‒image Emoticon image

(Fix to 26x28)

-‐‑‒ios-‐‑‒keyboard-‐‑‒icon-‐‑‒image Keyboard image

(Fix to 26x28)

ChatInputBarSendButtonNormalStyle

1

(Send button ʻ‘normalʼ’/Activated)







–ios-‐‑‒title-‐‑‒edgeinsets Title area margin adjustment value

ChatInputBarSendButtonDisableStyle

1

(Send button ʻ‘disabledʼ’/Inactivated)







–ios-‐‑‒title-‐‑‒edgeinsets Title area margin adjustment value

Mini Profile MiniProfileBackgroundStyle1

(Mini profile background)



MiniProfileMenuBarBackgroundStyle1

(Mini profile menu bar background)


(Fix height to 54px-‐‑‒100px)

MiniProfileUserNameLabelStyle1

(Mini profile user name)





MiniProfileStatusMessageLabelStyle1

(Mini profile status message)


MiniProfilePhoneNumberButtonStyle1

(Mini profile phone number button)




MiniProfileButtonStyle1

(Mini profile lower section button)







MiniProfilePlusFriendHomeButtonStyl

e1

(Mini profile Plus Friend Home

shortcut button)




-‐‑‒ios-‐‑‒arrow-‐‑‒icon-‐‑‒image Arrow image

(Fix size to 7x11)

MiniProfilePlusFriendCountStyle1

(Plus Friend mini profile friend count)




MiniProfileMenuBarAccessoryStyle1

(Mini profile menu bar right menu

button)

-‐‑‒ios-‐‑‒gift-‐‑‒icon-‐‑‒image Gift icon image

(Fix size to 36x54)

-‐‑‒ios-‐‑‒favorite-‐‑‒on-‐‑‒icon-‐‑‒image Favorite On icon image

(Fix size to 36x54)

-‐‑‒ios-‐‑‒favorite-‐‑‒off-‐‑‒icon-‐‑‒image Favorite Off icon image

(Fix size to 36x54)

-‐‑‒ios-‐‑‒edit-‐‑‒icon-‐‑‒image Edit icon image

(Fix size to 36x54)

-‐‑‒ios-‐‑‒close-‐‑‒icon-‐‑‒image Close icon image

(Fix size to 36x54)

Enter Password PasscodeBackgroundStyle1

(Enter password screen background)




color






PasscodeDescLabelStyle1

(Description text)





PasscodeBulletAndKeypadStyle1

(Enter password box)

-‐‑‒ios-‐‑‒bullet-‐‑‒image Dot image when entering

(Fix size to 55x54)

-‐‑‒ios-‐‑‒bullet-‐‑‒background-‐‑‒image Input box image

(Fix size to 55x54)

PasscodeBulletAndKeypadStyle1

(Keypad image, Normal)

-‐‑‒ios-‐‑‒keypad-‐‑‒number0-‐‑‒normal-‐‑‒

image~∼-‐‑‒ios-‐‑‒keypad-‐‑‒number9-‐‑‒

normal-‐‑‒image

Number 0 to 9 keypad when

ʻ‘Normalʼ’


-‐‑‒ios-‐‑‒keypad-‐‑‒back-‐‑‒normal-‐‑‒image Back keypad when ʻ‘Normalʼ’


-‐‑‒ios-‐‑‒keypad-‐‑‒cancel-‐‑‒normal-‐‑‒image Cancel keypad when ʻ‘Normalʼ’

(Fix to 110x54)

-‐‑‒ios-‐‑‒keypad-‐‑‒blank-‐‑‒normal-‐‑‒image Space keypad when ʻ‘Normalʼ’


-‐‑‒ios-‐‑‒keypad-‐‑‒number0-‐‑‒highlight-‐‑‒

image~∼-‐‑‒ios-‐‑‒keypad-‐‑‒number9-‐‑‒

normal-‐‑‒image

Number 0 to 9 keypad when

ʻ‘Pressedʼ’


-‐‑‒ios-‐‑‒keypad-‐‑‒back-‐‑‒highlight-‐‑‒image Back keypad when ʻ‘Pressedʼ’


-‐‑‒ios-‐‑‒keypad-‐‑‒cancel-‐‑‒highlight-‐‑‒image Cancel keypad when ʻ‘Pressedʼ’


-‐‑‒ios-‐‑‒keypad-‐‑‒blank-‐‑‒highlight-‐‑‒image Space keypad when ʻ‘Pressedʼ’


4. CSS Key Value Definition

The following is a list of CSS key values that are defined by each style used in KakaoTalk.

Classification Applied Section Example

Classification Applied Section Example

-‐‑‒ios-‐‑‒(prefix)-‐‑‒image Background image

(Clearly state the reference point

when lengthening out an

image)

Tip：Do not lengthen out the

image from the reference point

when the reference points are

stated as 0px、0px. Expand the

image instead.

-‐‑‒ios-‐‑‒background-‐‑‒image:

url('default.png');

-‐‑‒ios-‐‑‒background-‐‑‒image:

url('btn_̲2_̲yellow_̲u.png') 40px

0px;

background-‐‑‒color Background color background-‐‑‒color: #65464b;

border-‐‑‒color Table cellʼ’s lower section border

color

border-‐‑‒color: #bbe4d5;

-‐‑‒ios-‐‑‒(prefix)-‐‑‒text-‐‑‒color Text color -‐‑‒ios-‐‑‒text-‐‑‒color: #ffffff;

-‐‑‒ios-‐‑‒(prefix)-‐‑‒text-‐‑‒alpha Text transparency(0.0-‐‑‒1.0) -‐‑‒ios-‐‑‒text-‐‑‒alpha: 0.2;

-‐‑‒ios-‐‑‒(prefix)-‐‑‒text-‐‑‒shadow-‐‑‒offset Text shadow coordinate (x,y) -‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset: 1px 1px;

-‐‑‒ios-‐‑‒(prefix)-‐‑‒edgeinsets Button title area margin size

(top, left, bottom, right)

-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets: 1px 1px 1px

1px;

-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets: 5px 6px

6px 10px;

-‐‑‒ios-‐‑‒(prefix)-‐‑‒margin Table cell section header area

margin size

-‐‑‒ios-‐‑‒text-‐‑‒margin: 15px 0px;

5. Modifying Theme

Download the sample theme and change the extension from ʻ‘*.kthemeʼ’ to ʻ‘zipʼ’ to open the compressed file.

Open the compressed file in the concerned package and check to see whether the CSS file and Images

directory has been composed. If you create or distribute a theme at a later date, modifications must be

compressed in a zip file and the extension must be changed to ʻ‘*.kthemeʼ’ for the theme to be applied

correctly.

(1) Changing Theme Name Change the sections marked in red so that it matches the theme you created. The red portions, which include

theme name, theme version, theme URL, author name, are elements of ʻ‘ManifestStyleʼ’, which is located in the highest part of ʻ‘KakaoTalk.cssʼ’.

The elements will be shown as-‐‑‒is in KakaoTalk appʼ’s ʻ‘View More>Setting>Theme Settingʼ’ screen.

ManifestStyle

{

-‐‑‒kakaotalk-‐‑‒theme-‐‑‒name: url('softwork theme');

-‐‑‒kakaotalk-‐‑‒theme-‐‑‒version: url('1.0.0');

-‐‑‒kakaotalk-‐‑‒theme-‐‑‒url: url('http://www.kakao.com');

-‐‑‒kakaotalk-‐‑‒author-‐‑‒name: url('Kakao Corp.');

}

(2) Modifying Image Refer to the resource list above and replace the image you wish to change with the identical file name. How to use iPhoneʼ’s stretchable image (a) Stretchable image – Enter the 3gs size when entering coordinated in the ʻ‘cssʼ’. A good example of a stretchable image is a ʻ‘chat bubbleʼ’. It is a similar concept to Androidʼ’s 9-‐‑‒patch and reduces the image size to the minimum and also reduces the app capacity. Many sizes can be displayed with a single, minimized image. If a coordinate is designated, when areas other than the designated coordinate does not move; only the image are in the designated coordinates expands. • If the height and width of the coordinates have been designated: Such cases only pertain to chat bubbles, and the size can stretch in all directions depending on the volume of contents included in the chat bubble.

• If only one of the coordinates have been designated: Normally, only the width is designated. The coordinates will be fixed if a “0” is input as the height size. In such a case, the image will only expand horizontally.

• If no coordinates are designated (If the height is demanded): Even if no coordinates are entered, the imageʼ’s central 1px is perceived as the extension area and is stretched. The image is only stretched horizontally. The width of the image must be determined with the provided horizontal size when creating an image.

(b) Text area of a chat bubble

• Apart from the expanding coordinates, the text area of chat bubbles must be designated so that the text can be evenly distributed within the chat bubble. The text must be designated so there are equal margins in all directions of the text bubbles.

6. Applying Theme

Applying in Safari

(a) Once the theme has been modified, compress the KakaoTalk.css file and image files into a zip file.

(b) Change the zip file extension to ʻ‘.kthemeʼ’.

(c) Upload the packaging file that has been compressed to ʻ‘kthemeʼ’ into a location where it can be downloaded from the outside. (Ex: Naver or Daum Café, personal blogs etc…)

(d) Enter the uploaded URL in the Safari address bar or click the uploaded file to activate the ʻ‘Open with KakaoTalkʼ’ button.

(e) Click the ʻ‘Open with KakaoTalkʼ’ button to execute KakaoTalk and install the theme.

7. Reference

Overall specifications for theme styles.

Classification Elements Definition

ManifestStyle -‐‑‒kakaotalk-‐‑‒theme-‐‑‒name-‐‑‒kakaotalk-‐‑‒theme-‐‑‒

version-‐‑‒kakaotalk-‐‑‒theme-‐‑‒url-‐‑‒kakaotalk-‐‑‒author-‐‑‒

name

Basic information on the

theme（Displayed in the

theme list）

（Theme name, version,

URL, author name）

BackgroundStyle -‐‑‒ios-‐‑‒background-‐‑‒image

(Recommend 960x960)

Screen background image

LabelStyle -‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

offset-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

alpha

Designate character string

style

（Text color, transparency,

shadow style）

ButtonStyle -‐‑‒ios-‐‑‒background-‐‑‒image-‐‑‒ios-‐‑‒text-‐‑‒color -‐‑‒ios-‐‑‒text-‐‑‒

alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets

Designate button style

（Background image、text

color, text transparency,

shadow style, text

margin ）

TextFieldStyle -‐‑‒ios-‐‑‒background-‐‑‒image

(TextFieldStyle1 : Fix height to 54px)

(TextFieldStyle2 : Fix height to 45px)

-‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒text-‐‑‒alpha

Designate input field style

-‐‑‒ Ex）Single-‐‑‒line character

string input section such as

name, status message etc…


color）

SearchBarStyle -‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒background-‐‑‒image(Fix height to 44px)

-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒background-‐‑‒image(Fix

height to 31px)

-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒leftview-‐‑‒image(Fix size

to 15x15)

Designate search bar style

-‐‑‒ Ex）Friend list search

input section

（Text color、background

image、input field

background image、icon

image）

TableViewStyle -‐‑‒ios-‐‑‒table-‐‑‒separator-‐‑‒color Designate group style table

view border color

-‐‑‒ Ex）Friend list, chat list

setting etc…

（Border color, border

style）

TableViewCellStyle border-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒

highlight-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒highlight-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒

detail-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒detail-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒detail-‐‑‒

highlight-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒detail-‐‑‒highlight-‐‑‒text-‐‑‒

alpha-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒color-‐‑‒ios-‐‑‒normal-‐‑‒

background-‐‑‒alpha-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒

color-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒alpha

(Use only in friends list)

-‐‑‒ios-‐‑‒newcomer-‐‑‒background-‐‑‒color-‐‑‒ios-‐‑‒

newcomer-‐‑‒background-‐‑‒alpha-‐‑‒ios-‐‑‒status-‐‑‒

message-‐‑‒background-‐‑‒image-‐‑‒ios-‐‑‒status-‐‑‒

message-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒

alpha-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒edgeinsets

(Use only in chat list)

-‐‑‒ios-‐‑‒time-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒time-‐‑‒text-‐‑‒alpha

Designate table cell (each

element of the list) style

-‐‑‒ Ex）Style that pertains to

the row of each list-‐‑‒type

tables, such as friends list,

chat list etc…

（Border color, text color,

background image,

accessory image

（ ">"））

TableViewSectionHeaderS

tyle

-‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒margin-‐‑‒

ios-‐‑‒background-‐‑‒image

Designate table section

header (section area that is

displayed in the cellʼ’s upper

section) style

-‐‑‒ Ex）Setting screen section

title area

（Text color, shadow style,

margin size, background

image）

NavigationBarStyle background-‐‑‒color

-‐‑‒ios-‐‑‒background-‐‑‒image(Fix height to 45px)

Designate style of the upper

section navigation area

（Background color,

background image）

NavigationItemTitleStyle -‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒text-‐‑‒

shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha

Designate style of the upper

section navigation title text


shadow style ）

MiniProfileBackgroundStyl

e

-‐‑‒ios-‐‑‒background-‐‑‒image(Fix height to 224px) Designate mini profileʼ’s

overall background image

MiniProfileMenuBarBackgr

oundStyle

-‐‑‒ios-‐‑‒background-‐‑‒image(Fix height to 54px-‐‑‒

100px)

Designate mini profileʼ’s

upper section menu bar

background image

MiniProfileUserNameLabel

Style


-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒

text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha

Designate style of user

name text in the left of the

mini profile

（Text color, shadow

style）

MiniProfileStatusMessageL

abelStyle


-‐‑‒ios-‐‑‒text-‐‑‒alpha

Designate style of status

message text style in the

left of the mini profile

(Text color)

MiniProfileButtonStyle -‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒

shadow-‐‑‒offset-‐‑‒ios-‐‑‒background-‐‑‒image(Fix height

to 44px)

Designate style of the

button on the lower section

of the mini profile

(Text style, background

image)

MiniProfilePlusFriendHome

ButtonStyle


-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒background-‐‑‒image(Fix

128x38)

-‐‑‒ios-‐‑‒arrow-‐‑‒icon-‐‑‒image(Fix to 7x11)

Designate style of the

ʻ‘Homeʼ’ button in Plus

Friendʼ’s mini profile

（Text style and

background image）

MiniProfilePhoneNumberB

uttonStyle


-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒background-‐‑‒image(Fix

height to 25px)

Designate style of mini

profileʼ’s (Free Call user)

phone number button

（Text style and

background image）

MiniProfilePlusFriendCount

Style

-‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒background-‐‑‒image(Fix

height to 21px)

Designate style of the friend

count area in Plus Friendʼ’s

mini profile

（Text style and

background image）

MiniProfileMenuBarAccess

oryStyle

-‐‑‒ios-‐‑‒gift-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒favorite-‐‑‒on-‐‑‒icon-‐‑‒

image-‐‑‒ios-‐‑‒favorite-‐‑‒off-‐‑‒icon-‐‑‒image -‐‑‒ios-‐‑‒edit-‐‑‒

icon-‐‑‒image-‐‑‒ios-‐‑‒close-‐‑‒icon-‐‑‒image

(Fix all size to 36x54)

Designate style of four (4)

buttons in the menu bar

area on the upper side of

the mini profile

（Send a Gift, Favorites,

Edit, Close Button

background image）

MoreBackgroundStyle background-‐‑‒color Designate ʻ‘Moreʼ’ tab

background color style

MoreCellStyle border-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒highlight-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒

normal-‐‑‒background-‐‑‒color-‐‑‒ios-‐‑‒selected-‐‑‒


Designate the ʻ‘Moreʼ’ tab

upper section button style

（Border color, text and

background color）

MoreIconSetStyle -‐‑‒ios-‐‑‒account-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒notice-‐‑‒icon-‐‑‒image-‐‑‒

ios-‐‑‒settings-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒giftshop-‐‑‒icon-‐‑‒

image-‐‑‒ios-‐‑‒itemstore-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒plusfriend-‐‑‒

icon-‐‑‒image-‐‑‒ios-‐‑‒gamecenter-‐‑‒icon-‐‑‒image

(Fix all to 36x35)

Designate the ʻ‘Moreʼ’ tab

upper side button icon

background image

（Kakao account, My

Profile, Notice, Settings, Gift

Shop, Item Store, Plus

Friend icon background

image）

PasscodeBackgroundStyle background-‐‑‒color

-‐‑‒ios-‐‑‒background-‐‑‒image(Recommend 960x960)

Designate password lock

background style (Select

either color or image)

PasscodeTitleLabelStyle -‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offse-‐‑‒ios-‐‑‒text-‐‑‒



upper main title text style


shadow style）

PasscodeDescLabelStyle -‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒text-‐‑‒



upper side sub title text

style


shadow style ）

PasscodeBulletAndKeypad

Style

-‐‑‒ios-‐‑‒bullet-‐‑‒image(Fix size to 55x54)

-‐‑‒ios-‐‑‒bullet-‐‑‒background-‐‑‒image(Fix size to

55x54)

-‐‑‒ios-‐‑‒keypad-‐‑‒(0-‐‑‒9, back, undo)-‐‑‒image



input area style

（Dot image when

inputting、input area

background image）

ChatInputBarSendButtonN

ormalStyle

-‐‑‒ios-‐‑‒background-‐‑‒image(Fix size to 26x28)


alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

offset-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets

Chat room message

transfer button style


style）

ChatInputBarStyle -‐‑‒ios-‐‑‒background-‐‑‒image(Fix size to 320x38)

-‐‑‒ios-‐‑‒plus-‐‑‒icon-‐‑‒image(Fix height to 28px)

-‐‑‒ios-‐‑‒emoticon-‐‑‒icon-‐‑‒image(Fix height to 28px)

-‐‑‒ios-‐‑‒keyboard-‐‑‒icon-‐‑‒image(Fix height to 28px)

Designate chat room

message input area icon

and background image

（Background image、+

button, emoticon button,

keyboard button image）

ChatMessageCellStyle -‐‑‒ios-‐‑‒background-‐‑‒image-‐‑‒ios-‐‑‒selected-‐‑‒

background-‐‑‒image-‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒title-‐‑‒

edgeinsets-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets

Designate chat room

incoming/outgoing message

style

（General chat bubble

background image /

background image when

selecting, general text

color/text color when

selecting,

Text area edgeInset, image

area edgeInset）

ChatMessageCellUserNam

eLabelStyle


color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

offset

Designate style of sender of

incoming messages to

the chat room


shadow style）

TabBarTitleStyle -‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

offset-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒

alpha-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒offset

Designate tab bar text style


shadow style）

TabBarItemStyle -‐‑‒ios-‐‑‒background-‐‑‒image(Fix size to 320x49)

-‐‑‒ios-‐‑‒selection-‐‑‒indicator-‐‑‒image(Fix size to

78x44)

-‐‑‒ios-‐‑‒friends-‐‑‒normal-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒chats-‐‑‒

normal-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒recommendees-‐‑‒normal-‐‑‒

icon-‐‑‒image-‐‑‒ios-‐‑‒more-‐‑‒normal-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒

friends-‐‑‒selected-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒chats-‐‑‒selected-‐‑‒

icon-‐‑‒image-‐‑‒ios-‐‑‒recommendees-‐‑‒selected-‐‑‒icon-‐‑‒

image-‐‑‒ios-‐‑‒more-‐‑‒selected-‐‑‒icon-‐‑‒image(Fix icon

image to 30x30)

Designate tab bar

background image and icon

style

（Background image,

indicator image when

selecting, general icon

image/ icon image when

selecting）

DefaultProfileStyle -‐‑‒ios-‐‑‒profile-‐‑‒small-‐‑‒image(Fix size to 32x32)

-‐‑‒ios-‐‑‒profile-‐‑‒large-‐‑‒image(Fix size to 110x110)

-‐‑‒ios-‐‑‒groupchat-‐‑‒small-‐‑‒image(Fix size to 32x32)

Profile thumbnail image

style (User profile

thumbnail images shown in

the friend list, chat room

etc…）

ios theme guide en 최종 - kakao€¦ · (my chat bubble) ios background image backgroundimage ios...

Documents