본문 바로가기
취미활동중

카카오톡 테마 만들기 (아이폰) - .css 파일 변경

리아림 2023. 1. 4. 01:41
반응형

 

카카오톡 테마 만들기 -.css파일 변경 편입니다.

1. KakaoTalkTheme.css 파일을 더블 클릭하여 엽니다. (더블클릭하면 저같은 경우는 메모장에 열리더라구요 :)

 

 

 

2. 아주 조금... 아는 부분들만 표시해보겠습니다. 필요에 따라 그 부분들을 수정하셔서 사용하시면 됩니다 :) 제가 만들 때 변경했던 부분들은 초록색으로 표시해봤습니다.

/*
 Manifest
 */

ManifestStyle
{
    -kakaotalk-theme-name: 'Apeach Sample Theme';                                (테마이름)
    -kakaotalk-theme-version: '8.0.0';
    -kakaotalk-theme-url: 'http://www.kakao.com';
    -kakaotalk-author-name: 'Kakao Corp.';                                                 (테마출처나 만드신분 이름 같은거 넣으시면 됩니다:)
    -kakaotalk-theme-id: 'com.kakao.talk.theme.apeachsampleios';
}


/*
 TabBar Style
 */

TabBarStyle-Main
{
    /* 배경 이미지 */
    background-color: ;
    -ios-background-image: 'maintabBgImage.png'; /* 배경 이미지 top-center-crop */
    
    /* 친구탭 */
    -ios-friends-normal-icon-image: 'maintabIcoFriends.png';
    -ios-friends-selected-icon-image: 'maintabIcoFriendsSelected.png';
    /* 채팅탭 */
    -ios-chats-normal-icon-image: 'maintabIcoChats.png';
    -ios-chats-selected-icon-image: 'maintabIcoChatsSelected.png';
    /* 친구찾기 (글로벌) */
    -ios-find-normal-icon-image: 'maintabIcoFind.png';
    -ios-find-selected-icon-image: 'maintabIcoFindSelected.png';
    /* 채널탭 */
    -ios-browse-normal-icon-image: 'maintabIcoBrowse.png';
    -ios-browse-selected-icon-image: 'maintabIcoBrowseSelected.png';
    /* 만화탭 (일본) */
    -ios-piccoma-normal-icon-image: 'maintabIcoPiccoma.png';
    -ios-piccoma-selected-icon-image: 'maintabIcoPiccomaSelected.png';
    /* 게임탭 */
    -ios-game-normal-icon-image: 'maintabIcoGame.png';
    -ios-game-selected-icon-image: 'maintabIcoGameSelected.png';
    /* 더보기탭 */
    -ios-more-normal-icon-image: 'maintabIcoMore.png';
    -ios-more-selected-icon-image: 'maintabIcoMoreSelected.png';
}


/*
 MainView Style
 */

HeaderStyle-Main
{
    -ios-text-color: #664242;

    -ios-tab-text-color: #B39898;
    -ios-tab-highlighted-text-color: #664242;
}

MainViewStyle-Primary
{
    background-color: #FFDEDE;
    -ios-background-image: 'mainBgImage.png';

    /* 텍스트 스타일 */
    -ios-text-color: #664242;                                   /* Title : 리스트 목록*/
    -ios-highlighted-text-color: #946C6C;                       /* Title Pressed */
    
    -ios-description-text-color: #805959;                       /* Description : 상태메세지 */
    -ios-description-highlighted-text-color: #946C6C;           /* Description Pressed */

    -ios-paragraph-text-color: #805959;                         /* Paragraph : 라스트메세지 */ 
    -ios-paragraph-highlighted-text-color: #946C6C;             /* Paragraph Pressed*/

    /* 셀 스타일 */
    -ios-normal-background-color: #F66C6C;                      /* Cell Background */
    -ios-normal-background-alpha: 0.0;
    
    -ios-selected-background-color: #664242;                    /* Cell Background Pressed */
    -ios-selected-background-alpha: 0.05;
}

MainViewStyle-Secondary
{
    background-color: #FFE3E3;
}

SectionTitleStyle-Main
{    
    border-color: #F66C6C;
    border-alpha: 0.09;
    
    -ios-text-color: #F66C6C;
    -ios-text-alpha: 1.0;
}


/*
 Feature Style
 */

FeatureStyle-Primary                                            /* Primary : 버튼 텍스트 */
{
    -ios-text-color: #805959;
}


ButtonStyle-AddFriend
{
    -ios-image: 'findBtnAddFriend.png';
}


/*
 DefaultProfile Style
*/

DefaultProfileStyle
{
    /* 프로필 */
    -ios-profile-images: 'profileImg01.png';
}


/*
 ChatRoom Style
 */

BackgroundStyle-ChatRoom
{
    background-color: #FFDEDE;
    -ios-background-image: 'chatroomBgImage.png';
}

InputBarStyle-Chat
{
    /* 입력창 배경 */
    background-color: #FFFFFF;
    
    /* 전송 버튼 */
    -ios-send-normal-background-color: #FF7F7F;
    -ios-send-normal-foreground-color: #FFFFFF;
    
    -ios-send-highlighted-background-color: #F27979;
    -ios-send-highlighted-foreground-color: #FFDEDE;

    /* 그밖의 버튼 */
    -ios-button-normal-foreground-color: #F7A4A4;
    -ios-button-highlighted-foreground-color: #FF7F7F;
}


/*
 Message Style
 */

MessageCellStyle-Send
{
    -ios-background-image: 'chatroomBubbleSend01.png' 20px 20px;
    -ios-selected-background-image: 'chatroomBubbleSend01Selected.png' 20px 20px;
    -ios-group-background-image: 'chatroomBubbleSend02.png' 20px 20px;
    -ios-group-selected-background-image: 'chatroomBubbleSend02Selected.png' 20px 20px;
    -ios-title-edgeinsets: 10px 10px 7px 12px;  /* top, left, bottom, right */
    -ios-group-title-edgeinsets: 10px 10px 7px 12px;

    -ios-text-color: #FFFFFF;
    -ios-selected-text-color: #4D4D4D;
    -ios-unread-text-color: #FF7F7F;
}

MessageCellStyle-Receive
{
    -ios-background-image: 'chatroomBubbleReceive01.png' 20px 20px;
    -ios-selected-background-image: 'chatroomBubbleReceive01Selected.png' 20px 20px;
    -ios-group-background-image: 'chatroomBubbleReceive02.png' 20px 20px;
    -ios-group-selected-background-image: 'chatroomBubbleReceive02Selected.png' 20px 20px; 
    -ios-title-edgeinsets: 10px 16px 7px 10px;  /* top, left, bottom, right */
    -ios-group-title-edgeinsets: 10px 16px 7px 10px;

    -ios-text-color: #4D4D4D;
    -ios-selected-text-color: #4D4D4D;
    -ios-unread-text-color: #FF7F7F;
}


/*
 Passcode Style
 */

BackgroundStyle-Passcode
{
    background-color: #FFDEDE;   (패스워드 화면(잠금화면) 상단 배경 색 변경하는 부분)
    -ios-background-image: 'passcodeBgImage.png'; (패스워드 화면(잠금화면) 상단 배경 이미지 설정하는 부분)
}

LabelStyle-PasscodeTitle
{
    -ios-text-color: #664242; (패스워드 화면 상단 '암호입력 / 카카오톡 암호를 입력해주세요'라는 문구 색 변경하는 부분)
}


PasscodeStyle
{
    -ios-bullet-first-image: 'passcodeImgCode01.png';
    -ios-bullet-second-image: 'passcodeImgCode02.png';
    -ios-bullet-third-image: 'passcodeImgCode03.png';
    -ios-bullet-fourth-image: 'passcodeImgCode04.png';
    
    -ios-bullet-selected-first-image: 'passcodeImgCode01Selected.png';
    -ios-bullet-selected-second-image: 'passcodeImgCode02Selected.png';
    -ios-bullet-selected-third-image: 'passcodeImgCode03Selected.png';
    -ios-bullet-selected-fourth-image: 'passcodeImgCode04Selected.png';
    
    -ios-keypad-background-color: #FFF2F2;    (패스워드 화면 하단 키패드 배경 이미지 색 변경하는 부분)
    -ios-keypad-text-normal-color: #664242;     (패스워드 화면 하단 키패드 키 이미지 색 변경하는 부분)
        
    -ios-keypad-number-highlighted-image : 'passcodeKeypadPressed.png';
}


/*
 Message Notification Bar Style
 */

BackgroundStyle-MessageNotificationBar
{
    background-color: #FCC5C5;
}

LabelStyle-MessageNotificationBarName
{
    -ios-text-color: #604242;
}

LabelStyle-MessageNotificationBarMessage
{
    -ios-text-color: #805959;
}


/*
 Direct Share
*/

BackgroundStyle-DirectShareBar
{
    background-color: #FFFFFF;
}

LabelStyle-DirectShareBarName
{
    -ios-text-color: #B35959;
}

LabelStyle-DirectShareBarMessage
{
    -ios-text-color: #D47B82;
}

 

 

3. 기타 정보들

 

#664242

- 이렇게 표시된 부분들은 색깔을 나타내는 부분입니다. RGB로 표현되어 있어서 R: 66 / G: 42 / B: 42  이렇게 볼 수 있고 16진수로 표현된 것이라고 볼 수 있어요 :) 만들어서 테마 적용해보시고, 추가적으로 손봐야 되는 부분들 찾아서 조금씩 고쳐가는 식으로 진행하시면 됩니다 ^^

 

반응형
저작자표시 (새창열림)

'취미활동중' 카테고리의 다른 글

[서울/전시] 프랑코 폰타나 : 컬러 인 라이프 - 마이아트 뮤지엄 (사진전) / 전시정보, 주차  (0) 2023.01.17
2023년 달력 포맷 - 태블릿용 (GoodNotes/Notability)  (0) 2023.01.05
카카오톡 테마 만들기 (아이폰) - 기본  (0) 2023.01.04
.zip 확장자 변경 (window) (확장자 표시)  (0) 2023.01.04

'취미활동중' Related Articles

티스토리툴바