Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.
Thread: Color Keyboard Guide
06-01-2011, 12:24 AM #1
Color Keyboard Guide
* 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...
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.
- General Info
- iDevice Root Directory Basics
- Hex Color Method
- Background Image Method
- Hybrid Method
These are the folders used for Color Keyboard theming and their physical locations:
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).
This is where the folder with your Popup images will go.
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
Landscape@2x - 960x324
Portrait@2x - 640x432
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!
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:
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!
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"
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"
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>Orientation;iPhone-Alert or Standard;ControlState</key>
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:
<string>Custom Color Names</string>
If the following and like strings are included, they will set colors here and will not be called out later in the plist.
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.
<string>Custom Gradient Names</string>
<string>Begin color defined above</string>
<string>End color defined above</string>
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.
<string>Custom Color Names or UIKBColor Commands</string>
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">
Here's a downloadable sample already set up as shown above:
<array></array> and <dict></dict>
Both are <tags> that will contain sets of "sub" <tags>.
<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.
Number values included in various <keys> to denote the different "States" that the individual Keys can be in:
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.
Custom Gradient Names
Just like Custom color names, advisable to name along the same lines.
The callout for the different theme-able "groups" of Keys.
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
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
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
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
These <keys> will be used in the DisplayType <strings> to apply desired color and/or tranparency to the individual parts of the keys.
<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.
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
"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.
These are all of the varying layouts that the keyboard can display.
0 = Default
1 = AsciiCapable
2 = NumbersAndPunctuation
3 = URL
4 = NumberPad
5 = PhonePad
6 = NamePhonePad
7 = EmailAddress
8 = DecimalPad
9 = Twitter
256 = Default
257 = AsciiCapable
258 = NumbersAndPunctuation
262 = NamePhonePad
263 = EmailAddress
265 = Twitter
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
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.
and so on...
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:
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>:
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.
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>.
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.
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.
This <key> sets the font size for any DisplayType/KeyName/ * <array> that it is added to.
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.
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:
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:
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).
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.
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)