LockInfo Matte UI Bundles

What is bundles ?

Bundles are a simple way for modders to change the way LockInfo Matte UI looks like and behaves.
Basically it overwrite the css and javascript used by LockInfo Matte UI.
As it's in the Winterboard themes folder, you can also use Winterboard features to theme the lockscreen graphics.

How does a Bundle look like ?

A Bundle is a folder named <Bundle name>.libundle
It looks like this : 
[dir] <Bundle name>.libundle
      [dir] Private
      |      [js]  bundle.js
      |      [css] bundle.css
            
      Everything you want using Winterboard capabilities (UIImages, Bundles, etc...)

Everything that concerns LockInfo Matte UI is in the Private folder.

What to do first ?

As shown above, there is two files in the Private folder. Only the bundle.js is really needed if you just want to tweak the LockInfo Matte UI Javascript.
However if you just want to do some graphic changes, everything happens in the bundle.css file even if you Bundle must contain a bundle.js file.

About the bundle.js file

So the first thing to do when you start creating a Bundle is to create you bundle.js file. Even if you just want to edit css.


Your bundle.js file must always ends with this line : 

Controller.bundleLoaded();
It tells the theme controller that your Bundle has been loaded and it can continue loading everything else.


In this file you can overwrite every javascript property or method. You can this way change plugins default settings like the settings bundle (generated in this website) do.

How to theme the base theme elements ?

There are several elements common for every plugin.
Here is a list of elements and their associated css class names :
Image Description class name
- The theme container div#background
if scrollable is enabled div#background.scrollable
if hideExpandDots is enabled div#background.hideExpandDots
Header Plugins header elements (whitout the background image where the icon is) div.header
Summary Plugins summary elements div.summary
Location Plugins location elements div.location
Expand Plugins expansion elements div.expand
Bottom Bar The theme bottom bar div#bottombar

How to theme plugin specific elements ?

Here is a list of plugin specific elements and their associated css class names :
(Of you are a plugin developer and your plugin is on the website, you can send me the list of your plugin css class name)

Calendar plugin

Image Description class name
- Calendar plugin container div.cal
To access generic elements (header, summary, location or expand) use div.cal div.header
dayHeader Inner days header (when events are grouped by day). Not the first bar, just those whithout icon. div.cal div.header.dayHeader
Birthday Events summary when event is a birthday div.cal div.summary.birthday
Also apply to the location element div.cal div.location.birthday
- Events during more than a day div.cal div.summary.more1dEvent
Also apply to the location element div.cal div.location.more1dEvent
- All-day events div.cal div.summary.allDayEvent
Also apply to the location element div.cal div.location.allDayEvent
- Events during less than a hour div.cal div.summary.less1hEvent
Also apply to the location element div.cal div.location.less1hEvent
- Events during less than a day and more than a hour div.cal div.summary.less1dEvent
Also apply to the location element div.cal div.location.less1dEvent
- On-going events div.cal div.summary.currentEvent
Also apply to the location element div.cal div.location.currentEvent
- Events expiring in less than a hour div.cal div.summary.willExpire
Also apply to the location element div.cal div.location.willExpire
- Calendars separation div.cal div.summary.calendar#NB#
  #NB# going from 0 to the number of calendar

Calls

Missed calls plugin
Image Description class name
- Missed Calls plugin container div.calls-phone
To access generic elements (header, summary, location or expand) use div.calls-phone div.header
dayHeader Inner days header (when missed calls are grouped by day). Not the first bar, just those whithout icon. div.calls-phone div.header.dayHeader

Voicemail plugin
Image Description class name
- Voicemail plugin container div.calls-voicemail
To access generic elements (header, summary, location or expand) use div.calls-voicemail div.header
dayHeader Inner days header (when voicemails are grouped by day). Not the first bar, just those whithout icon. div.calls-voicemail div.header.dayHeader

Mini Clock Bar

Image Description class name
- Clock plugin container div.clock.header
- When the clock plugin is on top of the lockscreen div#background.clockontop div.clock
This is useful to change the clock appearance when the clock is on top
Time The clock bar time. div.clock div.header span.time
Date The clock bar date. div.clock div.header span.date
Time The clock bar time when double setting is enabled. div.clock div.header.double span.time
Date The clock bar date when double setting is enabled. div.clock div.header.double span.date

Mail plugin

Image Description class name
- Mail plugin container div.mail
- Mail account container (when mails are grouped by account) div.mail div.account
To access generic elements (header, summary, location or expand) use div.mail div.header
dayHeader Inner days header (when mails are grouped by day). Not the first bar, just those whithout icon. div.mail div.header.dayHeader

Name of the day plugin

Image Description class name
- Name of the day plugin container div.names
  To access generic elements (header, summary, location or expand) use div.names div.header
dayHeader Inner days header (when names are grouped by day). Not the first bar, just those whithout icon. div.names div.header.dayHeader

Quotes plugin

Image Description class name
- Quotes plugin container div.quotes
  To access the header generic element use div.quotes div.header
Quote Quote div.quotes div.quote
Author Author div.quotes div.author

Sms plugin

Image Description class name
- Sms plugin container div.sms
  To access generic elements (header, summary, location or expand) use div.sms div.header

Status Notifier plugin

Image Description class name
- Status Notifier plugin headers div.header.statusnotifier
Status Status Notifier specific header div.header.statusnotifier.#name#
#name# can be rss, im, mms or silent

Weather plugin

Image Description class name
- Weather plugin container div.weather
Weather Icon The current weather icon div.weather img.weatherIcon
Weather City The weather city div.weather span.city
Weather Temp The current weather temperature div.weather span.temp
Weather Desc The current weather description div.weather span.desc
Weather Forecast The forecast container div.weather div.Forecast
Weather Error The weather error header div.weather div.header.error

Columns Weather Forecast mode
Image Description class name
Weather Forecast Day The forecast day name div.weather div.Forecast div.day
Weather Forecast Icon The forecast day icon div.weather div.Forecast div.icon
Weather Forecast Highest Temp The forecast highest temp div.weather div.Forecast div.hi
Weather Forecast Lowest Temp The forecast lowest temp div.weather div.Forecast div.low

Inline Weather Forecast mode
Image Description class name
Weather Forecast Day container The forecast day container div.weather div.Forecast div.dayD
Weather Forecast Icon The forecast day icon div.weather div.Forecast div.dayD div.icon
Weather Forecast Day name The forecast day name div.weather div.Forecast div.dayD div.day
Weather Forecast Desc The forecast desc div.weather div.Forecast div.dayD div.desc
Weather Forecast Temp container The forecast temp container div.weather div.Forecast div.dayD div.temp
Weather Forecast Highest Temp The forecast highest temp div.weather div.Forecast div.dayD div.hi
Weather Forecast Lowest Temp The forecast lowest temp div.weather div.Forecast div.dayD div.low