+ Reply
Page 1 of 35 123 11 ... LastLast
Results 1 to 20 of 696

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


Thread: Color Keyboard Guide

is a discussion within the

Skinning / Themes Discussion

forums, a part of the

Design and Media For the iPhone / iPod Touch

section;
* 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
...
  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
    Color Keyboard Guide-ckguidegreen4.pngColor Keyboard Guide-phatlime.pngColor Keyboard Guide-phatblue3.pngColor Keyboard Guide-phatblue2.pngColor Keyboard Guide-phatred.pngColor Keyboard Guide-ckguidered4.png

    Color Keyboard Guide-phatblack.png



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

  3. #2
    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 Part 2
    Hex Color Method



    This method only requires a theme folder containing a ColorKeyboard.plist file. You will be controlling the color and opacity of the native iOS parts of the keyboard (Background, Keys, Text, etc.) as well as size and spacing for a few elements, using the code in this plist file.

    This method provides the most universally compatible themes of the three methods possible using ColorKeyboard. There can be a wide variation in key layouts between different users with different tweaks and/or international compatibilities enabled. As long as the coding (if necessary) is included, parameters for a wide range of possiblities can exist in the .plist and only be used by the device if needed.


    It is advisable to at least quickly read through the first post where most plist related structure and definitions are covered.


    To make explination a little easier, I'll refer to one of my sample themes that comes with Color Keyboard. If you have iFile, you can make a copy of one of these samples (copy the whole Theme's folder) and open the new plist in iFile's text editor, or a copy can be SSH'd to your computer and if nothing else, any text editor can be used by changing the extension from ".plist" to ".txt". In either case, the CK Themes folder is found here on device:


    /Library/ColorKeyboard/Themes/



    *When editing ColorKeyboard.plist files, it may be advisable if you want to have more than one plist file in the same folder, to leave the one you are working on called "ColorKeyboard.plist", and change the name of a backup to remind you what it is. For instance "1ColorKeyboard.plist", "OrigColorKeyboard.plist", "Phatmartino_Yellow_G1.plist", etc... If needed it can obviously just be changed back to "ColorKeyboard.plist".


    Where necessary, I'll refer to the plist from "Phatmartino_Yellow_G1" as I go through and explain the 3 Main <keys> of the plist:


    1. <key>CustomColor</key>

    2. <key>CustomLinearGradient</key>

    3. <key>Styles</key>





    1. <key>CustomColor</key>


    In this <key> you will create a "dictionary" of your own custom colors using Hex Codes. This "code" has eight characters and will define a specific color, and the opacity of that color. The first six characters are a Hex Triplet, which are comprised of 3 sets of characters representing Red, Green and Blue in that order. You may already be familiar with these as "html colors". The last two characters set the opacity of the preceeding hex triplet.

    (2 for Red, 2 for Green, 2 for Blue, 2 for Opacity)

    Basically: RRGGBBOO

    All 8 characters are needed in these CK hex codes, so if transparency is not needed, just include FF as the last two characters.


    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 Hex Triplet 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:

    FF0000FF = Opaque Red
    FF000011 = very Transparent Red
    00000000 = totally Transparent
    FFFFFF00 = totally Tranparent



    Some Hex Triplet Common Sense:


    Even values in each of the RGB channels will create shades of gray. (101010, 202020, C8C8C8, etc.)


    You can make minor adjustments to your colors by making even changes to the right values.

    - For example if FF0000 is too bright, change to EE0000, DD0000, etc.


    If you come up with a value you want to be one of the colors for one of your elements, you can easily create a secondary color for that element by evenly altering the values that make the color.

    - For example: If you have 669900, evenly alter the R+G values to make a lighter version: AADD00, or a darker version: 336600 (evenly meaning the difference between each channel: 6 and 9, A and D, 3 and 6)


    You can also use this principal to change multiple colors evenly.

    - For example: If you've come up with 669900 and AADD00 as two values for an element, and you want to evenly darken both, try 558800 and 99CC00.


    All examples so far are very simplistic and generally easy to look at symmetrical values. To create just the right colors for you will involve much more random looking codes. The same theory about slightly altering that almost perfect code apply.

    - For example: to slightly darken A46EC7, try 935DB6.


    An Eyedropper tool like in Photoshop will provide Hex Triplets right from images of say elements of your overall devices theme to make your keyboard perfectly match.





    Defining Your Custom Colors



    The first thing to decide is what kind of color scheme you want, and how many custom colors it will take to make it happen. Most parts of the keyboard such as the Symbols (or "text") and it's Etch (or "drop shadow") can each only be made one solid color, where for the Background (behind the keys) and the Foreground (the keys themselves), a gradient can be applied.


    Here's a recap of the main parts to keep in mind when deciding how many colors you need to define:


    SymbolColor - 1 color

    Etch - 1 color

    SymbolSecondaryColor - 1 color

    HighlightColor - 1 color

    ForegroundColor - 1 color

    ForegroundGradient - 2 colors




    So if you make a theme that has all of the keys on the keyboard look the same as each other, the above list might be around the maximum number of definitions needed. If you want to have the "secondary" (Delete, Return, Shift, Space, etc.) keys have a different look, it might require up to twice as many definitions, and so on... It is possible to eliminate the need to custom define standard colors such as Black, White, Red, etc, using native commands later in the plist, but if you take the time to define all of the colors yourself, it allows for easy copying and modding of the same plist, only requiring you to alter the Hex Codes in the <key>CustomColor</key>.


    Most stock and custom themes define the custom colors using "Names" that describe the color. This creates the need to change a lot more text when you make different themes, so I immediately started writing my plists to "name" the definitions to describe what they are theming. This allows for easy copying of a theme and editing of only the Hex Codes.

    Below is the <key>Custom Color</key> from Phatmartino_Yellow_G1


    There are 2 parts to each of my definition "names". First the Key, then the Part of the key, so the names are essentially: KeyPart


    These are the Keys defined:

    Qwerty - "String" (or "Qwerty") and "Spacebar"
    Secondary - "Shift", "Delete", "ABC", "Return", "Dictation"
    Disabled - "Search" with no text entered.


    These are the Parts defined:

    Hlight - Thin Highlight at top of key
    Etch - Highlight of the key's Symbol
    Symbol - The actual Letter/Number, etc.
    FGbegin - The Foreground Gradient's value at the top of the key.
    FGend - The Foreground Gradient's value at the bottom of the key


    So for example, the first definition in the following plist is QwertySymbol, which will define the Symbol (Text) color on all Qwerty and Spacebar keys, and so on.


    <key>CustomColor</key>
    <array>
    <array>
    <string>QwertySymbol</string>
    <string>FFFF00FF</string>
    </array>
    <array>
    <string>QwertyEtch</string>
    <string>000000FF</string>
    </array>
    <array>
    <string>QwertyHlight</string>
    <string>323232FF</string>
    </array>
    <array>
    <string>QwertyFGbegin</string>
    <string>000000FF</string>
    </array>
    <array>
    <string>QwertyFGend</string>
    <string>252525FF</string>
    </array>
    <array>
    <string>SecondarySymbol</string>
    <string>FFFFFFFF</string>
    </array>
    <array>
    <string>SecondaryEtch</string>
    <string>000000FF</string>
    </array>
    <array>
    <string>SecondaryHlight</string>
    <string>AAAA00FF</string>
    </array>
    <array>
    <string>SecondaryFGbegin</string>
    <string>666600FF</string>
    </array>
    <array>
    <string>SecondaryFGend</string>
    <string>FFFF00FF</string>
    </array>
    <array>
    <string>DisabledSymbol</string>
    <string>999999FF</string>
    </array>
    <array>
    <string>DisabledEtch</string>
    <string>505050FF</string>
    </array>


    For the rest of the <key>CustomColor</key>, these are definitions that will not be referenced anywhere else in the plist. The Hex Codes for these elements will just be defined and applied here.


    The top 2 (1 pixel wide) rows of the background that can be used to create a bevel, or highlight.
    <array>
    <string>UIKBColorBackgroundStandardLine1</string>
    <string>202020FF</string>
    </array>
    <array>
    <string>UIKBColorBackgroundStandardLine2</string>
    <string>101010FF</string>
    </array>

    The color that starts your Background gradient at the top of the keyboard.
    <array>
    <string>UIKBColorBackgroundStandardGradientStart </string>
    <string>000000FF</string>
    </array>

    The color that ends your Background gradient at the bottom of the keyboard.
    <array>
    <string>UIKBColorBackgroundStandardGradientEnd</string>
    <string>202020FF</string>
    </array>

    These should be made to be same as the above four if you want your kb to look the same when in "Alert" mode.
    <array>
    <string>UIKBColorBackgroundAlertLine1</string>
    <string>101010FF</string>
    </array>
    <array>
    <string>UIKBColorBackgroundAlertLine2</string>
    <string>202020FF</string>
    </array>
    <array>
    <string>UIKBColorBackgroundAlertGradientStart</string>
    <string>000000FF</string>
    </array>
    <array>
    <string>UIKBColorBackgroundAlertGradientEnd</string>
    <string>202020FF</string>
    </array>

    These will set the Highlight and Gradient of the "selected" Key on the Alternate (Extended) Popups.
    <array>
    <string>UIKBColorKeyBlueRow3Highlight</string>
    <string>AAAA00FF</string>
    </array>
    <array>
    <string>UIKBColorKeyBlueRow1GradientStart</string>
    <string>FFFF00FF</string>
    </array>
    <array>
    <string>UIKBColorKeyBlueRow1GradientEnd</string>
    <string>000000FF</string>
    </array>
    </array>





    2. <key>CustomLinearGradient</key>


    This is where you will assign the Gradient "begin" and "end" <strings> you defined above to a single Gadient definition <string> that will be used where needed in the rest of the plist.

    For a quick example using the QwertyFG definitions from the above example we will create <string>QwertyGradient</string>.


    <key>CustomLinearGradient</key>
    <array>
    <array>
    <string>QwertyGradient</string>
    <string>QwertyFGbegin</string>
    <string>QwertyFGend</string>
    </array>


    And so on for all needed gradients for Key Foregrounds.





    3. <key>Styles</key>


    This <key> makes up the rest of the plist and contains two <keys>:


    <key>iPhone-Alert</key>

    <key>iPhone-Standard</key>



    In most instances you can perfect the <Key>iPhone-Standard</key> and then just copy it's entirety into the <key>iPhone-Alert</key>. I start with Standard because it only takes a respring and a flip to the Spotlight page to check out your results.

    So we'll take a look at what's necessary for the <key>iPhone-Standard</key>.

    The most commonly used <arrays> include "DisplayType=" <strings>.

    These allow you to assign your Custom Colors to all parts of the keys in "groups" that you include in each <string>DisplayType</string>.

    Here's the first <array> in the sample plist:


    <array>
    <string>DisplayType=DynamicString,String,DualStrin g,Space,TopLevelDomain,TopLevelDomainVariant;Contr olState=3</string>
    <dict>
    <key>EtchColor</key>
    <string>QwertyEtch</string>
    <key>ForegroundGradient</key>
    <string>QwertyGradient</string>
    <key>HighlightColor</key>
    <string>QwertyHlight</string>
    <key>SymbolColor</key>
    <string>QwertySymbol</string>
    <key>SymbolSecondaryColor</key>
    <string>QwertySymbol</string>
    </dict>
    </array>



    You'll include a list after "DisplayType=" separated by commas. This list can be made up of as many Diplaytypes as you want to have share the Colors that the rest of this <array> will apply. In the above example, the "list" basically covers all String or "Qwerty" Keys and the Spacebar.

    Here's a list of at least the most commonly used DisplayTypes:

    Delete = Delete Key
    Dictation = Siri Dictation Key
    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 = ".com" Key for example
    TopLevelDomainVariant = ".com" Key on it's "Variant" Popup



    At the end of your list, ;ControlState= can be added, and one or more numbers can be included, also in a list separated by commas:


    <string>DisplayType=Shift;ControlState=3</string>

    <string>DisplayType=Shift;ControlState=1,3,4,6,7 </string>




    ControlStates:

    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.



    After the <string>DisplayType</string> is a <dict>. This is also a list. Each <key>KeyPart</key> is followed by a <string>Variable</string> to assign your Custom Defined Colors and Gradients.


    <dict>
    <key>EtchColor</key>
    <string>QwertyEtch</string>
    <key>ForegroundGradient</key>
    <string>QwertyGradient</string>
    <key>HighlightColor</key>
    <string>QwertyHlight</string>
    <key>SymbolColor</key>
    <string>QwertySymbol</string>
    <key>SymbolSecondaryColor</key>
    <string>QwertySymbol</string>
    </dict>

    Syntax
    Variable (Your Custom Color Names)





    There are a few other ways to use these <arrays>. Here's another example, and then corresponding explination:


    <array>
    <string>*</string>
    <dict>
    <key>EtchColor</key>
    <string>QwertyEtch</string>
    <key>ForegroundGradient</key>
    <string>QwertyGradient</string>
    <key>HighlightColor</key>
    <string>QwertyHlight</string>
    <key>SymbolColor</key>
    <string>QwertySymbol</string>
    <key>SymbolSecondaryColor</key>
    <string>QwertySymbol</string>
    <key>FontSize</key>
    <integer>32</integer>
    <key>EtchDX</key>
    <integer>3</integer>
    <key>EtchDY</key>
    <integer>-3</integer>
    <key>KeyRoundRectRadius</key>
    <real>4</real>
    </dict>
    </array>



    <string>*</string> = ALL. What follows will be applied to all keys regardless of DisplayType or ControlState.

    This can be used to set parameters that you want to be true everywhere. If a <string>*</string> is used, you can override these settings for specific instances by also including <string>DisplayType=</strings> and setting the parameters differently. Here's a miniature example:

    <array>
    <string>*</string>
    <dict>
    <key>FontSize</key>
    <integer>32</integer>
    </dict>
    </array>

    <array>
    <string>DisplayType=String;ControlState=1</string>
    <dict>
    <key>FontSize</key>
    <integer>36</integer>
    </dict>
    </array>


    The above example would set the Font Size to be 32 everywhere except on the Qwerty "Pressed" Keys (which are the Popups) where it will be 36.



    <key>EtchDX</key> = Etch position right (3) and left (-3) on the x-axis.

    <key>EtchDY</key> = Etch position up (3) and down (-3) on the y-axis.



    <key>KeyRoundRectRadius</key> = The radius (in pixels) of the corners of the keys.

    <real>0</real> = Squared corners

    <real>4</real> = Roughly native iOS

    <real>12</real> = Oval



    Another thing to consider are instances where "animation" can be achieved when most Keys that don't have Popups are pressed. These include Secondary Keys like Delete, Return, Shift, Space, and NumberPads.

    In my sample themes, the Secondary Keys are colored differently than the Qwerty keys. For these "animations", I just made the applicable Secondary Keys change to match the Qwerty Keys when pressed. Of course the Spacebar is colored the same as the Qwerty Keys, but also has no Popup, so I made it change to match the Secondary Keys when pressed.

    Here's a few <arrays> from the sample plist to show how this can be done.


    Normal ControlState:

    <array>
    <string>DisplayType=NumberPad;ControlState=3</string>
    <dict>
    <key>EtchColor</key>
    <string>QwertyEtch</string>
    <key>ForegroundGradient</key>
    <string>QwertyGradient</string>
    <key>HighlightColor</key>
    <string>SecondaryFGend</string>
    <key>SymbolColor</key>
    <string>QwertySymbol</string>
    <key>SymbolSecondaryColor</key>
    <string>SecondarySymbol</string>
    </dict>
    </array>

    Pressed ControlState:

    <array>
    <string>DisplayType=NumberPad;ControlState=1</string>
    <dict>
    <key>EtchColor</key>
    <string>SecondaryEtch</string>
    <key>ForegroundGradient</key>
    <string>2ndGradient</string>
    <key>HighlightColor</key>
    <string>SecondaryFGend</string>
    <key>SymbolColor</key>
    <string>SecondarySymbol</string>
    <key>SymbolSecondaryColor</key>
    <string>SecondarySymbol</string>
    </dict>
    </array>




    The best thing to do when starting out is definitely to begin altering an existing plist. The Phatmartino_~_G1 plists are a good place to start with the naming system for the Custom Colors already in place. You will begin to see where and why more Custom Colors, DisplayTypes, ControlStates, etc. may be needed, and hopefully now have some background to start editing!

    I'll never be done trying to include every scrap of info that could be necessary to push Color Keyboard all the way to the limits of compatiblility (which it can almost entirely achieve), but here's a link to Yoo Seung Kim's Color Keyboard Project site, which includes an amazing wealth of known iOS colors/gradients and needed terminology.



    http://colorkeyboard.9eye.net


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

  4. The Following 20 Users Say Thank You to Phatmartino For This Useful Post:

    Alfroggy (12-11-2012), Blue (05-04-2012), Bonito77 (07-20-2012), calfergo (07-19-2011), flybritn (12-16-2012), Ian Nicoll (09-27-2011), It's Mi (08-22-2011), iZangetsu (09-01-2011), Jahooba (07-08-2011), jarniella (08-22-2011), jima6636 (03-29-2012), k.nitsua (11-26-2011), onex0is0 (03-13-2012), Rakim (08-24-2011), Sk37cH (07-21-2012), stormcrow (05-23-2013), stratnik (11-22-2011), whosiao (09-01-2011), wintrospection (01-26-2013), xtrememan (02-26-2012)

  5. #3
    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

    Background Image Method





    Here are a few downloads that will help get started using the Background Image Method:


    CKG-BG-NativeScreens.zip

    CKG-BG-Pads.zip






    This method requires a Theme folder containing a ColorKeyboard.plist file, as well as a number of images that must be made using Photoshop or a similar application. The plist will be used to make nearly every part of the native iOS keyboard transparent, allowing the images you include to be seen. These images will be static "snapshots" of the whole keyboard in all of it's different forms.


    This method is by far the most involved, but allows you to create nearly every last detail, rather than relying on anything native (text,symbols, etc.) being displayed.


    I've been working on Photoshop template PSDs that I intend to post eventually, but with all of the iOS and subsequent CK updates, I'm still working to update and keep things as simple as possible. For now, download the sets of Native Screenshots included above.


    These images are named to make use of the provided Colorkeyboard.plist. The two "themes" provided are a good example of what (for now) is needed to cover all users on iOS5+, and maintain almost perfect compatibility with all of the latest keyboard variations. There are many instances of images that are exactly the same except for a few keys, but they all need to be made or users will encounter instances where the images don't represent the inputs available.


    Image Sizes


    Landscape - 480x162
    Landscape@2x - 960x324

    Portrait - 320x216
    Portrait@2x - 640x432


    The "@2x" is needed in the image file names for Retina sized images, but the "@2x" will not be included in the plist code that calls these images.



    Everyone will have their own methods of making the images to recreate the included Screenshots, so for now I'll jump right into the plist needed for this method. Where necessary, I'll refer to the included sample plist as I go through each of the 4 main <keys>:




    1.<key>BackgroundImages</key>

    2. <key>CustomColor</key>

    3. <key>CustomLinearGradient</key>

    4. <key>Styles</key>







    1. <key>BackgroundImages</key>

    This <key> is where callouts are made to reference the Background Images that you will include in your theme's folder.

    It can be slightly dizzying at first looking at all of the different possible keyboard layouts. There are 4 controlling factors that makeup each layout: Orientation, Style, KeyPlane and UIKeyboardType.



    Orientation


    This refers to the two orientations, Portrait and Landscape.



    Style


    This refers to the Keyboard Styles: Alert, Standard and Dictation.



    KeyPlane


    This changes a few "Secondary" as well as all "Qwrty" Keys between:

    0 = Upper Case Letters
    1 = Lower Case Letters
    2 = Numbers
    3 = Symbols



    UIKeyboardType


    These include some changes to the "Secondary" Keys mixed with the above KeyPlanes, as well as all "NumberPads":

    0 = Default
    1 = ASCIICapable
    2 = NumbersAndPunctuation
    3 = URL
    4 = NumberPad
    5 = PhonePad
    6 = NamePhonePad
    7 = EmailAddress
    8 = DecimalPad
    9 = Twitter
    256 = Default (Siri)
    257 = ASCIICapable (Siri)
    258 = NumbersAndPuntuation (Siri)
    262 = NamePhonePad (Siri)
    263 = EmailAddress (Siri)
    265 = Twitter (Siri)

    (Siri) - These are obviously repeats of 6 of the single digit UIKeyboardTypes, only the Siri Dictation key is included. This alllows you to call them out separately and make one theme work for almost everyone.



    When the keyboard is being used, Color Keyboard takes "requests" from the iOS as to what keyboard layout needs to be displayed depending on what you are doing, and CK will pull the closest possible layout that the theme includes.


    In the <key>BackgroundImage</key>, there is one <dict> that includes a list of <keys>, each followed by an input <string>.


    The sytax for these sets of <keys> is:

    <key>Parameter;Parameter;Parameter...</key>
    <string>YourImage.png</string>



    Adding a bit of CK syntax:

    <key>Orientation;Style;Keyplane;UIKeyboardType</key>
    <string>Orient-KeyPlane-UIKBType.png</string>



    In the <keys>, each Parameter added beyond the first one (Orientation) specifies further and further when the corresponding image will be used.



    Here's a simplistic example of the code included in the Background Image <dict> .


    <key>BackgroundImages</key>
    <dict>
    <key>Landscape;iPhone-Alert</key>
    <string>L.png</string>
    <key>Landscape;iPhone-Standard</key>
    <string>L.png</string>
    <key>Portrait;iPhone-Alert</key>
    <string>P.png</string>
    <key>Portrait;iPhone-Standard</key>
    <string>P.png</string>
    </dict>


    The above <dict> will set 2 included images, L(@2x).png and P(@2x).png, to be displayed for all KeyPlanes and UIKeyboardTypes. The only specified perameters are Portrait/Landscape and Alert/Standard. So L(@2x).png will be used for all instances in Landscape Orientation in both Alert and Standard modes, and P(@2x).png will be used for all instances in Portrait Orientation in both Alert and Standard modes.



    The KeyPlane and UIKeyboardType codes can be included in each <key> to start to further specify when the image will be used. The following example adds a KeyPlane code:


    <key>BackgroundImages</key>
    <dict>
    <key>Landscape;iPhone-Alert;0</key>
    <string>L.png</string>
    <key>Landscape;iPhone-Standard;0</key>
    <string>L.png</string>
    <key>Portrait;iPhone-Alert;0</key>
    <string>P.png</string>
    <key>Portrait;iPhone-Standard;0</key>
    <string>P.png</string>
    </dict>

    The above example would set the 2 included images to be used for all Keyplane=0 instances with Upper Case Letters. It's not necessary to include the UIKeyboardType=0 code as shown above, but all other UIKeyboardType's codes do need to be included. They can be added after the Keyplane code followed by another semicolon:



    <key>BackgroundImages</key>
    <dict>
    <key>Landscape;iPhone-Alert;0</key>
    <string>L-0.png</string>
    <key>Landscape;iPhone-Alert;0;3</key>
    <string>L-0-3.png</string>
    <key>Landscape;iPhone-Alert;0;7</key>
    <string>L-0-7.png</string>
    <key>Landscape;iPhone-Alert;0;9</key>
    <string>L-0-9.png</string>
    ...


    The above example starts to show the reasoning for the system I like to use to name my images. It wont take long to become very familiar with the code numbers, which helps while editing the plist and you can always identify the images just by looking at the file names.



    I'll point out here that however many images are included in the theme, more than twice as many callout <keys> like shown above are necessary to make the theme work properly.



    Here's an example that's simple as far as how many Keyplanes and UIKeyboardTypes it would successfuly cover, but shows the more obvious "duplication" of callouts needed in the plist:



    <key>BackgroundImages</key>
    <dict>

    <key>Landscape;iPhone-Alert;0</key>
    <string>L-0.png</string>
    <key>Landscape;iPhone-Alert;0;3</key>
    <string>L-0-3.png</string>
    <key>Landscape;iPhone-Alert;0;7</key>
    <string>L-0-7.png</string>
    <key>Landscape;iPhone-Alert;0;9</key>
    <string>L-0-9.png</string>
    <key>Landscape;iPhone-Standard;0</key>
    <string>L-0.png</string>
    <key>Landscape;iPhone-Standard;0;3</key>
    <string>L-0-3.png</string>
    <key>Landscape;iPhone-Standard;0;7</key>
    <string>L-0-7.png</string>
    <key>Landscape;iPhone-Standard;0;9</key>
    <string>L-0-9.png</string>
    <key>Portrait;iPhone-Alert;0</key>
    <string>P-0.png</string>
    <key>Portrait;iPhone-Alert;0;3</key>
    <string>P-0-3.png</string>
    <key>Portrait;iPhone-Alert;0;7</key>
    <string>P-0-7.png</string>
    <key>Portrait;iPhone-Alert;0;9</key>
    <string>P-0-9.png</string>
    <key>Portrait;iPhone-Standard;0</key>
    <string>P-0.png</string>
    <key>Portrait;iPhone-Standard;0;3</key>
    <string>P-0-3.png</string>
    <key>Portrait;iPhone-Standard;0;7</key>
    <string>P-0-7.png</string>
    <key>Portrait;iPhone-Standard;0;9</key>
    <string>P-0-9.png</string>
    </dict>



    Shown above are 16 callouts that only reference 8 different images. All images need to be made in Portrait and Landscape aspect ratio, and are each called out twice in the plist for Alert and then Standard mode.




    Next I'll get into looking at all of the Keyplanes and UIKeyboardTypes necessary. To conserve space, I'll concentrate on only Landscape Mode. Specifically I'll show the Alert callouts right at the beginning of the sample plist. Generally the names of the images reflect the KeyPlane/UIKeyboardType code, so I'll try to point out the instances where images are "repeated" within <key>Landscape;iPhone-Alert</key>:



    <key>Landscape;iPhone-Alert;0</key>
    <string>L-0.png</string>
    <key>Landscape;iPhone-Alert;0;3</key>
    <string>L-0-3.png</string>
    <key>Landscape;iPhone-Alert;0;6</key>
    <string>L-1.png</string>
    <key>Landscape;iPhone-Alert;0;7</key>
    <string>L-0-7.png</string>
    <key>Landscape;iPhone-Alert;0;9</key>
    <string>L-0-9.png</string>
    <key>Landscape;iPhone-Alert;0;256</key>
    <string>L-0-256.png</string>
    <key>Landscape;iPhone-Alert;0;257</key>
    <string>L-0-257.png</string>
    <key>Landscape;iPhone-Alert;0;258</key>
    <string>L-0-256.png</string>
    <key>Landscape;iPhone-Alert;0;262</key>
    <string>L-1-256.png</string>
    <key>Landscape;iPhone-Alert;0;263</key>
    <string>L-0-263.png</string>
    <key>Landscape;iPhone-Alert;0;265</key>
    <string>L-0-265.png</string>

    <key>Landscape;iPhone-Alert;1</key>
    <string>L-1.png</string>
    <key>Landscape;iPhone-Alert;1;3</key>
    <string>L-1-3.png</string>
    <key>Landscape;iPhone-Alert;1;6</key>
    <string>L-0.png</string>
    <key>Landscape;iPhone-Alert;1;7</key>
    <string>L-1-7.png</string>
    <key>Landscape;iPhone-Alert;1;9</key>
    <string>L-1-9.png</string>
    <key>Landscape;iPhone-Alert;1;256</key>
    <string>L-1-256.png</string>
    <key>Landscape;iPhone-Alert;1;257</key>
    <string>L-1-257.png</string>
    <key>Landscape;iPhone-Alert;1;258</key>
    <string>L-1-256.png</string>
    <key>Landscape;iPhone-Alert;1;262</key>
    <string>L-0-256.png</string>
    <key>Landscape;iPhone-Alert;1;263</key>
    <string>L-1-263.png</string>
    <key>Landscape;iPhone-Alert;1;265</key>
    <string>L-1-265.png</string>

    <key>Landscape;iPhone-Alert;2</key>
    <string>L-2.png</string>
    <key>Landscape;iPhone-Alert;2;3</key>
    <string>L-2-3.png</string>
    <key>Landscape;iPhone-Alert;2;7</key>
    <string>L-2-7.png</string>
    <key>Landscape;iPhone-Alert;2;9</key>
    <string>L-2.png</string>
    <key>Landscape;iPhone-Alert;2;256</key>
    <string>L-2-256.png</string>
    <key>Landscape;iPhone-Alert;2;257</key>
    <string>L-2-257.png</string>
    <key>Landscape;iPhone-Alert;2;258</key>
    <string>L-2-256.png</string>
    <key>Landscape;iPhone-Alert;2;263</key>
    <string>L-2-263.png</string>
    <key>Landscape;iPhone-Alert;2;265</key>
    <string>L-2-256.png</string>

    <key>Landscape;iPhone-Alert;3</key>
    <string>L-3.png</string>
    <key>Landscape;iPhone-Alert;3;3</key>
    <string>L-3-3.png</string>
    <key>Landscape;iPhone-Alert;3;7</key>
    <string>L-3-7.png</string>
    <key>Landscape;iPhone-Alert;3;9</key>
    <string>L-3.png</string>
    <key>Landscape;iPhone-Alert;3;256</key>
    <string>L-3-256.png</string>
    <key>Landscape;iPhone-Alert;3;257</key>
    <string>L-3-257.png</string>
    <key>Landscape;iPhone-Alert;3;258</key>
    <string>L-3-256.png</string>
    <key>Landscape;iPhone-Alert;3;263</key>
    <string>L-3-263.png</string>
    <key>Landscape;iPhone-Alert;3;265</key>
    <string>L-3-256.png</string>





    NumberPads


    The sample plist uses Hex Codes to theme all of the NumberPad variations. If you want your theme to be as all inclusive as possible and have the NumberPads match the look you've come up with for the rest of theme, images can be used for them in the exact same way as above. There are 5 different sets of "Pads", and all of them need a Portrait and Landscape version for 10 images total. The CKG-BG-Pads.zip includes similar Native screenshots to use as templates.


    This is the code to add to the <key>BackgroundImages</key> if you decide to make images for all of the Pads:


    <key>Landscape;iPhone-Alert;0;4</key>
    <string>L-0-4.png</string>
    <key>Landscape;iPhone-Alert;0;5</key>
    <string>L-0-5.png</string>
    <key>Landscape;iPhone-Alert;0;8</key>
    <string>L-0-8.png</string>
    <key>Landscape;iPhone-Alert;1;5</key>
    <string>L-1-5.png</string>
    <key>Landscape;iPhone-Alert;2;6</key>
    <string>L-2-6.png</string>

    <key>Landscape;iPhone-Standard;0;4</key>
    <string>L-0-4.png</string>
    <key>Landscape;iPhone-Standard;0;5</key>
    <string>L-0-5.png</string>
    <key>Landscape;iPhone-Standard;0;8</key>
    <string>L-0-8.png</string>
    <key>Landscape;iPhone-Standard;1;5</key>
    <string>L-1-5.png</string>
    <key>Landscape;iPhone-Standard;2;6</key>
    <string>L-2-6.png</string>

    <key>Portrait;iPhone-Alert;0;4</key>
    <string>P-0-4.png</string>
    <key>Portrait;iPhone-Alert;0;5</key>
    <string>P-0-5.png</string>
    <key>Portrait;iPhone-Alert;0;8</key>
    <string>P-0-8.png</string>
    <key>Portrait;iPhone-Alert;1;5</key>
    <string>P-1-5.png</string>
    <key>Portrait;iPhone-Alert;2;6</key>
    <string>P-2-6.png</string>

    <key>Portrait;iPhone-Standard;0;4</key>
    <string>P-0-4.png</string>
    <key>Portrait;iPhone-Standard;0;5</key>
    <string>P-0-5.png</string>
    <key>Portrait;iPhone-Standard;0;8</key>
    <string>P-0-8.png</string>
    <key>Portrait;iPhone-Standard;1;5</key>
    <string>P-1-5.png</string>
    <key>Portrait;iPhone-Standard;2;6</key>
    <string>P-2-6.png</string>




    Siri Dictation


    When the Dictation Key is hit on any keyboard layout, the "Keyboards" that pop up have a layout that only includes a large "Done" Key. Images can be called out for these as well.


    All that's needed is a Landscape image and a Portrait image. The image sizes are the same as all others used for Port and Land, but the Landscape image works differently. Only the top 200 pixels of the 324px height will be seen. The rest is beyond the bottom of the screen. These Native screens are included in both of the CKG-BG Theme folders, but I'll show the Landscape here where it's mentioned:

    Color Keyboard Guide-siri-l-2x.png

    Here's the code in the sample plist that calls out these images. The only variable is Orientation, and they're both the same new Style: iPhone-Dictation

    <key>Landscape;iPhone-Dictation</key>
    <string>Siri-L.png</string>
    <key>Portrait;iPhone-Dictation</key>
    <string>Siri-P.png</string>




    The microphone on these images can be themed via Winterboard.







    2. <key>CustomColor</key>



    This is where you can define custom colors to be used later in the plist. These hex codes are set to control the colors and opacity of the few native iOS parts that are still necessary, as they are not on your Background Images.

    I'll list the <key>CustomColor</key> from the sample plist and insert explination between each set as to what they control. The "Names" that I've given these custom colors generally describe what they are used for. This allows for your plist to be endlessly re-used for other themes, and all you'll have to change are the Hex Codes to vary the colors.

    <key>CustomColor</key>
    <array>

    The Text on Variant Popup "Unselected" Keys
    <array>
    <string>HintColor</string>
    <string>FFFFFFFF</string>
    </array>

    The Text on the Normal Popups
    <array>
    <string>PopSymbol</string>
    <string>C5C5C5FF</string>
    </array>

    The Text on the Variant Popup "Selected" Key
    <array>
    <string>PopSymbol2</string>
    <string>C5C5C5FF</string>
    </array>

    The Etch on the Normal Popup's Text
    <array>
    <string>PopEtch</string>
    <string>00000000</string>
    </array>

    The Foreground Gradient Begin and End of the Variant Popup "Unselected" Keys
    <array>
    <string>AltPopFGbegin</string>
    <string>C5C5C5FF</string>
    </array>
    <array>
    <string>AltPopFGend</string>
    <string>C5C5C5FF</string>
    </array>

    The Main Symbol on the "Unpressed" NumberPad Keys
    <array>
    <string>NpadSymbol</string>
    <string>FFFFFFFF</string>
    </array>

    The Etch of the Main Symbol on the "Unpressed" NumberPad Keys
    <array>
    <string>NpadEtch</string>
    <string>00000000</string>
    </array>

    The Smaller Letters under the Main Symbols on the "Unpressed" NumberPad Keys
    <array>
    <string>Npad2ndSymbol</string>
    <string>FFFFFFFF</string>
    </array>

    The Foreground Gradient Begin and End of the "Unpressed" NumberPad Keys
    <array>
    <string>NpadFGbegin</string>
    <string>000000FF</string>
    </array>
    <array>
    <string>NpadFGend</string>
    <string>000000FF</string>
    </array>

    The Main Symbol on the "Pressed" NumberPad Keys
    <array>
    <string>NpadPressedSymbol</string>
    <string>000000FF</string>
    </array>

    The Etch of the Main Symbol on the "Pressed" NumberPad Keys
    <array>
    <string>NpadPressedEtch</string>
    <string>00000000</string>
    </array>

    The Smaller Letters under the Main Symbols on the "Pressed" NumberPad Keys
    <array>
    <string>NpadPressed2ndSymbol</string>
    <string>000000FF</string>
    </array>

    The Foreground Gradient Begin and End of the "Pressed" NumberPad Keys
    <array>
    <string>NpadPressedFGbegin</string>
    <string>CCCCCCFF</string>
    </array>
    <array>
    <string>NpadPressedFGend</string>
    <string>CCCCCCFF</string>
    </array>



    The rest of the <key>CustomColor</key> works differently in that you're not defining colors to reference later in the plist. These are iOS UIKB Colors who's value changes will be implemented right here.



    Most of these control the Native Hex Colored Background, so these are all set to be transparent, and shouldn't need to be changed.
    <array>
    <string>UIKBColorBackgroundStandardLine1</string>
    <string>FFFFFF00</string>
    </array>
    <array>
    <string>UIKBColorBackgroundStandardLine2</string>
    <string>FFFFFF00</string>
    </array>
    <array>
    <string>UIKBColorBackgroundStandardGradientStart </string>
    <string>FFFFFF00</string>
    </array>
    <array>
    <string>UIKBColorBackgroundStandardGradientEnd</string>
    <string>FFFFFF00</string>
    </array>
    <array>
    <string>UIKBColorBackgroundAlertLine1</string>
    <string>FFFFFF00</string>
    </array>
    <array>
    <string>UIKBColorBackgroundAlertLine2</string>
    <string>FFFFFF00</string>
    </array>
    <array>
    <string>UIKBColorBackgroundAlertGradientStart</string>
    <string>FFFFFF00</string>
    </array>
    <array>
    <string>UIKBColorBackgroundAlertGradientEnd</string>
    <string>FFFFFF00</string>
    </array>

    These three control the Foreground Gradient and Highlight Color of the Variant Popup "Selected" Key
    <array>
    <string>UIKBColorKeyBlueRow1GradientStart</string>
    <string>000000FF</string>
    </array>
    <array>
    <string>UIKBColorKeyBlueRow1GradientEnd</string>
    <string>000000FF</string>
    </array>
    <array>
    <string>UIKBColorKeyBlueRow3Highlight</string>
    <string>00000000</string>
    </array>
    </array>








    3. <key>CustomGradient</key>



    In this <key> the Custom Gradient Begin and End values defined earlier in the <key>CustomColorKey</key>, will be put together to define your Custom Gradients.



    This is the format, not the syntax. Each <strings> value is a name that you can make whatever you like.


    <array>
    <string>Gradient</string>
    <string>begin</string>
    <string>end</string>
    </array>



    Here's the <key>CustomLinearGradient</key> from the sample plist:


    <key>CustomLinearGradient</key>
    <array>
    <array>
    <string>AltPopGradient</string>
    <string>AltPopFGbegin</string>
    <string>AltPopFGend</string>
    </array>

    <array>
    <string>Npad1stGrad</string>
    <string>NpadFGbegin</string>
    <string>NpadFGend</string>
    </array>

    <array>
    <string>Npad2ndGrad</string>
    <string>NpadPressedFGbegin</string>
    <string>NpadPressedFGend</string>
    </array>

    </array>


    So these Gradients were made to be used for:

    Alt or Variant Popup's "Unselected" Key Foregrounds
    NumberPad "Unpressed" Key Foregrounds
    NumberPad "Pressed" Key Foregrounds









    4. <key>Styles</key>



    This <key> makes up the rest of the plist and contains two <keys>:


    <key>iPhone-Alert</key>

    <key>iPhone-Standard</key>




    In most instances you can perfect the <Key>iPhone-Standard</key> and then just copy it's entirety into the <key>iPhone-Alert</key>. I start with Standard because it only takes a respring and a flip to the Spotlight page to check out your results.


    So we'll take a look at what's necessary for the <key>iPhone-Standard</key>.


    Here's a recap of some needed terminology:


    KeyNames

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


    KeyParts

    <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> - The Shift Key Arrow and NumberPad Letters


    ControlStates

    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.




    <key>iPhone-Standard</key>

    You will include <arrays> that set parameters the same way KeyPlanes and UIKBTypes were used, only this is even more specific direction involving sets of native Keys and Symbols. Most of these sets and all of the "parts" they're made up of will be made to be transparent in these <arrays>, but the ones that we created Custom Colors for earlier will be applied here as well.


    There are a few types of <strings> that can be used in these <arrays>. Most commonly used are:



    <string>*</string>


    <array>
    <string>*</string>
    <dict>
    <key>KeyPart</key>
    <string>CustomColor or UIKBColor</string>
    </dict>
    </array>

    This <array> will set the Parameters in the <dict> to all Keys on all ControlStates.




    <string>DisplayType=</string>


    <array>
    <string>DisplayType=KeyName;ControlState</string>
    <dict>
    <key>KeyPart</key>
    <string>CustomColor or UIKBColor</string>
    </dict>
    </array>

    This <array> will set the Parameters in the <dict> to only the Keynames included, and only on whatever ControlStates are included.





    There are a few ways to make native iOS kb parts transparent:



    1. Use a custom created color from your <key>CustomColor</key> that has the Hex Code set to be Transparent:

    <key>CustomColor</key>
    <array>
    <array>
    <string>MyClear</string>
    <string>FFFFFF00</string>
    </array>

    *The last two characters set Opacity - 00 is Trasparent, FF is Opaque



    2. Use the native iOS "UIKBColorClear" instead of one of your Custom Color Names:

    <key>SymbolColor</key>
    <string>UIKBColorClear</string>



    3. For Key Foregrounds, a native <key> can be included:

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





    So, to start out by showing a simple DisplayType <string> to achieve transparency, I'll make use of all three methods mentioned above:


    <array>
    <string>DisplayType=Shift</string>
    <dict>

    <key>SymbolSecondaryColor</key>
    <string>MyClear</string>

    <key>EtchColor</key>
    <string>UIKBColorClear</string>

    <key>SymbolColor</key>
    <string>UIKBColorClear</string>

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


    </dict>
    </array>


    The above <array> will make every part of the Shift Key transparent. I included no ControlState, so these values will be set for all ControlStates.



    Here's an <array> that sets colors instead of transparency and shows use of multiple KeyNames and ControlStates:


    <array>
    <string>DisplayType=DynamicString,String,TopLevelDomain,TopLevelDomainVariant;ControlState=1,4</string>
    <dict>
    <key>EtchColor</key>
    <string>PopEtch</string>
    <key>SymbolColor</key>
    <string>PopSymbol</string>
    </dict>
    </array>

    The above <array> sets the EtchColor and SymbolColor for all Popups and Variant Popup "Selected" Keys.



    Siri


    If you theme the Siri "in use" BG images and want to remove the native "Pencil" Symbol, you can simply add this <array> to both your <key>iPhone-Alert</key> and <key>iPhone-Standard</key>:


    <array>
    <string>DisplayType=Return</string>
    <dict>
    <key>SymbolSecondaryColor</key>
    <string>UIKBColorClear</string>
    </dict>
    </array>




    You can include as many of these <arrays> as necessary to separate control over all of the different Keynames and KeyParts in their possible ControlStates.




    Generally, if you're going to include the Text on your images, the sample plist is already set up to leave separated control of the Native parts that will be seen just by altering the Hex Codes in the <key>CustomColor</key>.


    Last edited by Phatmartino; 03-11-2012 at 10:04 PM.

  6. The Following 12 Users Say Thank You to Phatmartino For This Useful Post:

    Alfroggy (12-11-2012), Bonito77 (07-20-2012), Ian Nicoll (09-27-2011), It's Mi (08-22-2011), iZangetsu (09-14-2011), Jahooba (07-08-2011), Kappa Delli (04-10-2013), onex0is0 (03-13-2012), stormcrow (05-23-2013), stratnik (11-22-2011), wintrospection (01-26-2013), xtrememan (02-26-2012)

  7. #4
    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

    Hybrid Method


    Here's a downloadable Theme Pack to enjoy and/or use as a reference specifically for the Hybrid Method which I have yet to cover in the Guide...

    There are 2 versions of the Theme that between them cover all users with all devices, 10 possible Text Colors to choose from via CK Plugins, a set of Popups, and A Winterboard theme corresponding with each Text Color for the keyboard Siri Mic. There are some light instructions in the included text file.







    CKG-Black.zip
    Last edited by Phatmartino; 04-14-2013 at 08:40 AM.

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

    Bonito77 (07-20-2012), Ian Nicoll (09-27-2011), It's Mi (08-22-2011), iZangetsu (09-01-2011), Jahooba (07-08-2011), McManimal (04-22-2012), onex0is0 (03-13-2012), stratnik (11-22-2011)

  9. #5
    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

    Popups



    Here is a set of natively shaped Popups, and a transparent shift-halo image that can be used as templates to create your own:


    CKG-Popup-NativeShapes.zip


    The popups are a set of images that are separate from the theme and are included in their own folder. They will be used by Color Keyboard when any "Qwerty" key is pressed, and a native iOS Symbol will appear over the image corresponding to that Key.


    This is where you will put your finished Popups folder for your theme:

    /var/mobile/Library/Keyboard/ColorKeyboard/Popups/




    There are a total of 40 images needed to cover all possible popups, and include Retina and non-Retina compatibility. The Popups follow suit with the rest of iDevice theming and CK images where two versions of each image can be included, and Retina sized images have "@2x" at the end of the file name. For example:


    kb-popup-114-29-center.png - 110x114

    [email protected] - 220x228


    Above is a Retina and non-Retina version of one of the necessary popup "shapes". There are 4 different "shapes".


    center

    left

    right

    straight





    Then there are 5 different minor variations of that set of 4 shapes to cover all possiblities including Portrait, Landscape, 5-Row, etc. Each of these 5 sets have a different "second" number in the file name:


    114-29

    114-32

    114-36

    114-38

    114-42





    One more image can be included that will replace the native white "glow" that appears over the Shift Key when Caps is armed. This image can be totally transparent in order to have no extra indicator for "Caps on", or you can include something in this image that you want to appear over the Shift Key the same way the native white "glow" does. This image does not need a second Retina sized version, and @2x is not included in the file name.


    kb-shift-halo.png - 64x64






    All of the above mentioned images are vertically flipped when used by Color Keyboard, meaning that the images you create need to be "upside down". It may be important(depending on your design) to specifically note that the images are not "rotated", but "vertically flipped". It's adviseable to work on the images in Photoshop flipped "right side up" to get them to look the way you want, and before rendering them, choose:


    Image > Image Rotation > Flip Canvas Vertical


    They will look like this when finished:








    Though you are generally able to make the Popups look however you like, there are limitations created by the way the iOS uses these images. They are all "stretched" or "compressed" horizontally when used, and it's not as simple as the vertical center row being repeated as in some other WB theme image "stretching". This makes Vertical Gradients and/or definition work without much of a problem, but Horizontal Gradients and/or definition can have undesirable affects. Here are a few screens showing the difference between using a simple Vertical Gradient compared to a simple Horizontal Gradient:



    Vertical Gradient







    Horizontal Gradient







    There is a certain amount of the Popups that are "safe" as the above images start to show, where you are free to include whatever Horizontal definition you want "outside" of the area that will be stretched/repeated. It may take some playing around to get your design set up within these parameters for all of the Popup shapes.





    Popup Text


    You may notice while testing your Popups in Color Keyboard that the iOS Text which is placed over your images is not the size you want. The following <array> can be included in your Theme's ColorKeyboard.plist, anywhere under both <key>iPhone-Alert</key> and <key>iPhone-Standard</key> Styles, and you can play around with setting the <integer> to the perfect font size for your Popups.


    <array>
    <string>DisplayType=DynamicString,String;ControlSt ate=1</string>
    <dict>
    <key>FontSize</key>
    <integer>30</integer>
    </dict>
    </array>



    * It may be advisable to specifically check Keys with wider Symbols such as "W" to see if it is too large for your Popup design.



  10. The Following 12 Users Say Thank You to Phatmartino For This Useful Post:

    Alfroggy (06-19-2012), Bonito77 (07-20-2012), Ian Nicoll (09-27-2011), It's Mi (08-22-2011), iZangetsu (09-01-2011), Jahooba (07-08-2011), Marty McFly (03-16-2014), McManimal (04-22-2012), onex0is0 (03-13-2012), stormcrow (05-23-2013), stratnik (11-22-2011), wintrospection (01-26-2013)

  11. #6
    iPhone? More like MyPhone
    Join Date
    Aug 2008
    Posts
    246
    Thanks
    184
    Thanked 183 Times in 100 Posts

    Hello. What is the Name from this letters in the Plist? I want to change the color. Thanky you


  12. The Following 2 Users Say Thank You to KaiTa For This Useful Post:

    Alfroggy (06-19-2012), Jahooba (07-08-2011)

  13. #7
    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

    I will incorporate this above a little more thoroughly, but for now:

    That highlighted key is:
    DisplayType=String
    ControlState=4

    Hadn't firmly figured out the alternate popups, but for now the best I can figure out is to add this <string> in with the rest of these (In the Alert and Standard Sections if desired for both)

    <array>
    <string>DisplayType=String;ControlState=4</string>
    <dict>
    <key>SymbolColor</key>
    <string>XXXXXXXX</string>
    </dict>
    </array>

    The XXXXXXXX obviously must be a value defined at the beginning of the plist under the CustomColor <key>.

    Look to see if your plist aready contains a sting like this for a ControlState=4 and make sure "String" is not included in the DisplayType=

    This <string> cannot (as far as I have tested) control the FG Gradient like other DisplayType <strings> do. It seems that the Shift key with CapsLock on and this "selected alternate" button are linked together and the Gradient must be set in the "Native Command Strings" part of the plist using:

    UIKBColorKeyBlueRow1GradientStart
    UIKBColorKeyBlueRow1GradientEnd

    These are usually present in existing themes.


    Let me know if I can help further..
    Last edited by Phatmartino; 07-07-2011 at 03:24 PM.

  14. The Following 4 Users Say Thank You to Phatmartino For This Useful Post:

    Alfroggy (06-19-2012), It's Mi (08-22-2011), Jahooba (07-08-2011), stratnik (11-22-2011)

  15. #8
    Theme Creator Jahooba's Avatar
    Join Date
    Jun 2009
    Posts
    2,964
    Thanks
    1,431
    Thanked 1,709 Times in 845 Posts

    Hey, I just want to add a custom background image to Color Keyboard. I put my png image file in /var/mobile/Library/Keyboard/ColorKeyboard (where all the other custom background images are), but when I respring it's not there.

    My intention is to add it to my theme so that my users can open the Color Keyboard settings and simply add it from the list.

    Any idea why this doesn't work?

    UPDATE: Ok, got it to work. I had to name it the same as one of the existing files. Kind of a sloppy way to do it, but it works.
    Last edited by Jahooba; 07-08-2011 at 02:33 PM.

  16. The Following User Says Thank You to Jahooba For This Useful Post:

    Phatmartino (08-23-2011)

  17. #9
    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

    Did you put a Portrait and a Landscape version in their respective folders and at both resolutions?

    And, you probably know, but image sizes are:
    P - 320x216
    P@2x - 640x432
    L- 480x162
    L@2x - 960x324

    Hadn't had any problems doing this so far...

    Let me know, I'd be happy to think further on what else it could be.

    Edit: Fetch Fail. Gmail stinks.

    Hey you do know that if you include your BG images in your theme's folder and reference them with your plist, they are override-able by the user in CK settings if your intent is to leave them a choice...

  18. The Following User Says Thank You to Phatmartino For This Useful Post:

    Jahooba (07-08-2011)

  19. #10
    Theme Creator Jahooba's Avatar
    Join Date
    Jun 2009
    Posts
    2,964
    Thanks
    1,431
    Thanked 1,709 Times in 845 Posts

    What are the respective folders I'm suppose to put them in? Do I put them somewhere in the Winterboard folder? I was just putting them directly in /var/mobile/Library/Keyboard/ColorKeyboard.

  20. The Following User Says Thank You to Jahooba For This Useful Post:

    Phatmartino (08-23-2011)

  21. #11
    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

    That path is correct up through /ColorKeyboard, then:

    /Backgrounds_Landscape/
    /Backgrounds_Portrait/

    Should be able to use any filename as long as you have a .png and @2x.png version for each.

    I'm no expert, but I can't get enough of this tweak so let me know any way I can help further if need be...

  22. The Following User Says Thank You to Phatmartino For This Useful Post:

    Jahooba (07-08-2011)

  23. #12
    Theme Creator Jahooba's Avatar
    Join Date
    Jun 2009
    Posts
    2,964
    Thanks
    1,431
    Thanked 1,709 Times in 845 Posts

    Ooooh, I need one of each, low-res and @2x. I see! Thanks man, your keyboard mods are great

  24. The Following User Says Thank You to Jahooba For This Useful Post:

    Phatmartino (07-19-2011)

  25. #13

  26. #14
    iPhone? More like MyPhone calfergo's Avatar
    Join Date
    May 2008
    Posts
    148
    Thanks
    65
    Thanked 145 Times in 60 Posts

    WOW!!!!.... very, very GOOD WORK!!!!!!!!.... congratulations!!!!!!!.....

  27. The Following User Says Thank You to calfergo For This Useful Post:

    Phatmartino (07-19-2011)

  28. #15
    iPhone? More like MyPhone VerizonIphone4_help's Avatar
    Join Date
    Feb 2011
    Posts
    167
    Thanks
    1
    Thanked 29 Times in 23 Posts

    looks great phat, thanks for the help again - very logical and very easy to follow for someonw who's spent at least a little time staring a a ColorKeyboard.plist file or has some coding experience. If you don't have any experience with anything, read this guide at elast twice and then go test and make mistakes! That's the best way to learn (just make sure you back things up before you do too much testing.).
    Last edited by VerizonIphone4_help; 07-19-2011 at 04:18 PM.

  29. The Following User Says Thank You to VerizonIphone4_help For This Useful Post:

    Phatmartino (07-19-2011)

  30. #16
    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

    Hey guys, my profoundest thanks for the positive feedback!

    I'm infatuated with this tweak and my intentions are to help in any way I can to expand the selection of themes out there. I am an artist of sorts, but my first instinct was to help make it easier for other artists (or ANYONE with the interest) to start designing!

    Though a pat on the back feels wonderful, constructive criticism is equally appreciated! I would prefer that anyone with any amount of knowledge find this guide usable (some people need only a nudge in the right direction to realize their potential), so any suggestions to move toward those ends is absolutely welcome!

    Have fun theming and my help is available to anyone who needs it...
    Last edited by Phatmartino; 07-19-2011 at 03:46 PM.

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

    It's Mi (08-22-2011), laztplay (03-15-2012)

  32. #17
    What's Jailbreak? Boubak's Avatar
    Join Date
    Mar 2011
    Posts
    1
    Thanks
    0
    Thanked 2 Times in 1 Post
    What AMAZING Work !!!!!!! Thanks so so so much it Will help me very very well !!!!

  33. The Following 2 Users Say Thank You to Boubak For This Useful Post:

    Alfroggy (12-11-2012), Phatmartino (07-19-2011)

  34. #18
    iPhone? More like MyPhone VerizonIphone4_help's Avatar
    Join Date
    Feb 2011
    Posts
    167
    Thanks
    1
    Thanked 29 Times in 23 Posts

    Phat only crit i have is to separate the post more, maybe link to separate posts; one on Control state themeing and one on hex color themeing.

    This way the main post is only introduction and maybe a Q and A or FAQ section with links to in detail guides on each kind. THis reduces the crazy long single post and lets people decide what info they are after with being intimidated by a long post.

  35. The Following 2 Users Say Thank You to VerizonIphone4_help For This Useful Post:

    Jahooba (09-11-2011), Phatmartino (07-19-2011)

  36. #19
    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

    Excellent idea! I originally blurted out everything I knew at the time (which was far less) and just added/refined from there.

    I'll think about how to work it out logically. Thankfully I selfishly "reserved" the first couple replies for pics and such, but I feel usable instruction is far more valuable (teach a man to fish...).

    Again, greatly appreciated!


    Boubak, your kind words are also very appreciated and you're very welcome!

    Good luck!

  37. #20
    Livin the iPhone Life
    Join Date
    Apr 2011
    Posts
    1,124
    Thanks
    163
    Thanked 179 Times in 154 Posts

    i'm looking at this and i'm just like....whoa..

    Kinda overwhelming. I don't know where to start. lol.

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