How to make custom theme

Custom themes, Distribute and download theme, Other discuss on themes

How to make custom theme

Postby SquidMelon » Thu Nov 15, 2012 9:24 am

Image

In order to make custom theme, you have to know the basic of HTML, Javascript and CSS. For the guys that don't know anything about this, we are so sorry that we don't have easy tool to make theme.

So we have 2 options for you.
  • You can send your ideas or graphics that you plan to do theme but you can't do it yourselves to this board. We can't guarantee that it will be built or not
  • You can build it on your own by following our steps. However, you need some basic knowledge on web technology.

Here's the short links
User avatar
SquidMelon
Site Admin
 
Posts: 36
Joined: Tue Nov 06, 2012 3:42 pm

Steps to make custom theme

Postby SquidMelon » Thu Nov 15, 2012 10:09 am

Let's start!

First of all, our themes use HTML, Javascript, CSS technology. In theory, you can build any web into theme. However, please keep in mind that you cannot interact with wallpaper and the performance will be much less than you run on browser (You will see a big difference on animations).

1.) Plan your theme. Prepare your theme name, your graphics, your animation etc.
2.) Download this example theme. This example theme is used for a guideline to build your own theme.

com.yoursite.example.lwpp.zip
(2.33 MiB) Downloaded 7552 times

3.) After you download, please unzip it. You will see this. This is your example theme. If you double click at it, the theme will be installed to Live Wallpaper. Due to it is a folder, you can right-click and choose to 'Show package contents' inside.
Screen Shot 2012-11-26 at 3.07.38 PM.png

4.) First, you have to create theme bundle id. You need theme name and your site name. For example, your site name is 'yoursite.com' and your theme name is 'example', theme bundle id will be 'com.yoursite.example'. You can use theme name and site name as you want. Site name cannot be squidmelon.com

5.) Change name of the folder that you download to 'your bundle id'.lwpp Our example folder name is com.yoursite.example.lwpp

6.) Right click the folder and choose 'Show package contents'. Open Info.plist. You will see multiple keys and values. Don't change keys, you can change values as you want.

infoplist.jpg

Key - Value
CFBundleName - Your theme name
CFBundleVersion - Version of your theme
CFBundleIdentifier - Your theme bundle id. This must be the same as theme folder name.
CFBundleExecutable - Your main HTML file.
CFBundleGetInfoString - Theme description. It will be showed when user choose the theme. Don't forget to give credits.
Creator - Theme creator. It will be showed when user choose the theme.
CreatorURL - Creator URL. When user click on creator, it will be linked to this link.
CFBundleIconFile - Your screenshot image name.
BackgroundImage - Background of your theme.

7.) After finish, you can try double click the theme folder, you will get a pop-up 'Added Theme Successful'. Then you can try the theme in Theme Store. You can edit theme and double click it. It will overwrite your old theme. However, you need to re-run app to see the new version of theme.
Screen Shot 2012-11-26 at 3.41.08 PM.png

Screen Shot 2012-11-26 at 5.13.39 PM.png


8.) Let's change other files inside theme. You can change HTML,Javascript, and CSS files to what you have planned and might also add some animations. At this step, you need the knowledge of HTML, Javascript, CSS, and your creativity!

When you edit theme, you need to test a lot of times. If you edit -> double click theme to install -> test be re-run Live Wallpaper. It will take a lot of steps to test. You may skip by going to this folder '~/Library/Containers/com.SquidMelon.Live-Wallpaper/Data/Library/Application Support/Live Wallpaper/Themes'. Your theme will be the folder named of your bundle id. You can edit your theme here.

We'll list important file names here. There are more details that already be explained in each file in theme.

bg.jpg - Your background file. It should be 2880*1800 resolution to support Macbook Pro. Note that when you test your theme on Safari, the background might not be this image but it will be this image when you run Live Wallpaper.
default.html - This is default HTML file. Please don't change header if unnecessary.
editable/editable.js - You only need to change variable themeID and dragList. This will be effected when you enter edit mode in Live Wallpaper.
general.js - Most of functions are in this file. Please see more detail in comments in file. You can choose to use or disable the following options in this file.

Screen Shot 2012-11-26 at 4.50.12 PM.png

screenshot.jpg - Your screenshot file. Normally, size is 400*400.
weather/weather.js - This contain function to update weather data.

9.) Test until you like it! Please note that you can test by re-run the application.
User avatar
SquidMelon
Site Admin
 
Posts: 36
Joined: Tue Nov 06, 2012 3:42 pm

How to distribute theme

Postby SquidMelon » Thu Nov 15, 2012 10:12 am

After you finish custom theme, you can distribute by
1.) If you edit theme in Application folder, please copy the folder theme to other directory.
2.) Add .lwpp extension to the folder. It will show this icon.

Screen Shot 2012-11-26 at 6.13.44 PM.png

3.) Compress the theme folder and upload to theme forum.

However, there are some regulations.
  • Topic start with [Custom Theme]
  • Please include screenshot of your theme and some description in your post
  • Please credit to others if you use their resources
  • Your theme should not drain too much CPU
  • Your theme don't need edit mode. However, it is better to support
User avatar
SquidMelon
Site Admin
 
Posts: 36
Joined: Tue Nov 06, 2012 3:42 pm

How to delete themes

Postby SquidMelon » Thu Nov 15, 2012 10:13 am

All themes are in this folder '~/Library/Containers/com.SquidMelon.Live-Wallpaper/Data/Library/Application Support/Live Wallpaper/Themes'

You can delete themes that you don't want. However, SquidMelon themes will be copied to this folder every time that you start application.

*** Please note that if you delete theme while it was selected, the application will not work.
If this case happen, you have to delete folder '~/Library/Containers/com.SquidMelon.Live-Wallpaper/' and re-run application.
User avatar
SquidMelon
Site Admin
 
Posts: 36
Joined: Tue Nov 06, 2012 3:42 pm


Return to Themes



Who is online

Users browsing this forum: No registered users and 1 guest

cron