Маленький совет, как сменить тему для всплывающих окон и файлового менеджера

[Zeppelin]

Добрый день!

Если вам надоело видеть всплывающее окно оранжевого цвета, или захотелось подогнать цвет всплывающего окна или окна файлового менеджера, этот совет для вас !

Всем этим хозяйством рулит jQuery UI (jQuery User Interface), его то мы и будем менять.

1. скачиваем набор со всеми темами для нужной версии jQuery UI http://jqueryui.com/download/ на текущий момент прямые ссылки выглядят так:

jquery-ui-themes-1.9.2 - http://jqueryui.com/...hemes-1.9.2.zip

jquery-ui-themes-1.10.0 - http://jqueryui.com/...emes-1.10.0.zip

2. просматриваем графические файлы в директории /images/ для того, чтобы подобрать подходящие цвета

3. далее формируем и скачиваем полный комплект файлов для выбранной версии и темы

4. распаковываем архив

5. получим директорию

jquery-ui-1.9.2.custom

следующего содержания:

css\
js\
development-bundle\
index.html

это и есть jQuery UI с выбранной нами темой. Скрипты jQuery UI и jQuery для текущей версии находятся в директории /js

Далее на примере темы START

из директории css/ копируем поддиректорию start на сервер. Получим:

для админки:

admin/view/javascript/jquery/ui/themes/start/

для фрон энда:

catalog/view/javascript/jquery/ui/themes/start

6. получим вот такую структуру:

images\
jquery-ui-1.9.2.custom.css
jquery-ui-1.9.2.custom.min.css

7. для пущей важности подгрузим еще и остальные стили. Из директории

jquery-ui-1.9.2.custom\development-bundle\themes\start\

загрузим все файлы и директории на сервер. Получим следующую структуру:

images/
minified/
jquery-ui.css
jquery-ui-1.9.2.custom.css
jquery-ui-1.9.2.custom.min.css
jquery.ui.accordion.css
jquery.ui.all.css
jquery.ui.autocomplete.css
jquery.ui.base.css
jquery.ui.button.css
jquery.ui.core.css
jquery.ui.datepicker.css
jquery.ui.dialog.css
jquery.ui.menu.css
jquery.ui.progressbar.css
jquery.ui.resizable.css
jquery.ui.selectable.css
jquery.ui.slider.css
jquery.ui.spinner.css
jquery.ui.tabs.css
jquery.ui.theme.css
jquery.ui.tooltip.css

8. Теперь осталось только изменить пару файлов, чтобы грузилась выбранная нами тема.

для админки

admin/view/template/common/header.tpl

для фрон енда

catalog/view/theme/default/template/common/header.tpl

в обоих файлах меняем строку "ui-lightness"

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.9.2.custom.css" />

на "start"

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/start/jquery-ui-1.9.2.custom.css" />

Вот собственно и все. Если предложенная цветовая схема не подходит, можно изменить самостоятельно редактируя графические файлы. :)

Вот так выглядит тема start.

[ZyXeL]

Сурёзно :)

Можно чуть проще сделать - поменять цвет ui-bg_gloss-wave_35_f6a828_500x100.png и бордеров.

Или просто поставить бэкграунд без картинки :)

[Zeppelin]

так я в конце поста и написал:

Вот собственно и все. Если предложенная цветовая схема не подходит, можно изменить самостоятельно редактируя графические файлы. :)

не нравятся все предложенные, меняйте графические файлы :) проблем нет. Но в этом шаманстве есть и второе дно. Если решили обновить версию jQuery, почему бы не копнуть немного в сторону :)

PS в теме меняются еще цвета кнопок, шрифтов... короче CSS :)