Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Добрый день!

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

Всем этим хозяйством рулит 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
Надіслати
Поділитися на інших сайтах


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

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

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

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

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.