Create your own skins

[cyril]

New features in the latest 4.3.1 beta version:

* Candidate highlight background: defines the background of the pressed candidate (which is yellow by default)

You need to add a tag "highlight-background" in the "candidates" section:

Code: Select all

  
   <candidates>
     <!-- Define the background of the suggestion bar -->
     <background>
        <image>gb_suggest_strip.9.png</image>
    </background>
    <!-- Define the divider bar between candidates -->
    <divider>gb_suggest_strip_divider.png</divider>
    <!-- Define suggestion text color -->
    <colors>
      <!-- Color of the typed word -->
      <normal>#FFFFFFFF</normal>
      <!-- Color of the recommended word -->
      <recommended>#FFFCAE00</recommended>
      <!-- Color of the other words -->
      <other>#FFFCAE00</other>
    </colors>
    <!-- Define the background of the highlighted candidate -->
    <highlight-background>
        <image>candidate_highlight.9.png</image>
    </highlight-background>

* label font!

Add a new section in your skin.xml:

Code: Select all

  
  <fonts>
    <label>Chantelli_Antiqua.ttf</label>
  </fonts>

The font file has to be placed in a "font" directory in your skin zip (so it's "font/Chantelli_Antiqua.ttf" in this example)

Examples in the uploaded skin.

Feedbacks are welcome!

[EDIT] Now available in version 4.4.0 on the Market

[c00ller]

Thanks for adding more theming ability, cyril
I was successfully able to create my own cyan candidate_highlight.9.png

One minor thing I noticed is the font color of the pressed candidate stays the same. The stock Gingerbread keyboard changes the text to white, which looks better.

Smart Keyboard Pro:


Stock Gingerbread (using CyanogenMod 7 theme engine's "Cyanbread"):


While on the topic of candidate colors, I just noticed that Smart Keyboard Pro isn't really giving me the colors I want for the color of the recommended word.

This is the stock Gingerbread (using CyanogenMod 7 theme engine's "Cyanbread"):

I simply used image software color picker and determined that the color of the word "Most" in hex is 80D6DE, and applied it to <recommended>#FF80D6DE</recommended>, and this is what I got in Smart Keyboard Pro:

As you can see, the color of the suggested word looks very dissimilar and is significantly darker. However, the colors for <other>#FF12BDD0</other> look consistent enough.

Any suggestions for this issue I'm having?

[cyril]

You are right, it's better to also customize the text color for the highlighted word. I updated the beta version with a new feature, now you can add a "highlight" color in the set of candidate colors:

Code: Select all

    <colors>
      <!-- Color of the typed word -->
      <normal>#FFFFFFFF</normal>
      <!-- Color of the recommended word -->
      <recommended>#FFFCAE00</recommended>
      <!-- Color of the other words -->
      <other>#FFFCAE00</other>
      <!-- Color of the highlighted candidate -->
      <highlight>#FFFFFFFF</highlight>
    </colors>

About your color problem, I don't know, I would have to check...

Any chance to test the font feature?

[c00ller]

Thanks for the <highlight> option. The next time you update a beta, could you change the name? The only way I knew I had a different beta was to MD5 sum it.

Anyway, I found the source of error for my <recommend> color problems. A while ago, before the candidate bar and text was even themeable, I went to Advanced settings > Candidate color and changed it. Now, no matter what skin I choose, this option overrides the <recommend> color... how can I stop this?

I haven't gotten a chance to test any fonts. I like the default font anyway

[meyergre]

working fine

P20110717141849.png (40.64 KiB) Viewed 8332 times

using "Orbitron" font from Google.
Nice feature, thanks

[cyril]

Anyway, I found the source of error for my <recommend> color problems. A while ago, before the candidate bar and text was even themeable, I went to Advanced settings > Candidate color and changed it. Now, no matter what skin I choose, this option overrides the <recommend> color... how can I stop this?

Indeed, at the moment there is no simple way to stop using this option, except reinstalling the app or editing preferences.xml manually...

[NoPodi]

Hi folks,

i'm desperately trying to build and install my skin.
how to install one i downloaded is simple. - to archive and install one by myself ... not.
i've no idea what i'm doing wrong.

what i'm doing:
i download the sample "android-plus"
-> pushing it to "skins"-folder
-> "Android+" shows up in the list

i download the sample "android-plus"
-> open the archive on my mac
-> archive it again (not important where i'm doing it or with which tool)
-> pushing it to "skins"-folder
-> "Android+" doesn't show up in the list

do you have any idea what i'm doing wrong here??

cheers nopodi

[meyergre]

Be careful to package it as ZIP file (not RAR, TAR, GZIP, or specific Mac format), without any password, encryption, or whatever. If it's still not good, try using the zip command-line tool in a terminal... I guess Mac OS's terminal is close to linux's one.

[NoPodi]

Be careful to package it as ZIP file (not RAR, TAR, GZIP, or specific Mac format), without any password, encryption, or whatever. If it's still not good, try using the zip command-line tool in a terminal... I guess Mac OS's terminal is close to linux's one.

it's a zip archive every time. set on "normal" no password. even the rights on the files in the zip are the same.
i even tried it with the "Compress (Encrypt)" Option in MIUIs build in "ES File Explorer" …

[meyergre]

Take care to zip your drawable folder and your skin.xml directly on the root of the archive, and not in a folder