1. 1 - Criando o design do Zii Widgets
2. 2 - Incluir os arquivos necessários no Yii
3. 3 - Configurar os componentes Widget do Zii para utilizar o nosso tema

Um aspecto do design da interface de usuário tem a ver com a coerência do design e da utilização das cores entre os diferentes componentes da interface do usuário utilizada.

Normalmente um site ou aplicação web são projetados com uma aparência específica e normalmente obedece à identidade da aplicação.

O Yii oferece uma maneira para integrar os controles de interface do usuário chamada Zii Widgets, com base na JQuery UI para nossas aplicações, porém, eles vem com o design padrão.

Este design pode ser facilmente alterado com uma série de passos simples, que foram relatados por Sebas para mim.

Temos procurado várias vezes no site, no fórum, tutoriais, porém não conseguimos encontrar um lugar específico onde você pudesse obter esta informação de uma forma simples e eficaz.

É por isso que eu decidi compartilhar o conhecimento adquirido, passado por Sebas e escrito por mim.

1 - Criando o design do Zii Widgets ¶

Todos os Zii Widgets utilizam o JQuery UI.

A forma mais fácil é usar a ferramenta fornecida pela JQuery UI para criar o design ou temas que melhor se encaixam em nossas aplicações web.

Temos que navegar no JQuery UI Theme Roller e brincar com ele até chegarmos ao nosso próprio design.

Uma vez que fizemos isso, nós temos que baixar o tema. O Theme Roller irá solicitar que você selecione a versão. A versão 1.8.11 estava disponível quando este artigo foi traduzido e é compatível com o Yii 1.1.7.

2 - Incluir os arquivos necessários no Yii ¶

O próximo passo é copiar os arquivos necessários em uma das pastas públicas da nossa aplicação: os recursos criados, CSS e imagens que serão utilizados pelo Zii Widgets (JQuery UI) para fornecer o tema configurado para a nossa interface com o usuário.

No meu caso, eu criei uma pasta chamada 'jqueryui' dentro da pasta css: /css/jqueryui Esta pasta será atribuída a propriedade themeUrl do CJuiWidget.

Então eu criei uma outra pasta com o nome do tema que eu decidi utilizar, no meu caso, 'fc'. O nome desta pasta será atribuída a propriedade theme do CJuiWidget.

Então, dentro da pasta fc (ou o nome utilizado pelo seu tema), você deve copiar alguns dos arquivos contidos dentro do arquivo que você baixou no Theme Roller.

So é necessário copiar os arquivos da pasta /css/custom-theme/ para a pasta 'fc'.

Finalmente, você deve alterar o nome do arquivo CSS, de 'jquery-ui-1.8.6.custom.css' para 'jquery-ui.css'.

3 - Configurar os componentes Widget do Zii para utilizar o nosso tema ¶

A última etapa envolve a configuração dos componentes do Zii Widget, para que eles utilizem o tema.

Cada componente precisa ser configurado. A melhor maneira é fazê-lo no arquivo de configuração principal: /protected/config/main.php

A seguir é exibida a minha configuração:

$config = array(
'components' => array(
		// ativa o tema baseado no JQueryUI
		'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',
				),
			),
		),

Desta maneira, os três componentes CJuiAutoComplete, CJuiDialog e CJuiDatePicker utilizarão o tema definido.

(Versão em Inglês: Theming your Zii Widgets)

(Versão em Espanhol: Cambiando el diseño de JuiWidgets)