MODX is an advanced and powerful content management system that offers a quick and easy way to users to create, manage, and customize their website and blog even if they have little or no knowledge of programming. If you are looking to create an awesome functional website with comparatively less budget, then MODX themes are the best options for you. Here we are sharing the top that you can try for your business website and give it desired look.

Base is a minimalistic and clean MODX theme that comes with a fully responsive design and is ideal for any creative business or corporate websites. This theme, based on Bootstrap framework 3, comes with features like 3 home variations, retina ready design, 600+ fonts, well documented, smooth scroll, drag and drop shortcodes and more.

MDx Adorn is a clean, minimalist, and modern MODX theme made especially for businesses. It is a 100% responsive design coded with HTML5 and CSS and built with Bootstrap framework. It carries features like very easy customization options, SEO & rich snippets, RTL layout, unlimited colors, 404 error page, unlimited colors and more.

Club Cube is another wonderful responsive MODX theme designed for night clubs and DJs. It comes with an eye-catchy and modern design with features like twitter Bootstrap, media slider, SEO ready, 20 unique pages, responsive design, custom animations, valid HTML5 & CSS3 code and more. Get this MODX theme downloaded today.

MDx Sharp is a smart, clean, modern, stylish, and flexible MODX theme that offers all in one website solution for businesses. This theme is ideal for all types of business niches. Its major features include HTML5 & CSS3, 404 error page, unlimited colors, multiple sliders, responsive design, RTL layout and more.

Give your business, , or portfolio a professional and eye-catchy platform with this stylish and advanced MODX theme named STYZO. The major features of this theme include HTML5 & CSS3 code, fully customizable, custom animations, cube portfolio, blog section, filterable portfolio, Ajax form and more. Get it downloaded online now!

Try Superawesome, a multipurpose MODX theme with a modern and clean lading page designed for app or product showcase. This easy to set up and manage theme carries features such as a responsive design, high-resolution background, 500+mock ups, well documentation, based on Bootstrap 3, custom layout, and a robust admin panel.

MDx Uber is ideal MODX theme for product or service based companies and organizations. It can also be utilized for blogs, portfolios, photography, and . HTML5, CSS3, SEO ready, built with Bootstrap 2.3, unlimited color options, Google fonts, flex slider & BX slider and responsive layout are some of the major features of this theme.

MDx Apostle is one of the best MODX themes with a fully responsive design and Bootstrap 2.3 support. It is ideal for businesses, portfolios, corporates, creative websites, blogs and more. It comes with Google web fonts, flex slider & BX slider, jQuery, easy customization, collapsible sidebar, a gallery with a light box and more features.

Tredd Studio is another option for you if you are looking for a professional, clean, and modern MODX theme for your website. This theme is ideal for portfolios, photography, personal blogs, product or app showcase and more. This fully customizable theme comes with a fully responsive design with features like HTML5 & CSS3 code, filterable portfolio and more.

MDx Cygne is a professional and stylish designed for photographers to showcase their creative photography work, portfolio and more. This theme comes with a fully responsive design, custom color options, collapsible sliders, jQuery, flex slider & BX slider, Google fonts and more exciting features. So give it a try and showcase your photography skills professionally.

Duality is a one-page MODX theme ideal for app or product showcase, portfolio, landing page s, corporate and more. This theme carries features like a responsive design, Bootstrap3 CSS framework, single page modern design, isotope premium plug-in, parallax effects, well documentation and more. Download this one-page theme and start creating a professional landing page for your business.

Neat is a wonderful responsive modular MODX theme designed for photography, travel websites, corporates, businesses and more. It offers you exciting features like a responsive design, advanced theme options, multiple post formats, touch-enabled owl carousel, one-page smooth scrolling layout and more. Try this modular MODX theme and create a professional, clean, and modern website for your business.

Colors is a single page MODX theme made for app or product showcase, corporate, businesses and more. This theme comes with features like a responsive design, 3 templates, multiple color options, scrolling menu, format snippet, two menus, TV for images, CSS/JS/image files and more. Get this wonderful theme downloaded and create a lovely website for your business.

All these templates are tested and trusted by countless people across the world. The best part of using MODX themes is that even an unskilled user can comfortably create and manage his/her website with them. Whether you are using a full and multi-page or a one-page MODX theme, you will be provided with advanced functionalities, features, and an user-friendly environment that make it quite simple for you to create a functional website for your business.

Пару месяцев назад я познакомился с движком modx. Вначале было очень трудно, хотя самоучителей по нему достаточно. Но некоторые из них застарели, некоторые были для других версий. Но в общем с работой и возможностями движка я разобрался, хотелось еще установить красивый шаблон modx , но тут я столкнулся с проблемой — шаблонов на модх как таковых нет. Сначала я расстроился, а потом понял насколько это круто, ведь на модх можно поцепить любой html -шаблон, при этом разбив его на чанки (детали шаблона) как угодно! В этой статье я и расскажу вам как легко установить шаблон modx , разбить его на части и как редактировать шаблоны modx .

Самое главное — это найти просто html-шаблон. Желательно адаптивный — чтобы открывался на разных устройствах с разной шириной экрана. Будем считать что Вы нашли такой (хотя в нашей случае подойдет абсолютно любой html шаблон). Далее нужно или залить файлы на хостинг, или создать там странички и скопировать содержимое. Но давайте все по шагам и как это делаю я.

Пошаговая инструкция по созданию и настройке своего шаблона modx

Итак, мы имеем шаблон — набор html и css файлов, возможно еще и скрипты.

1. Заходим в админ панель modx, вкладка Элементы-Шаблоны и жмем плюсик.

3. Жмем сохранить. Все, наш шаблон готов. Но чтобы проверить его работу, нужно создать тестовую страничку. Для этого Создаем новый ресурс (страницу), выбираем наш новосозданный шаблон и жмем сохранить. Не забываем отметить галочкой Опубликован .

Теперь открываем нашу страницу (введя вручную адрес в браузере или добавьте в меню для удобства). Если Вы все сделали правильно сайт должен открыться с Вашим новым html шаблоном, установленным на modx.

Свой шаблон modx: не показываются картинки и стили css

Хотя, скорее всего, шаблон может не открыться так как надо с первого раза. Будьте внимательны с расположением файлов . Обычно шаблон может «поплыть» и показываться без картинок. Все из-за того, что неверно прописан путь к файлам. Их нужно смотреть в самом файле шаблона и подставить туда, куда вы заливали на хостинг. Например, я заливал файлы в папку assets/template/test_shab /, поэтому в шаблоне прописывал что-то вроде assets/template/test_shab/img/favicon.ico и т.д. Все пути к файлам нужно сменить, поскольку стандартно все файлы находятся в папке с шаблоном, а в modx лучше их куда-то загружать (но это скорее для удобства, дабы не засорять систему).

Как сделать чтобы отображался контент modx на своем шаблоне

Если Ваш шаблон открывается и все картинки показываются — это хорошо. Но это еще не все. Сам контент, прописан через админку modx, не выводится. А почему? Потому что он не упоминается в шаблоне! Мы просто скопировали весь код из html-шаблона. Добавьте вместо контента в шаблоне чанк [[*content]] , который как раз и отвечает за вывод всего контента modx. В редакторе шаблона выглядеть это будет примерно вот так:

На этом пока заканчиваем. Если что-то не получилось — спрашивайте. Это пока не все, еще нужно будет разбить ваш шаблон на чанки , чтобы удобнее выводить контент и работать с сайтом.

Сегодня мы с вами подберем подходящий дизайн в виде готовой HTML-верстки для реализовываемого проекта. А также настроим вывод содержимого одиночных веб-страниц.

Немного о выборе верстки

Итак, в качестве исходного материала для создания шаблонов страниц Модэкса я выбрал верстку под названием «simplemagazine-01″ от TemplatesDock:

Как видите выше структура «simple magazine» полностью соответствует классическому блогу: две колонки, сверху главное меню, справа рубрики и иные вспомогательные элементы. Кроме того веб-дизайнер с HTML-верстальщиком проработали также и шаблон внутренней страницы, не обделив вниманием основные элементы типографики:

Фактически это то, что нам нужно для старта.

Скачать

Интеграция дизайна в MODX Revolution: шаблон одиночной страницы

Подготовка файлов

1. После авторизации на вашем сайте посредством встроенного файлового менеджера (см. вкладку Файлы дерева элементов справа) создайте новый каталог под названием templates в папке «assets», затем в этом новом ещё один, — назовите его «simplemagazine»:

2. В контекстном меню созданного каталога templates выберите пункт «Загрузить файлы», если предпочтете загружать файлы встроенными средствами…

Ну а я в целях экономии собственного времени просто загружу папки design, javascript и css в /assets/templates/simplemagazine . Отлично, необходимые файлы для будущих шаблонов страниц успешно разложены по своим местам. Далее приступим к собственно самому процессу интеграции.

Создание шаблона одиночной страницы

1. Перейдите на вкладку Ресурсы дерева элементов. Введите имя шаблона и его описание, в поле код вставьте полное содержимое файла «subpage.html», — делайте всё, как показано на снимке экрана, расположенном ниже:

2. Между тегов … добавьте базовую ссылку. Это необходимо для того, чтобы можно было посредством относительных ссылок переопределить пути до стилей и клиентских скриптов.

3. Теперь переопределяем пути до стилей и скриптов, заменяя пути на подобные нижеследующим. К примеру было в исходной разметке:

Принцип надеюсь понятен. Но если и этот пример для читателя пустой звук(!), тогда в срочном порядке рекомендую прочесть htmlbook.ru — о способах добавления стилей к странице. Тоже самое выполняете с включениями JavaScript.

Итоги

Всем привет. Решил выйти из ридонли.
Не для кого не секрет что админка Evo устарела еще 10 лет назад. По сему нужно что-то делать для комфортной работы с админкой на планшетах и мобилках. За день на коленке был собран новый шаблон для админки который по своему принципу очень похож на админку WordPress (да и по дизайну почти слизан с нее). Просьба не кидаться тапками, мол фу, WordPress… Админка у них явно удобней и выглядит лучше чем у нашего любимого Evo.

Сам шаблон сделан на основе дефолтной темы от Dmi3yy и взял из нее только лучшее. Шаблон работает с версии 1.1RC. Если вы обладатель более старой версии, вы можете поменять файл /manager/index.php на кастомный в своем MODx и все будет работать.

Основные отличия от остальных тем:

1. Убрано верхнее меню. Полностью.
2. Вместо верхнего меню быстрые ссылки на создание элементов (чанки, сниппеты и т.д.)
3. Верхнее меню перенесено в левую часть. К дереву документов.
4. Переписан коллапс бокового меню.
5. Добавлены выпадающие списки для верхнего сайдбара и бокового меню.
6. Стало удобно работать с админкой на планшете.

Что планируется

1. Переписать стили для всех элементов в главном фрейме.
2. Добавить поддержку кастомных экшнов, без внесения изменений в оригинальные.
3. Переписать большинство экшнов и сделать к ним шаблоны. (разделить логику и представление)
4. Добавить сетку для всех элементов админки.
5. Переписать большинство скриптов и вынести их в отдельный файл. Надоело обилие скриптов во фреймах.
6. Добавить js фреймворк для комфортной работы с полями и формами опционально. (Основные элементы формы останутся для поддержки модулей)
7. Вынести все стили из фреймов в отдельные файлы для каждого фрейма.

Скачать кастомный index.php для manager вы можете в этом гите . Скачать шаблон вы можете вот по этой ссылке .
Сделал гит.

Шаблон закинул в репозиторий можно установить через него когда пройдет модерацию или скачать архив, распаковать и перекинуть все из папки MODxPress-master в корень сайта.

UPD от 23/02.

Сделано:

1. Дописан менеджерский индекс. Теперь он может подгружать экшены из папки темы.
2. Распиханы js и css файлы из главных фреймов. В качестве глобального контейнера для переменных JS используется window.globalVars. Это поможет убрать весь завязанный на PHP JS код в файлы. Работать с таким глобальным массивом можно даже через плейсхолдеры.
3. Обновлены все экшены (убраны все изображения, заменены на векторные иконки). Кое где всетаки еще попадаются картинки которые пропустил. Преимущественно в контекстных меню.
4. Причесан скрипт генерации нод (дерево ресурсов). Скрипт работает теперь с шаблонами. Шаблоны находятся в папке templates и начинаются с префикса node
5. Причесаны стили кнопок. Говорят что выглядит дешево хотя я отталкивался от цветов MODXa:(Буду рад услышать вашу цветовую гамму.
6. Добавлена фича для мобильных кнопок. Основная кнопка сохранения теперь является выпадающей. Выпадает по ховеру. На мобильных устройствах на кнопку необходимо кликнуть по "+ действие" для выбора поддействия и на галочку для повторного применения действия.
7. В экшен добавления/редактирования ресурса добавлен мобильный вид кнопок. Теперь на мобильниках эти кнопки состоят только из иконок.

Планируется:

1. Переписать большинство экшенов под работу в шаблонами.
2. Распихать весь js и css по соответствующим файлам. Большую часть переписать на jQuery.
3. Добавить фреймворк для элементов формы. Старые элементы оставить для совместимости со старыми версиями модулей.
4. Добавить сетку для всех экшенов.
5. Улучшить мобильный и планшетный виды.
6. Поправить баги какие вы найдете.

Кастомный индекс теперь лежит в паке. После распаковки вы можете найти его в папке manager. Файл называется index-new.php. Перед заменой сохраните старый индекс. (хотя новый поддерживает работу со старыми шаблонами)

UPD от 24/02

Причесал все фреймы. Раскидал стили и скрипты по файлам и папкам. Перенес файл генерации меню в папку инклюдов, так логичней. header.inc.php и footer.inc.php добавлены в основной пак и подгружаются из папки includes темы. По фреймам осталось только перевести их в шаблонный вид и с ними закончено, больше я их трогать не буду. Если только не потребуется ввести пару новых эвентов.
Добавил выпадающую кнопку во все экшены элементов. Появилась небольшая бага с воркером (нотификатор о состоянии работы в шапке) но на полноценную работу это не влияет.
Архив перезалит.

UPD от 01/03

Принято решение интегрировать фичу похожую на плагин TreeTabs в тему. Ну или сам TreeTabs, пока еще не решил. В качестве исходного парсера выбран QB ввиду легкости интеграции. При переносе всех наработок в ядро будет использован Twig. На этом пока все. Следующий апдейт будет под версией 1.1 и будет содержать первые 2 экшена переписаные под шаблоны (mutate_content и mutate_settings) и новый внешний вид всех элементов форм. Дополнительно планируется добавить функционал сортировки табличных данных.

После установки CMS MODx, первым что нужно сделать: это создать тему . Конечно, можно воспользоваться демонстрационным шаблоном, добавив его при установке CMS,

но у нас ставится другая задача: сделать уникальный шаблон для MODx самим .

Для этого перейдем в Админ панель/элементы/управление элементами/шаблоны. Здесь, имеется ссылка: Новый шаблон . Переходим по этой ссылке:

В этой вкладке, мы и будем создавать новый уникальный шаблон для сайта на CMS MODx.

Итак, мы имеем четыре поля для введения описания шаблона MODx:

• Поле имени шаблона. Так как мы создаем главную страницу назовите шаблон index_1 .
• Описание шаблона. Напишите краткое название Вашего сайта, у меня это будет: Лучшие бесплатные CMS интернета .
• Существующие категории. Здесь можно выбрать категории: Content, Demo Content, Login, Forms… Выбираем категорию Content .
• Поле новая категория. Оставляем это поле пустым.

Как, Вы уже успели заметить, в этой вкладке все поля пустые, и самое главное поле: Код шаблона (HTML) MODx , тоже пустое, его нам и предстоит заполнить HTML -кодом. Не переживайте, знания языка гипертекстовой разметки нам не пригодится, писать в ручную HTML - код мы не будем. Для создания шаблона MODx мы воспользуемся специальной программой.

Создание страницы при помощи программы FrontPage 2003.

Для написания HTML шаблона мы воспользуемся визуальным html-редактором для быстрого создания сайта и Web-страниц:

Итак, приступим к созданию страницы при помощи программы: FrontPage 2003 .
После установки и запуска программы, откройте вкладку: Файл/создать , у Вас появляется меню следующего вида:

Нажмите ссылку: Создать пустую страницу . Появляется HTML-код пустой страницы - это необходимые теги без которых страница даже пустая отображаться не будет.
В нижнем левом углу, Вы можете переключить режим отображения страницы, доступны следующие режимы:

• Конструктор - режим создания страницы режиме визуального конструктра.
• С разделением - режим создания страницы с разделением в одной половине экрана режим конструктора в другой половине режим кода HTML.
• Код - режим создания страницы, при помощи языка HTML.
• Просмотр - режим отображения страницы в браузере.

Для того, чтобы создать Веб-страницу, разложим создаваемую нами страницу на составные части:

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

Перейдем в режим: Конструктор и создаем в этом режиме, таблицы в соответствии с нарисованной нами структурой:

Отредактировать: размеры таблицы, фон, ширину границы, обтекание текстом и многое другое, можно при помощи вкладки: Таблица/Свойства таблицы/таблица:

После создания таблиц, заполним их соответствующим содержимым:

• Шапку страницы - изображением для шапки.
• Горизонтальное меню - ссылками на другие страницы сайта.
• Контент - статьями и изображениями.
• Вертикальное меню - ссылками на другие страницы сайта.
• Подвал страницы - счетчиками посещений и баннерами.

Выделим таблицу шапки, и при помощи вкладки: Вставка/Рисунок/Из файла… загрузим в таблицу заранее подготовленное изображение для шапки:

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

Прикрепим к каждому из пунктов меню гиперссылку. Делается это при помощи выделения пункта меню и клика правой клавишей мыши:

В появившемся меню добавления гиперссылок вводим адрес гиперссылки:

Вертикальное меню, делается точно также, как и горизонтальное меню. В поле контент пишем статью иллюстрированную изображениями. Кстати, при помощи программы , очень легко создать флеш меню.

Для отображения в таблице «подвала», счетчика просмотров страницы, добавляем в таблицу Java - Script, с сервиса предоставляемого Яндексом.

После заполнения всех таблиц перейдите в режим просмотра страницы: Код . Копируем созданный в визуальном редакторе HTML - код и вставляем данный код в поле: Код шаблона (HTML) .

И не забудьте все изображения (картинки, шапки), нужно перенести на хостинг и заново в шаблоне прописать путь к изображениям. Обычно на сервере под графические файлы создают каталог под названием images . В таком случае путь к изображению у нас будет иметь http://ваш сайт /images/изображение.png - это только показательный пример, у Вас может быть по другому.

В поле: Имя шаблона вводим - Мой шаблон , а в поле: Описание - Лучшие бесплатные CMS интернета . Нажимаем клавишу: Сохранить . Вот мы и создали уникальный шаблон для CMS MODx.