Ok, so that whole 'bling' thing... I didn't come up with it. Damien said it first. :|
Well, anyway, I've been playing around with this idea for the past few hours about getting a little pic into the corner of my deck. After looking at gimp tutorials on layers and gradients and shadows and then tutorials on custom css and stuff (which turned out simpler than anticipated), I present to you, Ankimobile Pimped Edition.




And one for the desktop:
http://dl.dropbox.com/u/7590004/Screensh...ithpic.png

Please note that this version of ankimobile is still in beta. So the only thing I added was the little anime picture. This beta shouldn't take too long to be released, so, patience grasshopper.

Well, it's try number 1, and it's not gonna satisfy most of you guys cause the pic is linked by internet url, not locally. Good news is that locally will be able to work, I just haven't figured out the specifics. It will involve sending a pic over via a media sync and linking to it that way, but damien has mentioned javascrpt will be required.
---
EDIT: Now it's local and it works on non-jailbroken phones/pods too! No Javascript is required! It's pretty simple! See the end of the post for instructions!
---

Well, here's all I did.
I added this to the question field of my card template:
<img src="http://dl.dropbox.com/u/7590004/Pics/ankicorner1.png" style="position: absolute; top: 0px; left: 0px; z-index: 5;">

That z-index part is just to make sure the pic is on top of the background colour. This also means the pic will be on top of TEXT. I'm no pro so you guys can figure out the rest but, I've been talking with Damien and it's a simple matter to get the pic on top of the background and under the text. Although I think something was mentioned about removing the background info from fonts and putting it all in the template. That way you can specify the z-index I guess. But anyway, if you have plenty of white space up top (or bottom) you can do this no problem.

If you are jailbroken, you should be able to just drop a file into the resources folder of anki and it should link directly just fine.


Edit--------------------
If you are not jailbroken, follow these steps:

1: Drop the pics you want to use into a card to media sync them over to your phone/pod.
2: Sync.
3: Suspend that card so it doesn't come up in review.
4: Go to your media folder to find the files you need and copy the file names. They will be in hash. something like this but unique for your files: a9e6bef9b50d0374d9702dbd6950d2b6.jpg
5: Use that filename in your templates. Put the code in the question field of your card template.
Something like this:

Code:

<img src="a9e6bef9b50d0374d9702dbd6950d2b6.jpg" style="position: absolute; top: 0px; left: 0px; z-index: -1;">

You can have multiple pics in your deck using this method. See posts below for more.
---------------------

Now, who's got the best idea of what little pics, graphics, borders or whatever we can use to pimp out anki?

Looks nice, seems like a way to add a little "spice" to the program

Nice. Set the z-index of the image to -1 to make it appear behind all the other elements.

Here is a stack of cards background on one of my decks.

Here's the bg image: http://dl.dropbox.com/u/6415847/bg.jpg

I need to disable the horizontal rule using mobilecss, but for some reason I can't find the Anki wiki entry about it.

If you want to get it as a background image so that it goes under the text, you can look at the background-image/repeat css attribute. It would work but you would not be able to see text as well...

After experimenting with css backgrounds, you can easily set them using this code:

Code:

<style type="text/css">
body {background-image:url('http://dl.dropbox.com/u/6415847/stripe1.png');}
</style>

This one uses a stripe pattern I made using the CSS stripe generator. Screen shot on the iPhone:


Oh, and the background from this site (http://forum.koohii.com/img/koohii/body_bg.gif) also works very nicely on AnkiMobile...

But of an update here. I've been decorating a bit, and thinking about how this is gonna work, but you know what, I can't figure out how this is gonna work offline for non-jailbreaks. T_T At one stage I thought I had the answer, but I think I was wrong. I'm not sure, I'll need to double check.

Anyway, I got this working with all files local. No need for net connection.




The rest of the screens are here.
http://dl.dropbox.com/u/7590004/Screensh...obile1.png
http://dl.dropbox.com/u/7590004/Screensh...obile3.png
http://dl.dropbox.com/u/7590004/Screensh...obile5.png
http://dl.dropbox.com/u/7590004/Screensh...obile6.png
http://dl.dropbox.com/u/7590004/Screensh...obile7.png

This is the code I used.

Code:

<img src="ankicorner2.png" style="position: absolute; top: 0px; left: 0px; z-index: -1;">
<img src="ankicorner2.png" style="position: absolute; bottom: 0px; right: 0px; z-index: -1;">
<img src="ankicorner3.png" style="position: absolute; bottom: 0px; left: 0px; z-index: -1;">
<img src="ankiback.png" style="position: absolute; bottom: 0px; right: 0px; z-index: -2;">

It's big a messy but I just put a couple of lines after it before where my card infomration goes to make it clear. You can put this code at the bottom too if you prefer.

These are the pics I used.
http://dl.dropbox.com/u/7590004/Japanese...orner1.png
http://dl.dropbox.com/u/7590004/Japanese...orner2.png
http://dl.dropbox.com/u/7590004/Japanese...orner3.png
http://dl.dropbox.com/u/7590004/Japanese...kiback.png

Now, my pod is jailbroken. All I did was drop the files linked there directly into each media folder of my decks that use them. That's all. I also put them into my destop media folder of course. Now, if you're thinking, why can't I use these by linking the hash files names and just media syncing them across... go ahead and try but I think there's something about anki stripping some code if you do so.
Actually, I thought I had that working... but I can't remember now. I'll test it out again later, or you can go ahead and try if you want.

If you're a phone user with internet connection, this method will work by just typing out a web address, as we have already seen in this thread by blahah's nice work there .

Anyway I just wanted to get this out there to demonstrate that pretty much anything is possible here...
This is an idea I played around with but decided not to go with so it never made it to my phone lol.
http://dl.dropbox.com/u/7590004/Screensh...esktop.png

Anyway, it IS possible to do this offline for non-jailbreaks, but if the easy way I mentioned above doesn't work, then a little bit of javascript may be necessary, and that's something I don't know how to do, so I wouldn't be able to take it further.

Is this something people would wanna try if it were easy to do offline?
My theme may be a 'little bit' cluttered lol, but I kinda like it now ^^;; although I do miss that little anime girl lol.

I want.

TOT

@shinyclef
How'd you get that awesome font working for Ankimobile?

The real question is how did I install custom fonts on ipod/phone. And the answer is jailbreak, sorry T_T.

shinyclef Wrote:The real question is how did I install custom fonts on ipod/phone. And the answer is jailbreak, sorry T_T.

My phone is already jailbroken. What's the next step?

i too have a jailbroken ipod touch... please tell us the next step and the name of the font you are currently using!

I'm using Epson Kaisho for the green questions and Epson Gyosho for the blue
answers.
You can find them here in the EPSON pack. Don't download yet...
http://www.wazu.jp/gallery/Fonts_Japanese.html

Installing custom fonts on iPod touch/iPhone requires a jailbreak.
Next step, the actuall font installation, is a little bit harder...

Firstly, you'll need fonts without japanese characters in the font names for them to work on iPod, which means you'll need to edit the font names, or, download these! The ones you want are EPSONTruePrint (Kaisho) and EPSONSemiCursive (Gyosho).
https://dl.dropbox.com/u/7590004/Fonts/e...enames.htm

Now, the hard part is the actual installation. This tutorial should cover it pretty well.
http://blog.gauravgiri.com/2008/08/tutor...to-iphone/

With the part where you need to edit the CGFontCache.plist file...
The two entries for these fonts at the end of the first section should look something like this:

Code:

<key>EPSONTruePrint</key>
        <string>/System/Library/Fonts/Cache/EPSONTruePrint.ttf</string>
        <key>EPSONSemiCursive</key>
        <string>/System/Library/Fonts/Cache/EPSONSemiCursive.ttf</string>

And at the end of the second section something like this:

Code:

        <key>EPSONTruePrint</key>
        <dict>
            <key>Plain</key>
            <string>EPSONTruePrint</string>
        </dict>
        <key>EPSONSemiCursive</key>
        <dict>
            <key>Plain</key>
            <string>EPSONSemiCursive</string>
        </dict>

The end of the file will include an additional two </dict> lines. Make sure you keep them in without getting yourself mixed up ^^;

The entire end of my file starting from my custom fonts (I have three customs) looks like this:

Code:

        <key>EPSONTruePrint</key>
        <dict>
            <key>Plain</key>
            <string>EPSONTruePrint</string>
        </dict>
        <key>EPSONSemiCursive</key>
        <dict>
            <key>Plain</key>
            <string>EPSONSemiCursive</string>
        </dict>
        <key>EPSONThickTextbook</key>
        <dict>
            <key>Plain</key>
            <string>EPSONThickTextbook</string>
        </dict>
    </dict>
</dict>
</plist>

The tutorial I linked says to create a new folder for your custom fonts, but I didn't do that. I just dumped them in the same folder as the rest, and my code reflects that with my file path (/System/Library/Fonts/Cache/EPSONTruePrint.ttf). Just make sure if you copy mine, you dump the fonts into that Cache folder. If you wanna make your own folder then update that filepath.

But seriously, once you've done this once, it'll become easy if you wanna install fonts in the future. But I haven't found the need for new fonts for a long time. Read the guide, it's good. .
So edit the plist file, drop the fonts into the fonts folder via SSH or however you navigate, choose the font in your deck and anki will display it.

Let me know if it works, and post a pic or something .
For you jailbreakers, the above 'themes' idea works totally offline, so if you give that a try, post a pic or two!

PS. Here is an alternative for the broken link in step 6.
http://iappcat.com/plist/bin2xml

@shinyclef

Did you convert the .plist file into XML and back into binary when you edited it? I followed the tutorial's instructions, but I think I went wrong when converting the .plist file since my phone became stuck on the loading screen when I respringed after copying and pasting the new .plist file.

I didn't need to convert the plist at all - I'm on a mac so just used the plist editor and copied the edited plist back to the iphone.

Blahah Wrote:I didn't need to convert the plist at all - I'm on a mac so just used the plist editor and copied the edited plist back to the iphone.

I just downloaded a plist editor for windows. I'll try my luck again and report my results here.

Oh, well what I did was just use a site to convet from binary to plain text, edit it, and send to the pod. I never converted it back to binary. I just use a text editor on my non-binary file now every time I want to make a change (which is rarely). A plist editor will probably work just fine too! I use notepad2.

If it hung, there must have been an error in the file. Maybe it couldn't find the font the plist file was pointing to? don't know if that would cause it though. there might just have been a basic error somewhere.
If you definitely didn't make an error, maybe the program you are using is adding some text to the file that's not displayed? To be honest I'm not sure.

Did you get it working?

Oh, also, did you try restarting instead of just respringing?

The problem is definitely that you are converting it back to a plist format - just leave it in the xml format with a plist extension and edit in a text editor.

Please excuse the n00b question, but what are you using to edit the HTML of your decks' templates?

Blahah Wrote:I need to disable the horizontal rule using mobilecss, but for some reason I can't find the Anki wiki entry about it.

http://ichi2.net/anki/wiki/AnkiMobile

Scroll down to the bottom.

JimmySeal Wrote:Please excuse the n00b question, but what are you using to edit the HTML of your decks' templates?

Just edit the template in Anki. Open your deck, then go to:
Settings > Deck Properties...
Select your active model, e.g. Japanese or Heisig, click 'edit'.
Press the 'card templates' tab button at the top.
HTML goes in either of the fields (question/answer).

Brilliant! Would not have thought of that. Thanks.

@skinyclef + Blahah

It's working! I held it off for a while since I had to spend almost an hour restoring my iPhone last time I tried. This time, I managed to successfully install the fonts in a matter of minutes thanks to your combined efforts. Reviewing has never been this sexy before ^_^ Thank you!

vileru. you got any screenshots happening? what fonts are you using?
I'm glad you got it working!

shinyclef Wrote:vileru. you got any screenshots happening? what fonts are you using?
I'm glad you got it working!

I'm not sure how to take a screenshot of my iPhone, but I know it's possible. Could you point me in the right direction? Anyway, I'm using the exact same fonts as you, and even the same colors XD I liked your setup a lot, so I saw no reason to change it.

Just press the home button and the lock button (on the top right of the phone) simultaneously. You will hear a camera sound and a screenshot will be saved to your pictures folder. You can sync your itunes to get it, or upload it somewhere or email it to yourself.