[Canola] Creating your own themes

[mperes]

Hi everybody,

Ian, the programmer behind theme maker, told me that he found some themes in the server zipped with a wrong structure. Taking that in account I decided to write this small guide explaining some missing points. So here we go:

1. Download the design sheet.

2. Download the guideline (optional but recommended).

3. Replace the images in the sheet. Note that some images are going to be resized inside Canola (like the scrollbar) and the graphic needs to be designed with that in mind. Consult the "Stretch axis" column of each image for details. Also, when replacing the images in the sheet make sure to respect the sliced areas (View > Show > Slices).

4. Save your images(File > Save For Web & Devices) using the PNG-24 preset. A dialog is going to appear asking where you wanna save the files. Select a folder and hit the save button.

5. Open the selected folder on finder/explorer/terminal/etc, you are going to see a subfolder called "images", open it. If you properly follow all the step until now, you theme's images are going to be here.

6. Compact all the archives inside this folder(zip or tar.gz). Here lies the trick, compact only the images, not the whole folder. In other words, if your open you zip package IT MUST ONLY CONTAIN IMAGE FILES.

7. Go to Theme Maker site and upload your package.

8. Enjoy your new theme :)

[munky261]

One question, I havent seen it brought up anywhere...how do you set the color you want the text font to be?

[mperes]

Hi Munky261,

The current version of the Theme Maker does not support modifying text attributes, so, right now, the only way to change the color of a certain string is by manually editing the .edc theme files.

[munky261]

How do I edit those files to make all text a certain color to match my theme?

[munky261]

Also, I have completed the rest of the theme and I have replaced ALL images in the guideline, but when Im in the audio player and I select a song to play the selection graphic is still bright green. It only does this when selecting a song any other item in the list that is tapped (artist, album, playlist, etc) shows the correct graphic that I made. Whats strange is if I go into the songs through browse by folder, and i tap on a song my background selection graphic DOES show up correctly instead of being the bright green. What is going on here? Do I need another background selection graphic?

[munky261]

These are screenshots of the error in action (Bright green) and the correct graphic being displayed(Dark Green).

[ian_brasil]

hi munky
here is Ian the programmer...let me have a look at this. It seems strange right enough but i suspect it might be something to do with the audio player and its graphics. Congrats for a rockin theme b.t.w...we all loved it here

[munky261]

Thanks:) I made one thats the same but in the blue and white colors of the "meta" theme. Could it be just a matter of another graphic the same dimensions of bg_list_selection but with a different name? Also, what about icons for the youtube plugin, and videocast? And, what is the method of changing the font color that mperes mentioned in an above post...I dont even use the kobayashi theme I made cause its too hard to read the white text on the light green background...especially in the car, which is the primary place i use canola...i dont even have any cd's in my car anymore...I just use my tablet.

[munky261]

Was also wondering if, whenever text color is able to be changed....in the album song list as shown in the screenshot, would it be possible to not have that tinted background for the song list? I noticed there is no color variation like that in the flatblack theme , which is what I normally use.

[ian_brasil]

Hey Munky261,
yes I saw the meta theme too...dude, you rock!
One thing I noticed on your themes was that a preview was not being created. We tracked down why and it appears that the alpha layer was not being set on your .png images. I modified the python script and put something like this:

# convert if we do not have alpha
if title_div_right.mode != 'RGBA':
title_div_right = title_div_right.convert('RGBA')

and it now works fine. Maybe this might have something to do with this weird audio problem. Maybe try again and upload your 'meta' theme and see if this sorts it out. If not let me know and i will look further into this

[munky261]

How do I check that in photoshop or however? Also, did that fix the problem with the bright green in the song list selection?

EDIT: Just uploaded it again and yes, it did give the preview. But the bright green song list selection is still there...how can I fix that. Also, what about the youtube and videocast icons? Was wondering..since my kobayashi theme has already been uploaded, Ive made a few changes so everything in it and the meta theme are the same...how do I replace the old version with the new version?

[ian_brasil]

The deb is replaced with the most recent one for the download so no worries there..i think we need to talk with the design guys about the song selection list and youtube icons now as it will involve changing the psd file i think.
It is carnaval here in Brasil today and tomorrow so it will be thurs before i am back at work and get a chance to speak with them

[munky261]

Thats cool...thanks for all the help so far...and dont have TOO much fun. LOL

[mperes]

Hi munky,

the icon for the youtube, videocast and other plugins in general, are packaged inside the plugin. I mean, the flat black icon for youtube is not inside Canola, it packaged inside the plugin and becomes available only when you install it.

About the selection bar, I've not talked with any developer yet but at first sight it looks like a bug. I'll see with the guys what is happening and I'll also ask them about the instructions to manually change the font colors.

[munky261]

Will it be possible to theme the youtube and videocast icons soon, or at all?

[ian_brasil]

Hi
Whilst this will not mean changing the youtube and/or video icons we just put a new file format to download on the site http://thememaker.openbossa.org/ ...all the pngś....now you can download the png icons for the theme and you can just change these and then upload.. It is not necessary to be using photoshop anymore ;)

[munky261]

has the problem with the bg_list_selection been fixed? meaning where it still shows a bright green when tapping a song but it shows properly everywhere else. Are we ever going to be able to change the youtube and videocast icon?

[ian_brasil]

Hi Munky,
We are still trying to work out why that happens with the list selection.The icons too as Miguel mentioned come from installed plugins and not the theme itself so I am not sure if we can do much with this. I will however have another play with this at the weekend.

[ian_brasil]

Hi
I had a think and maybe a solution for the icons might be to write a post install script for the .deb which looks into the plugin folders and substitutes the image if it finds one in the folder. Can you help me test it if I write the script?

[munky261]

Absolutely will test!, when you say substitutes the image if it inds one in the folder, are you meaning say the icon name is "youtube" and normally it is in the plugins folder (or however it is set up) but if it detects and icon named "youtube" in the theme that I would make it would use my icon instead?

[ian_brasil]

yes..more or less like this:
1. Install the .deb
2. In the post install script recursively parse through all of the plugins looking for any images
3. Substitute any images found for those in the uploaded theme
4. Party ;)

I need to look at how the plugins are laid out now...thx for the offer of a tester!

[munky261]

No problem, just let me know when you are ready and give me instructions and Im all good! :)

[ian_brasil]

well no special instructions really..just use the site normally!..the only difference will be that your youtube image should be in the theme and not the default one..

[munky261]

Great, any idea what the icon name will be so i can get started on making one?

[munky261]

Also what about the videocast icon, where is it kept, cause at the moment I dont even have youtube installed?

[jself]

Where are the slices?

I couldn't open the PSD in Photoshop 6, I had to re-save the PSD diff. name in Gimp (Windows)... no slices, no theme right?

http://img54.imageshack.us/img54/3977/51526547.jpg