Results 81 to 100 of 696

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: Color Keyboard Guide

Threaded View

  1. #1
    Color Keyboard Yoda Phatmartino's Avatar
    Join Date
    May 2011
    Location
    Nose deep in a plist...
    Posts
    652
    Thanks
    1,313
    Thanked 1,023 Times in 310 Posts

    Default Color Keyboard Guide
    Click image for larger version. 

Name:	CKGuideGreen4.PNG 
Views:	5893 
Size:	364.4 KB 
ID:	545579Click image for larger version. 

Name:	PhatLime.png 
Views:	3320 
Size:	155.8 KB 
ID:	537041Click image for larger version. 

Name:	PhatBlue3.png 
Views:	4985 
Size:	139.2 KB 
ID:	537040Click image for larger version. 

Name:	PhatBlue2.png 
Views:	4917 
Size:	127.9 KB 
ID:	537039Click image for larger version. 

Name:	PhatRed.png 
Views:	3508 
Size:	89.6 KB 
ID:	536177Click image for larger version. 

Name:	CKGuideRed4.PNG 
Views:	32510 
Size:	38.2 KB 
ID:	545578

    Click image for larger version. 

Name:	PhatBlack.png 
Views:	16868 
Size:	356.0 KB 
ID:	534221



    * It's highly advisable (if you're really interested in trying to force your way through all of this information...lol) to take a look through these first several "Guide" posts on a computer, or a web browser on device that allows "Full Site" view.

    The MMi app (though I love it dearly) does not allow formatting of posts with font size, color, bold, spacing, full images, etc... This guide is heavily dependent on all of those things to make it as understandable and easy to look at as possible in this Thread/Post format...




    Color Keyboard


    The first thing one should realize about the iOS keyboard, is that natively it is not made up of images. There are some images used for the different "Popups" when keys are hit, but the rest of the main keyboard is actually created by code. Color Keyboard is able to access and substitute that code to just change the colors and opacities of all parts separately. If desired, there is also structure in place to allow one to replace the native "code" keyboard entirely, with a series of Background images depicting all of the possible variations that the keyboard has. There's a lot. It depends on the "Method" chosen which I'll start to explain next.


    There are 3 general approaches or "methods" to creating themes for Color Keyboard, which I will quickly describe here to help the user decide just what information they're looking for. The method "Titles" below are links straight to it's particular post, same for the following "Thread Contents" section... Though it's advisable to at least skim through this first post to pick up a lot of the basics that can apply to all methods.




    1. Hex Color Method


    This method only requires one "text" code file called a Colorkeyboard.plist. This method can be used with as little on hand as a text editor and a method of SSH, and only requires altering Hex (RRGGBB) Color values to assign colors to all of the parts of the keyboard.

    Imagine that each part of the native iOS keyboard (Background, Keys, Text, etc...) has a code value that controls it's color, and the Colorkeyboard.plist file allows you to assign your own colors to all of those parts.


    2. Background Image Method


    This method uses the ColorKeyboard.plist to make the "Hex Color Method" values transparent, and display an image that you will create to reproduce all of those parts. This method requires Photoshop and/or similar applications to create these images.

    Imagine that everything you see on the native iOS keyboard (Background, Keys, Text, etc...) is part of one static image, and you will create your own "image" to replace it.



    3. Hybrid Method


    This method mixes the first two by using the ColorKeyboard.plist to display images providing the background and keys, and leave the native iOS text visible and their desired colors. This method provides a few advantages over the Background Image Method, including higher compatibility with international setups that may include varying symbols, and use of the same font as the rest of the device whether native or Bytafont controlled.





    Thread Contents


    Post 1

    - General Info
    - ColorKeyboard.plist
    - Info.plist
    - Definitions
    - iDevice Root Directory Basics



    Post 2

    - Hex Color Method



    Post 3

    - Background Image Method



    Post 4

    - Hybrid Method



    Post 5

    - Popups








    General Info


    These are the folders used for Color Keyboard theming and their physical locations:


    /Library/ColorKeyboard/Themes/

    This is where your individual theme's folder will go (This folder will contain at least your ColorKeyboard.plist, and at most everything except popup images).


    /Library/ColorKeyboard/Popups/

    This is where the folder with your Popup images will go.


    /Library/ColorKeyboard/Backgrounds_Landscape/

    /Library/ColorKeyboard/Backgrounds_Portrait/


    These two folders are used to simply insert your own Background images to be applied in the ColorKeyboard settings app.



    Background Image Sizes:



    Pre iP4 (Non-Retina):

    Landscape - 480x162
    Portrait - 320x216


    iP4/4s (Retina):

    Landscape@2x - 960x324
    Portrait@2x - 640x432


    iPhone5:

    Landscape@2x - 1136x324
    Portrait@2x - 640x432







    Color Keyboard Theme Maker

    This is a simple web app created by the author of Color Keyboard that allows you to create a plist only theme by selecting colors via a simple visual interface!


    CK_Tester

    This is an awesome little app also created by the author of Color Keyboard that allows you to easily test your theme by flipping through all of the possible variations. A must have for CK Theme creators!


    The above links are to the originals on the Color Keyboard author's site which has an amazing wealth of in-depth information:

    colorkeyboard.9eye.net



    ShowCase

    This is an awesome tweak available via Cydia (BigBoss) that makes the native iOS Text change between Upper and Lower Case on the Keyboard as well as the Popups!








    ColorKeyboard.plist


    Color Keyboard makes use of Property Lists or "plists", which are found in many forms throughout the theming realm. A plist is a hierarchically formatted code file that uses a variety of <tags> to reference native commands as well as assign and implement custom values. A ColorKeyboard.plist specifically references all of the natively defined parts of the keyboard and allows the user to assign custom values to properties such as color, opacity, positioning, shape and size. In addition, the plist is able to assign background images to be displayed behind the keyboard's native keys, allowing a variety of options for creating a unique theme.


    The "hierarchy" within the plist is a format that can be easily learned. It is generally structured in a directory/sub-directory style, and <tags> are used to "begin and end" individual values and lists of values. The generic syntax is <tag>value</tag>. The "value" can be from as little as one parameter, to a list of "sub" <tags> containing many parameters. Spacing outside of the <tags> is not read, meaning that the entire plist could be written entirely on one line with no spaces, or set up as an "outline" for optimal ease of viewing.


    Here is a simplified generic example of a ColorKeybord.plist, spaced and color coded to emphasize the hierarchy of <tags>:


    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
    "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    ...<dict>
    ......<key>CustomColor</key>
    .........<array>
    ............<array>
    ...............<string>FGbegin</string>
    ...............<string>FFFFFFFF</string>
    ............</array>
    ............<array>
    ...............<string>FGend</string>
    ...............<string>FFFFFFFF</string>
    ............</array>
    ............<array>
    ...............<string>UIKBColorBackgroundStandardLine1</string>
    ...............<string>FFFFFFFF</string>
    ............</array>
    .........</array>
    ......<key>CustomLinearGradient</key>
    ..........<array>
    ............<array>
    ...............<string>Gradient</string>
    ...............<string>FGbegin</string>
    ...............<string>FGend</string>
    ............</array>
    .........</array>
    ......<key>Styles</key>
    .........<dict>
    ............<key>iPhone-Alert</key>
    ...............<array>
    ..................<array>
    .....................<string>DisplayType=String;ControlState=3</string>
    .....................<dict>
    ........................<key>ForegroundGradient</key>
    ........................<string>Gradient</string>
    .....................</dict>
    ..................</array>
    ...............</array>
    ............<key>iPhone-Standard</key>
    ...............<array>
    ..................<array>
    .....................<string>DisplayType=String;ControlState=3</string>
    .....................<dict>
    ........................<key>ForegroundGradient</key>
    ........................<string>Gradient</string>
    .....................</dict>
    ..................</array>
    ...............</array>
    .........</dict>
    ...</dict>
    </plist>






    The ColorKeyboard.plist is basically a text file. It can be edited by simply changing the file extension from .plist to .txt and opening in any text editor. Once finished editing, just change the extension back to .plist. This method can be handy if you want to test your plist in progress, because everything will remain organized as you left it.



    There are also applications available to specifically work on the code while leaving the file in .plist format. I use plist Editor for Windows. This type of application is great for many reasons. One small thing is that you will see the "line numbers" next to each line of code. This can save ALL debugging time if your plist ends up with a syntax error, as any application that can open a plist file, will return an error code and display the "line" that the syntax error occurs on when it tries to open the file. It will also re-format the "outline" structure of the code, and arrange some parts of the plist in alphabetical order when you save the file. This is great for the final product, but may rearrange something you're working on in progress... Only a minor pain in a very few instances.



    iFile is great for editing plists on device anywhere you may happen to be. It's Text Editor will open and save as plist files, and return error codes if necessary. If you get stuck with an error code, iFile works a little differently than plist editors on the computer... It won't open a .plist file that has a syntax error, but don't panic... just change the file extension from .plist to .txt to open the file and look for the error.







    Here are some generic selections from the ColorKeyboard.plist with explination inserted to give a general understanding of the main parts of the plist and what they will be used for. Each part will be explained in much more depth throughout the rest of the guide, and most terms in red are included in the following Definitions section:




    This is the header and will always be present as shown:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
    "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>


    This <key> can be used to callout images for the Background Image Methods or to simply include 1 image to be used behind Hex Color keys like the CK Settings app allows:

    <key>BackgroundImages</key>
    <dict>

    <key>Orientation;iPhone-Alert or Standard;ControlState</key>
    <string>Image Names.png</string>
    </dict>


    This <key> is used to define your own custom colors to be applied later in the plist. Create as many of the individual <arrays> as necessary:

    <key>CustomColor</key>
    <array>

    <array>
    <string>Custom Color Names</string>
    <string>Hex Code</string>
    </array>

    If the following and like strings are included, they will set colors here and will not be called out later in the plist.

    <array>
    <string>UIKBColorBackgroundStandardLine1</string>
    <string>Hex Code</string>
    </array>


    This key can be used to define custom linear gradients to be used if desired for Key Foregrounds. This can be used as well in the Background Image Methods to set a very transparent gradient, for example, that can be applied to "pressed" secondary keys to create animation. Include as many of the individual <arrays> as necessary.

    <key>CustomLinearGradient</key>
    <array>

    <array>
    <string>Custom Gradient Names</string>
    <string>Begin color defined above</string>
    <string>End color defined above</string>
    </array>


    This <key> includes two <keys>, iPhone-Alert and iPhone-Standard. Those two <keys> should be identical, so it is advisable to complete the iPhone-Standard, and then copy it's entirety for iPhone-Alert. As many of the individual DisplayType <arrays> can be included as are needed to separate control over the desired keys and key parts to assign color and/or transparency.

    <key>Styles</key>
    <dict>

    <key>iPhone-Alert</key>
    <array>

    <array>
    <string>DisplayType=Key Names;ControlState</string>
    <dict>
    <key>Key Parts</key>
    <string>Custom Color Names or UIKBColor Commands</string>
    </dict>
    </array>


    <key>iPhone-Standard</key>
    <array>...






    Info.plist



    This is another short plist file that can be included in your Theme and Popup folders. It will put your name under the theme's name in the Color Keyboard Settings app where the themes are armed. Just include Your Name in the corresponding <string>:


    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
    <key>Author</key>
    <string>Your Name</string>
    </dict>
    </plist>


    Here's a downloadable sample already set up as shown above:

    Info.plist.zip






    Definitions


    <array></array> and <dict></dict>
    Both are <tags> that will contain sets of "sub" <tags>.


    <array>
    ...<string>*</string>
    ...<dict>
    ......<key>SymbolColor</key>
    ......<string>Symbol</string>
    ...</dict>
    </array>


    <key></key> and <string></string>
    Both of these <tags> are used in many ways together and separately to make callouts (or references to native code) and create definitions to be referenced in the rest of the plist.


    <array>
    ...<string>*</string>
    ...<dict>
    ......<key>SymbolColor</key>
    ......<string>Symbol</string>
    ...</dict>
    </array>


    ControlState
    Number values included in various <keys> to denote the different "States" that the individual Keys can be in:

    <array>
    ...<string>DisplayType=String;ControlState=1,3,4</string>
    ...<dict>
    ......<key>SymbolColor</key>
    ......<string>MySymbol</string>
    ...</dict>
    </array>

    1 = Pressed - When a Key is pressed.
    2 = Disabled - e.g. "Search" Key with no text in the input field.
    3 = Normal - Normal state of a Key when no other ControlSates are affecting it.
    4 = Caps Lock On - When the Shift Key is double tapped to enable Caps Lock.
    6 = Shift Key Auto Pressed - When Apple presses it automatically.
    7 = Shift Key User Pressed - When the user presses it.


    Custom Color Names
    You can name the custom colors you define in <key>CustomColor<key> as you like. I advise naming these colors to describe what they will actually theme rather than to describe the color. This way your plist can be used for multiple themes and only the hex codes will need to be altered.

    <array>
    ...<string>MySymbol</string>
    ...<string>FFFFFFFF</string>
    </array>


    Custom Gradient Names
    Just like Custom color names, advisable to name along the same lines.

    <array>
    ...<string>MyGradient</string>
    ...<string>MyGradFGbegin</string>
    ...<string>MyGradFGend</string>
    </array>


    DisplayType
    The callout for the different theme-able "groups" of Keys.

    <array>
    ...<string>DisplayType=String,Space;ControlState=1,3,</string>
    ...<dict>
    ......<key>SymbolColor</key>
    ......<string>MySymbol</string>
    ...</dict>
    </array>

    Delete = Delete Key
    Dictation = Siri Dictation Key
    DynamicString = The Monetary Symbols only ($, etc.)
    International = The "Globe" key present with International keyboards such as EMOJI enabled
    More = ABC/123 Key
    NumberPad = All keys on the Settings App Passcode Entry, etc. Number Pad
    Return = Search/Enter/Return/Go/Next/Route Key
    Shift = Shift Key
    Space = Spacebar Key
    String = QWERTY/Number/Symbol Keys
    TopLevelDomain = The ".com" and "." Keys on the URL and Email Layouts respectively
    TopLevelDomainVariant = The "unpressed" Keys on the ".com" and "." Variant Popups



    Hex Codes
    Color Keyboard uses Hex triplets, which are comprised of 3 sets of characters representing Red, Green and Blue in that order and then a fourth set to control opacity.

    (2 for Red, 2 for Green, 2 for Blue, 2 for Opacity) Basically: RRGGBBOO

    Color

    Each character can be numbers (0-9) and letters (A-F). The letters are used to go beyond 9 basically, meaning that there are 16 possible values for each character (Zero-F).

    Zero is no value, F is full value. Here are a few examples:

    000000 = Black
    FFFFFF = White
    FF0000 = Red
    00FF00 = Green
    0000FF = Blue

    Opacity

    This value works exactly the same way.

    00 is completely Transparent
    FF is completely Opaque

    So for example:

    000000FF = Completely Opaque Black
    00000011 = Very transparent Black
    00000000 = Completely Transparent


    Key Parts
    These <keys> will be used in the DisplayType <strings> to apply desired color and/or tranparency to the individual parts of the keys.

    <array>
    ...<string>DisplayType=String;ControlState=3</string>
    ...<dict>
    ......<key>EtchColor</key>
    ......<string>MyEtch</string>
    ......<key>HighlightColor</key>
    ......<string>MyHighlight</string>
    ......<key>ForegroundGradient</key>
    ......<string>MyGradient</string>
    ......<key>SymbolColor</key>
    ......<string>MySymbol</string>
    ......<key>SymbolSecondaryColor</key>
    ......<string>My2ndSymbol</string>
    ...</dict>
    </array>

    <key>EtchColor</key> - The "drop shadow" on the Symbol.

    <key>HighlightColor</key> - The thin "highlight" at the top of the Keys.

    <key>ForegroundColor</key> - Uses a solid defined color for Key Foregrounds.

    <key>ForegroundGradient</key> - Uses a defined CustomLinearGradient for Key Foregrounds

    <key>SymbolColor</key> - The Letter/Number/Symbol on the keys.

    <key>SymbolSecondaryColor</key> - This <key> controls:

    Shift - The inner "fill" of the arrow when "pressed".

    Return - The "Pencil" symbol when Siri is "in use".

    NumberPad - The small Letters under the main Numbers.



    KeyPlane
    These are the different sets of Key/Symbol layouts that can occur on most UIKeyboardTypes.

    0 = Upper Case


    1 = Lower Case


    2 = Numbers


    3 = Symbols




    Orientation

    Landscape



    Portrait




    Styles
    "Standard" and "Alert". Both use the exact same Control States and Layouts. The main difference natively is the use of a "Silver" or "Black" Background Gradient respectively, and both must be referenced so that your theme works in both instances.

    Stardard - Almost all instances you encounter.

    Alert - Instances where entering sensitive information such as passwords.


    UIKeyboardType
    These are all of the varying layouts that the keyboard can display.


    Emoji:



    0 = Default
    1 = AsciiCapable
    2 = NumbersAndPunctuation
    3 = URL
    4 = NumberPad
    5 = PhonePad
    6 = NamePhonePad
    7 = EmailAddress
    8 = DecimalPad
    9 = Twitter


    Siri+Emoji:



    256 = Default
    257 = AsciiCapable
    258 = NumbersAndPunctuation
    262 = NamePhonePad
    263 = EmailAddress
    265 = Twitter


    Default:



    512 = Default
    513 = AsciiCapable
    514 = NumbersAndPunctuation
    518 = NamePhonePad
    519 = EmailAddress
    521 = Twitter


    Siri - No Emoji:



    768 = Default
    769 = AsciiCapable
    770 = NumbersAndPunctuation
    774 = NamePhonePad
    775 = EmailAddress
    777 = Twitter



    UIKBColor Commands
    These are like Custom Color Names, only they already exist natively to be used for standard colors. Use them anywhere that you would alternatively use a Custom Color. Here are a few examples:

    UIKBColorClear - Define a part as transparent without having to make a Custom Color.
    UIKBColorBlack
    UIKBColorWhite
    UIKBColorRed

    and so on...



    Variant Popups
    These are the Popups that appear when the corresponding Keys are held in to offer variations of that Symbol.

    For each of the 3 DisplayTypes pictured below, the ControlStates needed are as follows:


    Unselected (Pictured White) Keys:

    ControlState=1


    Selected (Pictured Blue) Keys:

    For Symbol and Etch: ControlState=4

    The Foreground Gradient and Highlight for all 3 are shared by these <arrays> in your plist's <key>CustomColor</key>:

    <array>
    <string>UIKBColorKeyBlueRow1GradientStart</string>
    <string>000000FF</string>
    </array>
    <array>
    <string>UIKBColorKeyBlueRow1GradientEnd</string>
    <string>444444FF</string>
    </array>
    <array>
    <string>UIKBColorKeyBlueRow3Highlight</string>
    <string>505050FF</string>
    </array>



    DynamicString


    String


    TopLevelDomainVariant





    <string>DisplayTypeHint=5000</string>
    <dict>

    This <string> will use it's included <keys> and <strings> to set EtchColor and SymbolColor for "unpressed" Alternate Popup text only in the instance where the normal Etch and Symbol are set to be transparent. It seems to only be useful when using the Background Image Method, as "String" Etch and Symbol are set to be transparent.


    <string>*</string>
    <dict>

    This is a useful <string> that can be used in place of <string>DisplayType=</string> to make it's included <keys> and <strings> true across all Keys.
    Besides the normal Key Parts, the next few definitions are <keys> that might be best used in this <string>.


    <key>EtchDX</key>
    <integer>3</integer>

    This <key> moves the Etch away from the Symbol along the X-axis (left and right).
    A positive number (shown) moves it right, a negative number moves it left.


    <key>EtchDY</key>
    <integer>-3</integer>

    This <key> moves the Etch away from the Symbol along the Y-axis (up and down).
    A positive number moves it down, a negative number (shown) moves it up.


    <key>FontSize</key>
    <integer>30</integer>

    This <key> sets the font size for any DisplayType/KeyName/ * <array> that it is added to.


    <key>KeyRoundRectRadius</key>
    <real>0</real>

    This can be used to force the desired key radius for your theme, though it can be overridden by the user in the CK Settings App using the provided slider. "0" is no radius, and can be replaced with the radius you desire.


    <key>TransparentForeground</key>
    <true/>

    This is an alternative to setting the Key Foregrounds to be transparent using UIKBColorClear, a CustomColor or a CustomLinearGradient.






    iDevice Root Directory Basics


    Just in case for any who are less familiar with copying files to the Root directories of your device, here's a little explanation that will hopefully help:


    The easiest way at this point for the less experienced seems to be iExplorer. It is Free, available for Mac and Windows, and does not make use of "ssh". Begin by downloading the appropriate version here:



    iExplorer - Formerly iPhone Explorer



    Once installed, iExplorer is very simple and user friendly. It can be opened with your device already plugged in, or you can plug your device in once it's open. Either way, it will show the hierarchy in the devices root directory, and allow you to browse to the proper locations and just drag and drop files where they are needed.



    Here's what you will see when it first opens:







    This is the contents of "/" (or the whole hierarchy).

    "/" begins and is the symbol to separate "folders" in any explanations you may have seen in text format such as the location of the Color Keyboard folders:


    /Library/ColorKeyboard/Plugins

    /Library/ColorKeyboard/Popups

    /Library/ColorKeyboard/Themes




    Use the Left Pane to do your "browsing" to the necessary locations.




    Here's what it looks like to browse to the Color Keyboard folders in iExplorer:










    So to use the simple drag and drop functionality of iExplorer, for example browse to:




    /Library/ColorKeyboard/Themes/









    Now open a Windows Explorer / Mac Finder window and browse to the location of the CK themes you want to copy onto the device, and simply drag and drop them into the panel on the right in iExplorer where all of your other already installed CK themes are. (Obviously any files being copied must be unzipped before putting them in place on the device).


    That's it!


    The files are in place and ready to be armed in the Color Keyboard Settings app.




    Do the same for Popups, Plugins, etc...

    Last edited by Phatmartino; 04-14-2013 at 09:32 AM.

  2. The Following 22 Users Say Thank You to Phatmartino For This Useful Post:

    Alfroggy (06-07-2012), Bellcross (02-25-2012), Bonito77 (07-20-2012), brian8534 (07-07-2012), Coop2009 (02-02-2012), cukhiem (11-15-2012), Curryking (04-15-2012), Ian Nicoll (09-27-2011), iZangetsu (09-07-2011), Jato_BZ (07-01-2014), Krak4211 (01-30-2012), KraXik (02-16-2012), onex0is0 (03-13-2012), ReBourne (05-07-2012), Smitbeat (09-27-2013), stratnik (11-22-2011), Trexwarrior (06-11-2012), vXBaKeRXv (04-14-2014), wakeenaushad (04-17-2012), wintrospection (01-26-2013), xtrememan (02-26-2012), Zooropalg (02-18-2013)

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •