Jump to content
Sign in to follow this  
Zeppelin

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

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

Share this post


Link to post
Share on other sites

Сурёзно :)

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.