Перейти к содержанию
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.

post-8333-0-13201500-1360725888_thumb.jpg

  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Сурёзно :)

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.