(last updated) 2009-05-17

I would like to intoduce adding custom theme to widgets I developed.

“My Outlook Today” and “My Google Calendar” are calendar widgets. My Outlook Today 1.2 of and My Google Calendar have a function to change appearance. And My Outlook Today 1.2.1 and My Google Calendar 1.0.1 will search custom theme on widget folder when its start up.

Custom Theme file structure

/MyWidgets/MyOutlookToday/theme  (/MyWidgets/MyGoogleCalendar/theme)
   /theme1      -- theme name. displayed on widget preferences.
      /theme.js   -- style settings
      /*.png     -- image files

MyWidgets folder is at C:\Users{UserName}\Documents\My Widgets on Windows Vista, C: \Documents and Settings{UserName}\My Documents\My Widgets on Windows XP, or ~/Documents/Widgets on MacOSX.

theme.js

theme.js is simply json data follow:

{
	padding:[0,0,0,0],  // padding for background
	defaultFont:'Catull', // default font 
	titleCss:{textAlign:'center'}, // header text style
	titleColor:['#9EA8AF',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}], // color, shadow settings
	textColor:['#808080',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}],
	headerColor:['#514A4C',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}],
	remainColor:['#f7d60a',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}],
	emptyItemColor:['#808080',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}],
	completedItemColor:['#DE7008',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}],
	justbeforeItemColor:['#d92d29',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}],
	currentItemColor:['#DADADA',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}],
	footerColor:['#9EA8AF',{color:'#000000',vOffset:0,hOffset:-1,opacity:190}],
	apptIconColor:['#808080'], // Appointment colorize
	taskIconColor:['#EFA763','#6767F2','#808080','#EF5656'] // Done,Low,Normal,High for Task
}

image files are for background and icon.

background image files

background using 9 files (nine-grid) and 1 file(divider).

top_left.png
top.png
top_right.png
left.png
center.png
right.png
bottom_left.png
bottom.png
bottom_right.png
line.png

Nine-grid rendering allows you to preserve the original dimensions of the corners (top_left, top_right, bottom_left, and bottom_right). The top and bottom are stretched horizontally only, and the sides left and right are stretched vertically only. The center is stretched in both dimensions.

icon files

icon_current.pngcurrent or near appointment
icon_event.pngevent icon
icon_task.pngtask icon
icon_next.pngarrow right
icon_prev.pngarrow left
icon_schedule.pngcalendar view icon(My Google Calander never use)
icon_tasklist.pngtask view icon(My Google Calander never use)
icon_today.pngtoday icon
icon_back.pngtoday icon to return
icon_forward.pngtoday icon for return
icon_loading.gifloading icon(My Outlook Today never use because it load sync)

for example

I tried to create new theme named “wood”.

  1. create image files by Fireworks CS4 :)
  2. copy style.js and image files to C:\Users\makoto_kw\Documents\My Widgets\MyOutlookToday\theme\wood
  3. run My Outlook Today widget and open preferences
  4. select wood at theme

That’s all!

sample theme download

I understand this function is very simple and is not usefule yet. Please let me know you have any problems , questions and ideas. # give me beautiful theme you designed also :)

blog comments powered by Disqus