Мануал

Специально для вас мы подготовили видеоуроки на каждую тему. Ознакомьтесь с мануалом, чтобы найти ответ на свой вопрос и подробно изучить систему.

Выберите интересующую вас тему и следуйте инструкциям. 

 
А теперь подробнее

Кастомизация виджета Меню

Кастомизируем виджеты в MuWID, в качестве примера кастомизируем виджет Меню

Мы уже установили систему на хостинг. На хостинге появились две новые папки: muwid3 и my-admin-cms. Все плагины лежат в папке muwid3. 

Мы также установили через админку плагин Меню и можем увидеть его в папке muwid3 на хостинге – он находится в папке menu. Здесь же мы видим папку css – здесь лежат стили нашего меню. С их помощью мы настроим вид нашего меню.

Для работы со стилями мы рекомендуем использовать Notepad , phpDesigner или Dreamweaver. В этом примере мы будем пользоваться phpDesigner.

В phpDesigner подключитесь к ftp и зайдите к себе на хостинг.
Найдите папку своего домена.
В ней откройте папку public_html => muwid3 => plugins
Выберите плагин, с которым хотите работать (в нашем случае menu)
Откройте папку css и выберите меню, с которым хотите работать (top или left). В основном рабочем поле откроется файл css

Для начала научимся менять позицию блока ссылок внутри контейнера. 

Чтобы определять параметры css элементов на странице в браузере, используйте программу CssViewer.

Вернёмся к коду. 
В восьмой строке кода найдите оператор “text-align”. По умолчанию его значение – center. Замените его, например, на right или left. Сохраните результат.

Откройте браузер и обновите страницу, чтобы увидеть результат.

Теперь научимся выделять блок цветом.

Вернёмся к коду в phpDesigner. 
В тринадцатой строке находим подсказку /Первый уровень меню/. Это параметры меню первого уровня.
В конце строки 23 после параметра text-align: center; отбейте новую строку.
В ней напишите: background: #000000 (код нужного вам цвета). Сохраните результат. 

Откройте браузер и обновите страницу, чтобы увидеть результат.

Теперь поменяем вид кнопок меню при наведении курсора.
Для этого в коде в phpDesigne в строке 27 найдите оператор hover.
Задайте для него новый background, выбрав цвет.

Теперь поменяем вид кнопок при нажатии.
Для этого в коде в phpDesigne в строке 47 найдите подсказку /Активная ссылка/
В строке 52 измените в параметре background цвет фона на нужный.
В строке 53 измените в параметре color цвет текста на нужный.
Сохраните результат. 

Откройте браузер и обновите страницу, чтобы увидеть результат.

Теперь зададим фиксированную ширину кнопок, чтобы они смотрелись аккуратно.
Для этого в коде в phpDesigne в строке 55 находим подсказку /Настройка полей/.
В конце строки 73 отбиваем новую строку
Вводим в ней параметр width (ширина). Например, width: 130px; Сохраните результат. 

Откройте браузер и обновите страницу, чтобы увидеть результат.

Попробуем заблокировать для нажатия кнопку меню первого уровня. Например, в разделе «Услуги» мы создали подразделы «Дизайн» и «Разработка» и хотим, чтобы только эти кнопки были активными, а сама кнопка «Услуги» - нет.
Для этого в админке нажмите карандашик у раздела «Услуги» и во вкладке «Ссылки» в поле «Адрес перехода» введите #. Сохраните результат.
 
Теперь поменяем выравнивание текста в кнопках меню второго уровня.
Для этого в коде в phpDesigne в строке 28 заменим значение параметра text-align. Например, на text-align: center.

Как откатить настройки к первоначальному состоянию?

В админке нажимаем кнопку MuWID в правом нижнем углу. Выбираем вкладку MuWID.
Выбираем плагин, который хотим обновить, кликаем по нему.
Нажимаем кнопку «Обновить».
Настройки css сброшены на установленные по умолчанию.

Появился вопрос? Мы всегда готовы на него ответить.