Обычно я только настраиваю существующие бесплатные шаблоны и меняю цвета и шрифты. Вопрос в том, когда у меня уже есть страница Joomla в Интернете, какой самый простой способ внести изменения в шаблон CSS?

В настоящее время я использую инструменты разработки Chrome для поиска и настройки определенных стилей для предварительного просмотра. Если мне это нравится, я настраиваю файл css шаблона прямо в онлайн-редакторе в области администрирования.

Когда я только начинал, и у меня не было никакого контента, я использовал локальный веб-сервер с Joomla, который имел преимущество в том, что я мог использовать подходящую IDE для написания CSS и PHP-кода. Поскольку у меня уже есть какой-то контент, я бы хотел посмотреть, как изменения, которые я делаю, выглядят с моим контентом.

Я знаю, что это основной вопрос, но есть ли предпочтительный рабочий процесс, когда кто-то хочет изменить дизайн существующего сайта?

Клонируйте сайт с помощью Akeeba, установите его локально, а затем настройте по мере необходимости. Когда вы закончите SSH / FTP, ваши измененные файлы вернутся на сайт.

Есть множество веских причин, по которым неосторожно «подгонять» на живом сайте…

У вас есть несколько вариантов здесь, в зависимости от того, простота использования, автоматизация или стоимость:

• Сделайте то же самое, что вы делали ранее с локальной установкой, но после установки измените локальную установку Joomla, чтобы использовать вашу живую, удаленную базу данных MySQL configuration.php, если ваш хост поддерживает удаленный доступ. Будьте осторожны - любые изменения БД будут перенесены в живую ...

• Используйте такой компонент, как extplorer, и отредактируйте файлы шаблонов прямо в браузере, с другой открытой вкладкой, отображающей сайт, с использованием инструментов разработчика Chrome. extplorer имеет раскраску кода и отлично подходит для быстрого внесения небольших изменений.

• Используйте систему управления версиями для отправки изменений - например, разработайте свой шаблон в локальной установке Joomla, используя выбранную IDE, с шаблоном в хранилище. Когда закончите, внесите изменения в ваш живой сайт. Используйте зацепку после фиксации, чтобы оформить эти изменения как рабочую версию. Хотя это сложнее в настройке, это означает, что вы всегда можете вернуться к старым версиям шаблона, если допустите ошибку. Добавьте удаленный MySQL, чтобы обеспечить согласованность данных между локальными и живыми.

• Платите за подходящий шаблон / шаблонную структуру - в моей компании мы используем шаблоны YooTheme . Этот шаблонный фреймворк имеет функцию под названием «Customizr», которая представляет собой двухпанельное окно с сотнями переменных CSS (ну, переменные LESS) слева и предварительным просмотром справа. Эти переменные контролируют достаточно близко каждый элемент шаблона, от заполнения желоба до тени текста пункта меню, и всего, что между ними. Изменения применяются мгновенно в предварительном просмотре, и можно определить несколько «стилей», чтобы вы могли играть с различными конфигурациями переменных. Все это говорит, я уверен, что у других шаблонных фреймворков есть очень похожие функции.

NB: я не имею отношения ни к extplorer, ни к YooTheme, кроме как как пользователь.

Если вы просто вносите изменения в CSS, вы можете продолжить их предварительный просмотр в Chrome Development Tools и, используя среду онлайн-разработки, такую ​​как Cloud9 или ShiftEdit, вы можете напрямую подключиться к вашему серверу через FTP и внести изменения в действующий сайт, используя подходящую среду IDE. похоже на то, как вы это делали, когда он был размещен локально

Однако я не рекомендовал бы это для каких-либо более значительных изменений, которые могут сломать ваш сайт (я научился этому нелегко несколько лет назад). Для этого я рекомендую настроить локальный сервер (или бесплатную виртуальную машину с сайта koding.com ), клонировать сайт с помощью Akeeba и использовать Git * для внесения изменений в ваш действующий сайт после их тестирования.

* Если вы не хотите, чтобы ваш код был общедоступным на GitHub, хорошей альтернативой является BitBucket .

Способ 1

Один из методов, который я использовал, - это добавление моего собственного файла CSS в файл шаблона index.php. Это может быть добавлено, только если вы являетесь пользователем.

Способ расширить это - написать простой плагин, который добавляет файл CSS, если вы являетесь пользователем. Я использовал это для внесения изменений в шаблон администратора по умолчанию, чтобы избежать внесения изменений непосредственно в шаблон, который может быть заменен следующим обновлением.

Что-то вроде...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Способ 2

Для предварительного просмотра изменений шаблона вы можете продублировать шаблон и внести изменения в дубликат. Чтобы просмотреть эти изменения, добавьте «? Template = test» к URL, который переопределяет шаблон. Замените «test» тем именем, которое вы решили использовать для дубликата.

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

Я не верю, что можно изменить стиль в URL. [PW: Я только что узнал, что в J3 вы можете переопределить стиль в URL. Смотрите способ 3.]

Способ 3

Аналогично методу 2, но со стилями. Используйте «тестовый» стиль и измените основной шаблон, чтобы включить тестовую таблицу стилей. Чтобы переопределить стиль в URL, добавьте? TemplateStyle =, где находится идентификатор шаблона (то есть числовой).