1. 1 - Generar un diseño de Zii Widgets
2. 2 - Incluir los archivos necesarios en Yii
3. 3 - Configurar los componentes Zii Widgets para que usen nuestro "theme"

Un aspecto del diseño de interfaces de usuario tiene que ver con la coherencia del diseño y uso de colores entre los distintos componentes de interfaz de usuario utilizados.

Normalmente un sitio o aplicación web es diseñada con una estética particular, y que normalmente obedece a la identidad de la misma.

Yii ofrece mediante Zii Widgets la posibilidad de integrar controles JQuery UI a nuestras aplicaciones, pero por defecto vienen con un diseño estándar.

Este diseño puede ser muy facilmente cambiado con algunos simples pasos, los cuales me fueron transmitidos por Sebas. Hemos buscado juntos varias veces en el sitio, el foro, los tutorials y no encontramos un lugar donde efectiva y simplemente se indique cual es la manera más facil de cambiar este diseño.

Es por esto que decidí compartir el conocimiento adquirido, transimitido por Sebas, y plasmado por mi.

Consta de tres simples pasos:

1 - Generar un diseño de Zii Widgets ¶

Todos los Zii Widgets hacen uso de JQuery UI.

La forma más sencilla es utilizar la herramienta provista por JQuery UI para generar los diseños o "themes" que mejor se adapten a nuestra aplicación web.

Para ello hay que ir a http://jqueryui.com/themeroller, y generar el diseño a tu medida. Una vez hecho esto proceder a bajar el "theme". La versión 1.8.6 es la generada al momento de escribir el artículo y es compatible con la versión de Yii 1.1.5.

2 - Incluir los archivos necesarios en Yii ¶

El siguiente paso es copiar los archivos necesarios en alguna de las carpetas públicas de nuestra aplicación: los recursos generados, CSS e imágenes, van a ser utilizados por Zii Widgets (JQuery UI) para darle nuestra combinación de colores a nuestra interfaz.

En mi caso, creé una carpeta llamada 'jqueryui' dentro de css: /css/jqueryui Esta carpeta es la que estará relacionada con la propiedad themeUrl de CJuiWidget.

Luego creé otra carpeta, correspondiente al nombre del theme que quiero usar, en mi caso, 'fc'. El nombre de la carpeta 'fc' estará relacionado con la propiedad theme de CJuiWidget.

Dentro de fc (o el nombre que hayas elegido para tu theme), hay que copiar algunos de los archivos que están en el archivo compactado que has bajado de JQuery UI Theme Roller.

En particular, solo es necesario copiar el contenido de la carpeta del archivo compactado /css/custom-theme/ a la carpeta fc.

Por último, hay que cambiarle el nombre al archivo jquery-ui-1.8.6.custom.css, por jquery-ui.css

3 - Configurar los componentes Zii Widgets para que usen nuestro "theme" ¶

El último paso, es configurar los componentes Zii Widgets para que hagan uso del "theme". Hay que hacerlo para cada uno de los componentes Zii que vayan a utilizarse. La mejor manera, y más organizada, es hacerlo dentro del archivo /protected/config/main.php (o aquel donde guardes tu configuración de aplicación global).

Un ejemplo de esta configuración es la siguiente:

$config = array(
'components' => array(
		// enables theme based JQueryUI's
		'widgetFactory' => array(
			'widgets' => array(
				'CJuiAutoComplete' => array(
					'themeUrl' => '/css/jqueryui',
					'theme' => 'fc',
				),
				'CJuiDialog' => array(
					'themeUrl' => '/css/jqueryui',
					'theme' => 'fc',
				),
				'CJuiDatePicker' => array(
					'themeUrl' => '/css/jqueryui',
					'theme' => 'fc',
				),
			),
		),

De esta manera, los tres componentes, CJuiAutoComplete, CJuiDialog y CJuiDatePicker, hacen uso del theme definido.

(English Version: Theming your Zii Widgets)