Vibe Streamer 3 - Theme Guide - Vibe Streamer Forum Archive

siit

14-01-2010 00:19:15

[b23d6sfi4]HOW TO INSTALL A THEME[/b23d6sfi4]

Vibe Streamer is shipped with the default "gray" theme, located in the "sites\default\themes" directory where you installed Vibe Streamer. All themes you create or download has to be put into this directory in order for the web client to discover them. Before you can use your installed theme you will have to activate it for a given user or group.

Only an administrator user can activate a theme for a user or group. Log on to the web client as the administrator user and click the "Settings" icon in the bottom left corner. Select either the user or group that this theme should be available for and then click the "Theme" setting and set the value to the same name as the theme you have installed. The name of the theme is the same as the name of the folder you copied to the "sites\default\themes" directory.

Now you can log on as a user that has the newly installed theme enabled and try out your new theme.

[b23d6sfi4]CREATING A NEW THEME[/b23d6sfi4]

Creating a new theme for the Vibe Streamer web client is the recommended way to customize the color scheme and images. Allthough it is possible to modify the web client source itself, it is not recommended to do so if you want to stay up to date with the latest updates.

Creating a theme is generally a matter of overriding the CSS used and creating new modified copies of the images used by the web client. Additionally, Vibe Streamer uses a flash component as the media player. If your created theme will require changes to the media player, you will currently have to modify the flash component and distribute your modified version with your theme. In a future version, hopefully the media player might be themable as well in order to make theming easier. The following tools and experience is recommended for theme development

- Good knowledge in CSS/HTML development
- Debug/Development tool, such as Firebug for Firefox
- Image editor, such as Photoshop or GIMP
- Adobe Flash CS3 or newer, if changes to the media player is required

The best way to start off with your new theme is to create a new folder in the "sites\default\themes" directory where you installed Vibe Streamer. The name of the new folder represents the name of your theme and should only contain alphabetical (a-z) and numerical characters (0-9).

Next, create a new file named "include.vibe" within your new folder. This is the file that will be included by the web client when the skin is loaded. Any output generated from your include file will be placed in the <head> element of the web client HTML, therefor this is where your theme should link to any additional CSS stylesheets, such as the required stylesheet "vibe-base.css" that provides important CSS classes required by the web client.

For playing audio, Vibe Streamer requires the media player flash component in every theme. If no changes are required to the media player you can copy the flash player from the default "gray" theme, located in "resources\swf\build" to the same folder in your own theme. If your new theme requires changes to the media player, you are currently required to create a new flash component using Adobe Flash CS3 or newer.

You can download source for the flash player here http//www.vibestreamer.com/source/Vibe ... Player.zip

It is recommended to look at the default "gray" theme implementation for how a theme is implemented and for the recommended folder structure, although your new theme should not override the "gray" theme itself. The Vibe Streamer web client is based on the Javascript framework Ext JS (Currently version 2.3.0), and the "gray" theme is actually based on a default theme in Ext JS. When working on your theme, most of the CSS classes and resources you will have to override will be from Ext JS. You can find more information on theming Ext JS on their website and there are already a few Ext JS themes out there that you can look at for more information.

If you need more help or information you can always discuss theme development in the Vibe Streamer forum.

460v3411

15-03-2012 07:13:36

Since no-one has replied for past 2 years.. don't know anyone is really into skinning or not, apart from B-22..

Sorry for the lengthy post

I logged in here after 3-4 years, liked version 3 very much, thanks a ton siit, liked the internal architecture and especially the fun part i.e skinning part which is so very simple in v3 that i have 2 dozen skins in my kitty for v3.0.2. I hope siit remembers me, i was the 1st one in the forum to come up with [b9rcd0scf][i9rcd0scf]nowplaying panel with albumart[/i9rcd0scf][/b9rcd0scf] almost 5 years back [[i9rcd0scf]VibeAmpPlus skin[/i9rcd0scf]],

few observation and suggestions to siit that i have come across while skinning the v3.0.2(not tested the latest beta, hope its already included), [note that following suggestions are aready implemented in my person vibe streamer]

[b9rcd0scf]1.[/b9rcd0scf] flash player need to be skinned from outside.

[b9rcd0scf]2.[/b9rcd0scf] A default "station logo" at the place of albumart in nowplaying panel area will be displayed while opening of the page(after logged in). respective albumart will be displayed once you select any track.
[my implementation (right now its only possible by making changes in core files.. this should be part of some kind of config file if not theme)

vibe-all.js->> init function () { ->>>
[u9rcd0scf]add[/u9rcd0scf] the code
[code9rcd0scf] Ext.STATION_IMAGE_URL = "plugins/nowplaying/resources/images/station_logo.jpg";[/code9rcd0scf]

nowplaying-all.js ->> onPanelRenderfunction(component) ->>>
[u9rcd0scf]replace[/u9rcd0scf] the code with
[code9rcd0scf]'<div class="vibe-plugin-nowplaying-cover"><img src="' + Ext.STATION_IMAGE_URL + '"&></div>'[/code9rcd0scf]
]

[b9rcd0scf]3.[/b9rcd0scf] Part of code of core file vibe-all.js should go to theme area (example ..pre-size different sections/panels is required for different themes].

[b9rcd0scf]4.[/b9rcd0scf] Part of nowplaying panel should go to theme area ( example.. nowplaying panel background, also default no-cover.gif should be according to the theme ).

[b9rcd0scf]5.[/b9rcd0scf] Spectrum Analyser just next to the flash player.
presently only possible by making modifications in core file vibe-all.js
[ my implementation
vibe-all.js ->>
add this code in appropriate locations.
[code9rcd0scf] spectrumPanel: null,[/code9rcd0scf]

[code9rcd0scf]var spectrumPanel = new Ext.Panel({ border: false, cellCls: "vibe-headerpanel-col2", cls: "vibe-spectrumpanel", html: '<object type="application/x-shockwave-flash data="spectrum.swf" height="50"><param name="movie" value="spectrum.swf" /><param name="wmode"value="transparent"/><param name="scale" value="exactfit" /></object>' });[/code9rcd0scf]
also,
[code9rcd0scf]var headerPanel = new Ext.Panel({ border: false, cls: "vibe-headerpanel", layoutConfig: { columns: 4 }, height: 50, items: [this.playerPanel, spectrumPanel, this.searchPanel, logoPanel], layout: "table", region: "north" });[/code9rcd0scf]
]

note spectrum.swf is taken from revolt. same as b-22s

[b9rcd0scf]6.[/b9rcd0scf] settings page for admin ->
Admin should be able to [u9rcd0scf]select[/u9rcd0scf] the skin instead of manually key-in the skin name.

[b9rcd0scf]7.[/b9rcd0scf] Part of vibe-base.css need to be in theme area for skin specific issues.

there are more, but its already getting lengthier..
happy skinning..

pm me if anyone got bored with gray skin and need more skins.

/Swaroop

Example of one of the basic skin [b9rcd0scf]slate[/b9rcd0scf] with [i9rcd0scf]modified flash, spectrum analyser, bigger Album art[/i9rcd0scf] etc.

[img9rcd0scf]http://i40.tinypic.com/fc34gz.png[/img9rcd0scf]