Редактирование шаблона joomla


В страницах с более сложным дизайном для описания внешнего вида чаще используют CSS (Cascading Style Sheets — «каскадные таблицы стилей»). CSS — это язык, созданный именно для описания внешнего вида элементов html-документа. Блоки CSS-кода могут быть либо включены в код страницы, содержаться в отдельном файле с расширением «css» и подключаться к странице специальной инструкцией в исходном коде страницы.Вам следует найти в коде страницы тег <style> — если он будет ссылаться на внешний файл, то нужно открыть для редактирования этот самый файл. Выглядеть такая ссылка может так:<style type=»text/css» media=»all»>@import «style.css»;</style>А если после тега <style> сразу идут инструкции, а не ссылка на файл, то редактировать стили надо здесь. В обоих случаях вам надо искать ту часть описания стилей, которая относится к телу документа — body. Но в языке CSS это уже будет называться не «тегом» а «селектором», и выглядеть может, например, так:
body {
background-color: Green;
color: White;
}
Вам надо заменить значение параметра background-color — он задает цвет фона страницы.


здесь тоже есть возможность указывать некоторые цветовые оттенки по именам, но лучше использовать шестнадцатеричные значения. Например, шестнадцатеричное значение для оттенка Chocolate = #D2691E.Есть возможность указать не только цвет, но и изображение для фона:body {
background: Green url(img/bg.jpg) repeat-x;
color: White;
}Здесь url(img/bg.jpg) означает, что из папки img для фона страницы будет браться картинка с именем bg.jpg, а repeat-x означает, что она будет размножена по оси X, то есть по горизонтали. Все остальное пространство страницы, не закрытое картинкой будет иметь зеленый фон — он указан перед параметром url. Чтобы картинка была размножена по оси Y (по вертикали), надо указать, соответственно, repeat-y. A no-repeat отключит всякую репликацию фоновой картинки.

www.kakprosto.ru

Сегодня в очередной раз получил письмо от старого клиента, которому когда-то делал сайт на Joomla с просьбой «чуть-чуть подправить сайт», а именно — уменьшить отступы вокруг позиции модуля. Я думаю, эта проблема рано или поздно возникает почти у каждого владельца сайта на любом движке — хотя бы раз в год надо чуть освежать дизайн. 


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

Возьмем простой пример — на сайте под Joomla3 нужно поменять цвет модулей в боковой колонке. В качестве примера буду использовать данный сайт.

Какой софт нам потребуется?

  1. Браузер, в котором можно смотреть исходный код страницы и, что важно — код отдельного элемента. Это позволяют делать почти все современные браузеры
  2. FTP-клиент — программа, позволяющий видеть сайт «изнутри» как папку на жестком диске. Я использую Total Commander (условно бесплатный).
  3. Notepad++ — текстовый редактор, оптимизированный для работы с кодом. В отличие от обычного «блокнота» имеет нумерацию строк, подсветку синтаксиса и возможность быстрого перехода к нужной строке. Подробнее о Notepad++

Алгоритм действий

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

2. Делаем по этому элементу правый клик мышкой, в появившемся контекстном меню выбираем пункт «посмотреть код элемента». Я использую Opera, в ней это выглядит так:


Редактирование шаблона joomla

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

Редактирование шаблона joomla

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

Только вот беда — как ни настраивай стиль через браузер, при следующей перезагрузке страницы все настройки восстановятся, что вполне логично — мы не можем через браузер вносить изменения в файле на сервере (к счастью :), нам нужно зайти на сервер по FTP и найти файл со стилями. Где искать?

В панели со стилями справа вверху указан путь к файлу css на сервере, а также номер строки в этом файле,  где прописаны настройки стиля элемента. Чтобы поменять вид элемента на сайте нам нужно подправить файл стиля на сервере.

3. Подключаемся к сайту по FTP при поможи FTP-клиента. Для этого нам потребуется адрес хоста, логин и пароль к FTP-аккаунту — этой информацией вас должен снабдить хостинг-провайдер. 

В нашем случае путь к файлу стиля такой:  /templates/new-protostar/css/template.css (строка 2155)

Находим этот файл и открываем его в редакторе (я использую Notepad++) и ищем данную строку. В Notepad++ есть горячая клавиша Ctrl+G — перейти к строке. Вводим номер 2155 и нажимаем ОК. И вот, примерно что мы увидим:


Редактирование шаблона joomla

Теперь можно вносить изменения в файл (только не забудьте сделать бэкап — мало ли что?). После сохранения файл будет закачан обратно на сервер и изменения станут видны на сайте.

Этот вариант хорош тем, что он практически универсален — он применим не только для сайта на Joomla, но и на любом другом движке — главное, чтобы у вас был FTP-доступ и обозначенный выше набор программ (или их аналогов).

Если нет доступа FTP

Если у вас нет доступа по FTP, это можно сделать в редакторе шаблона через админку сайта. 

В Joomla это делается через меню «расширения» / «менеджер шаблонов» / 

Редактирование шаблона joomla

… откроется подобие файлового менеджера, в котором можно открывать файлы движка и вносить в них изменения.

В других движках также почти всегда есть возможность это сделать.

Этот метод плох тем, что позволяет редактировать только тот стиль, который зашит в шаблон. Если же вы используете какое-то альтернативное расширение для управления контентом, например, K2, вы не сможете добраться до файла CSS.


Да и производительность труда при использовании данного метода правки будет низкой — функциональность редактора не впечатляет.

«Element-style» — как его поменять?

Бывает  так, что в окне просмотре CSS-свойств элемента фигурирует фраза element-style. Это означает, что свойства элемента прописаны не во внешнем CSS-файле, а в самом коде HTML или PHP. Поменять его сложнее,  чем элемент, описанный во внешнем файле CSS, но все же выполнимо. Самая большая сложность — это найти тот самый файл, который содержит этот элемент — в Joomla они, как правило, раскиданы по всей папке public_html 🙂 

Обычно описание элементов, общих для всего сайта, находится внутри шаблона — public_html/templates/имя шаблона/index.php, но если вы используете сторонние компоненты, то искать исходный код страниц следует в папке этих расширений public_html/components/имя компонента/views — а там уже смотреть исходный код php-файлов и html-шаблонов и искать нужный элемент и его описание. В очередной раз напоминаю — прежде чем вносить изменения в код, сделайте резерную копию.

Но самое обидное то, что даже если вы нашли и поменяли нужное свойство, при следующем обновлении компонента, все сбросится к значениям по умолчанию.

webmaster.artem-kashkanov.ru


Чтобы изменить шаблон Joomla!, то есть внешний вид сайта, нужно уметь работать с CSS и HTML. Разберем как изменить CSS и сразу увидеть изменения с помощью Firebug, а также три расширения для работы с CSS: JowWow CSS Loader, HD-Custom CSS, Advanced Template Manager.

Ссылка на курсы по CSS и HTML http://www.codecademy.com/tracks/web

HTML предопределяет разметку контента, а CSS его визуальный вид. Когда идет речь о работе над дизайном сайта Джумла, в первую очередь реь идет об изменении CSS шаблона Joomla. Для этого нужно перейти в расширения, далее в менеджер шаблонов, выбрать необходимый шаблон и нажать кнопку «Изменить».

Шаблон располагается в папке templates. Обычно большая часть таблиц стилей лежат в папке css. Некоторая часть файлов может быть вынесена в отдельные папки menu, иногда в blocks. Во многих шаблонах реализована возможность менять цветовую палитру сайта и шрифты прямо из публичной части сайта. Но этого явно мало для того, чтобы значительно изменить сайта.

Попробуем изменить CSS части сайта в онлайн-режиме. Для этого будем использования расширение Firebug. Это дополнение для Firefox, которое показывает информацию о CSS и HTML веб-страницы. Устанавливаем Firebug, после щелкаем правой кнопкой мыши на любом элементе страницы и нажимаем Inspect element with Firebug. Внизу экрана откроется окно. Слева HTML, справа — CSS.


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

Что можно сделать дальше для того, чтобы разобраться в работе с CSS? Хочу порекомендовать отличный курс наcodecademy, ссылку можно посмотреть в описании к видео, у них есть отличные курсы по CSS и HTML. Можно заниматься и по ходу дела применять свои знания на своем же сайте.

Быстрый хостинг с хорошей поддержкой и установленной системой для создания сайта на Joomla: https://goo.gl/8uDhHX

Надоел ваш текущий хостинг? HOSTiQ перевезет бесплатно на оставшийся оплаченный срок у старого хостера. Не хотите возиться с переносом сайта? Все сделаем за вас бесплатно.
https://goo.gl/e56LrA

Ищите нас в соцсетях:
Facebook: https://www.facebook.com/Hostiq.ua
Google+: https://plus.google.com/+HostiqUa
Instagram: https://www.instagram.com/hostiq_ua/

www.youtube.com

Изменение заднего фона шаблона (background)

Я использую браузер Chrome, нажимаем F12 или щелкаем правой клавишей мыши на нужном месте и нажимаем «Просмотр кода элемента».

Как видно на рисунке, за задний фон шаблона отвечает тег body со стилем background.

В стилях указан цвет фона #EEE и фоновая картинка (путь к ней). Именно эти параметры дают нам фон сайта.


Внешний вид шаблонов. Как редактировать шаблон Joomla.

Для их изменения нужно просто заменить эти параметры (указать новый цвет и путь к новой картинке).

Пример:

редактировать шаблон joomla

Все изменения производятся в файле, который указан в панели разработчика, здесь это beez5.css, после двоеточия указана строка в которой нужно изменять параметр, у нас это 19 строка.

Путь к файлу можно посмотреть, если навести на название курсором.

Изменение логотипа сайта

Изменять логотип очень легко и для этого есть несколько способов.

Способ 1:

Так же, как и в первом способе, наводим курсор на логотип, щелкаем правой клавишей мыши и нажимаем Просмотр кода элемента. Все, что нам надо узнать, это адрес (путь) к логотипу. Теперь делаем свой логотип, даем ему такое же имя (fruits.gif) и просто заменяем на него старый логотип.


редактировать шаблон joomla 3

Способ 2:

Этот способ самый легкий, но встречается не во всех шаблонах. Идем в: Менеджер шаблонов — Beez5 (стиль) — Указываем логотип.

редактировать шаблон joomla 2.5

Способ 3:

Делаем все так же, только заменяем не файл, а путь к логотипу. Как видно на картинке, картинка вставлена через html, а не через css. Поэтому нужно изменять исходный код шаблона. Делается это легко: Менеджер шаблонов — Beez5 — Изменить шаблон главной страницы. Ищем строчку с <h1 id=»logo»> и изменяем путь к логотипу на нужный. В данном шаблоне путь прописан на php, так как есть вариант №2. Поэтому лучше воспользоваться вариантом №1 или №2.

редактировать шаблон joomla 1.5

Изменить ширину шаблона и блоков


Находим главный блок — div. Как видно на картинке, это <div id=»all»> именно он отвечает за ширину сайта. Смотрим параметры css — стилей, находим widthи указываем нужную ширину. После этого заходим в файл position.css, в 33 строке пишем параметр и сохраняем файл.

редактировать шаблон joomla 3.0

Таким же образом редактируются отдельные блоки. Находим блок, смотрим и изменяем стиль.

редактирование шаблона joomla

Изменение цвета текста и ссылок

Все это делается так же. Щелкаем правой клавишей мыши на тексте и нажимаем Просмотр кода элемента. Нам покажет блок и стиль блока отвечающий за параметры текста. Цвет текста и ссылок задается параметром — color.

редактирование шаблона joomla 3

Все файлы могут редактироваться через редакторы типа notepad++ или через стандартный «редактор» Joomla.

Менеджер шаблонов — Нужный шаблон. Тут Вам выдается список файлов (index.php, шаблон страницы 404, шаблон страницы печати, стили.).

редактирование шаблона joomla 2.5

На этом все.

Ваше мнение важно для нас. Пишите Ваши комментарии.

joomla-secrets.ru

Изменение файлов шаблона сайта Joomla в админке

Иногда требуется внести незначительные изменения в css, html, js или php файлы шаблона сайта. Можно конечно вносить изменения локально на компьютере, а потом заливать их на сервер или воспользоваться средствами, предоставляемые хостингом, но в Joomla есть стандартные инструменты для этих задач. В этой статье рассмотрим, как можно изменять файлы шаблона сайта непосредственно из админки Joomla 3.

Мы уже знаем, как попасть в раздел админки «Изменить шаблон» менеджера шаблонов сайта, а также, как выйти из него. Для того, чтобы начать редактировать файлы шаблона нужно (оказавшись в Менеджере шаблонов сайта Joomla 3. «Изменить шаблон») в закладке «Редактор» воспользоваться навигацией по папке шаблона. Зайдя в нужную папку (открытие папок происходит по клику мышкой), выбрать файл, в который нужно внести правки.

выбрать файл, в который нужно внести правки

Файл также открывается кликом по его имени в навигационном меню слева.

Файл открывается кликом по его имени в навигационном меню слева.

После того, как файл открыт на редактирование, с ним можно работать как в обычном текстовом редакторе. После того, как правки внесены и необходимо, чтобы изменения были внесены в файл, находящийся на сервере, нужно нажать на кнопку «Сохранить» (зелёную в верхнем наборе кнопок).

Внимание! После нажатия кнопки «Сохранить» и кнопки «Сохранить и закрыть» все изменения в файле становятся необратимыми. И откатить назад их уже не реально. Поэтому нужно быть предельно осторожными и осознавать, что за изменения вносятся. Ну и BackUp в помощь. 🙂

изменения внесены в файл, нажать на кнопку «Сохранить»

Чем хороша кнопка «Сохранить», так это тем, что изменения в файл вносятся, но окно редактирования файла не закрывается. Это позволяет вносить изменения в файл на сервере, при этом постоянно контролировать то, что происходит с внешним видом сайта (кнопка «Обновить» или клавиша F5 в помощь).

После того, как все необходимые изменения внесены и проверены, можно нажать на кнопку «Сохранить и закрыть».

изменения внесены и проверены, нажать на кнопку «Обновить и закрыть»

Кнопка «Сохранить и закрыть» сохраняет изменения в файле на сервере и закрывает окно его редактирования.

Если хочется просто посмотреть код файла или не сохранять внесённые в окне редактора изменения, нужно воспользоваться кнопкой «Закрыть» или просто перейти в левой панели в другую папку и/или выбрать другой файл.

Внимание! Это самый надёжный способ не внести изменений в файл. Пока не нажата кнопка «Сохранить» или кнопка «Сохранить и закрыть», всё, что было написано или удалено, ещё не попало в файл на сервере, и можно безопасно выйти из режима редактирования или открыть другой файл.

воспользоваться кнопкой «Закрыть» или перейти в другую папку

Таким образом можно работать с модификацией шаблонов шаблона сайта Joomla в админке в Менеджере шаблонов сайта Joomla 3 «Изменить шаблон».

mb4.ru

Из чего состоит шаблон Joomla 3

Для шаблонов в Joomla отведена специальная папка «templates», в корне которой каждый шаблон имеет свою собственную одноименную папку. Все без исключения шаблоны состоят из файлов, причем количество этих файлов у разных шаблонов может отличаться. Но есть и стандартные файлы, без которых не будет работать ни один шаблон:

  • index.php – индексный файл, он определяет структуру сайта
  • templateDetails.xml – данный файл содержит всю информацию о шаблоне и служит для установки шаблона через панель управления
  • Файлы стилей (.css) – с их помощью определяется оформление страниц

Кроме того шаблоны могут содержать файлы скриптов (.js), изображения, языки и многое другое. На скриншоте ниже представлен набор файлов, из которых состоит стандартный шаблон «Protostar»:

Файлы стандартного шаблона Protosar

Какие бывают шаблоны

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

  • Шаблоны для сайта – меняют облик и дизайн сайта
  • Шаблоны для панели управления – данный вид шаблонов предназначен именно для панели управления, на сайт они никак не влияют.

Работа с шаблонами Joomla 3

С разновидностями, местом хранения и файлами шаблонов разобрались, теперь поговорим о том, как работать с шаблонами при помощи панели управления. Для начала давайте перейдем в раздел «Шаблоны: Стили (Site)» («Расширения» -> «Шаблоны») и посмотрим, какие шаблоны уже присутствуют в базовой сборке CMS Joomla:

Шаблоны для сайта Joomla в разделе «Шаблоны: Стили (Site)»

На странице «Шаблоны: Стили (Site)» видно, что в нашем распоряжении имеется два шаблона Beez3 и Protostar, последний установлен по умолчанию для всех страниц сайта, обратите на это внимание ведь в Joomla один и тот же сайт может состоять из нескольких шаблонов. И для различных разделов сайта можно назначить свой собственный шаблон, тем самым сделать сайт более привлекательным.

Давайте откроем один из шаблонов для редактирования и посмотрим, что и как можно отредактировать:

Редактирование шаблона Protostar в Joomla 3

На первой вкладке с именем «Подробно» мы видим некую информацию касательную данного шаблона, тут же разработчики нам пишут, что шаблон использует фреймворк Bootstrap.

Следующая вкладка «Дополнительные параметры» содержит базовые настройки шаблона, тут мы можем поменять цвет текста и фона сайта, логотип, заголовок шрифты и прочие настройки:

Редактирование шаблона Protostar, вкладка "Дополнительные параметры"

И последняя вкладка — «Привязка к меню» именно с её помощью можно назначить шаблон для всего сайта или для определенных разделов. Просто отмечаем те пункты меню, для которых будет определен данный шаблон:

Привязка шаблона Joomla к различным разделам сайта. Для каждого раздела можно сделать свой шаблон

Позиции модулей в шаблоне Joomla 3

На уроке, посвященном модулям Joomla, мы говорили, что они выводятся на сайт в строго определенных позициях, так называемых позициях модулей. Для каждого конкретного шаблона количество и место расположения этих позиций различное.

Как узнать или где посмотреть позиции модулей в Joomla 3? Для этого в Joomla предусмотрен специальный предварительный просмотр, но по умолчанию он недоступен (выключен) и его необходимо включить в настройках.

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

Включаем возможность просмотра позиций модулей в Joomla 3.7

После этого снова переходим на страницу менеджера шаблонов – «Шаблоны: Стили (Site)» и жмем на иконку с изображением глаза расположенную чуть левее названия шаблона:

Для просмотра позиций модулей в Joomla 3 жмем на иконку с изображением глаза чуть левее имени шаблона

На открывшейся странице можно посмотреть все имеющиеся в шаблоне позиции модулей и место их расположении. В дальнейшем эта информация поможет для вывода в них определенных модулей.

Позиции модулей в шаблоне Protostar

Создание собственных позиций модулей

Просматривать уже существующие позиции модулей мы уже научились, но как быть, если в шаблоне нет именно той позиции, которая нам нужна? В этом случае можно создать собственную позицию для модулей в готовом шаблоне Joomla. Процесс не сложный, но требует редактирования определенных файлов шаблона – index.php и templateDetails.xml.

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

Переходим от слов к делу, для начала открываем файл templateDetails.xml, который находится в корневом каталоге шаблона. Вникать в его суть сейчас нет смысла, нас интересуют только позиции для модулей, они объявлены между строчками <position>имя-позиции-модуля</position> (строки 28-47 шаблона Protostar). По умолчанию их 18 штук:

Объявленные позиции модулей в файле templateDetails.xml

Для того чтобы объявить свою позицию модулей добавляем дополнительную строку (либо несколько строк) такого вида:

<position>my-module-position</position>  

Сохраняем файл, его можно закрыть, главное запомнить имя позиции, под которой вы его объявили.

Теперь открываем файл index.php и добавляем в него новый блок DIV, который будет являться контейнером для новой позиции модулей. Я для примера решил создать новую позицию для модулей в футере сайта. Пишем в футер следующий код:

div>   <jdoc:include type="modules" name="my-module-position" style="none" />  </div>  

Вот и все, позиция создана, можно зайти в раздел «Менеджер шаблонов» и проверить её наличие. Код индексного файла у меня получился таким:

Мы поменяли код индексного файла и создали новую позицию для модулей

Давайте разберем код, который отвечает за вывод модуля, он начинается со строки:

jdoc:include  

Далее надо указать тип подключаемого элемента, в нашем случае это модуль, так и пишем:

type="modules"  

Теперь необходимо указать имя позиции модуля, которое мы указали в файле templateDetails.xml:

name="my-module-position"  

За стиль кода модуля отвечает параметр style, который имеет несколько вариантов оформления, по умолчанию «none», в этом случае заголовок модуля не будет выводиться на страницах сайта.

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

<jdoc:include type="modules" name="my-module-position" style="none" />  

Вот таким образом можно создавать собственные позиции модулей абсолютно в любом шаблоне Joomla 3. Процесс как видите совершенно не сложный.

joom4all.ru

вам нужно читать ровно то, что написано.
то что вам stendapuss написал, касается правок в php-файлах,

Если вид поменять в php не надо лезть практически. Вид все меняется в CSS. Каждый делает по своему. Я копирую шаблон с другим именем и меняю. Правда там кое что сделать надо, чтоб кнопка наверх нормально была. Вот подробно http://www.mani-mani-net.ru/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%BE%D0%B5?start=22
Так же описание если несколько разделов с разными ключевыми словами. Как сделать каждому разделу свое название (ключевые слова) в шаблоне.
Этот метод мне больше нравится:
Можно изменять шаблон Joomla по другому. Копируем шаблон Joomla в папке с шаблонами, вставляем назад копию. Переименовываем, английскими буквами. Или просто ставим цифру. Открываем Notepad++ или другой редактор. Открываем окно-искать и заменить в файлах-показываем наш новый шаблон. Прописываем в графе найти Protostar, в графе заменить на ставим имя нашего нового шаблона.

После замены архивируем папку с измененным шаблоном. Далее идем панель управления-менеджер расширений-загрузить файл пакета-загружаем новый шаблон. Делаем ему настройки, как выше писал. В CSS меняем шаблон, каждый как хотим.

На другом изменяться не чего не будет.

Если несколько разделов на сайте удобно так сделать. Не забывайте модули можно прописать на определенных страницах расположение.

Меняем внешний вид сайта при помощи изменения шаблона.
Если делать через панель копию, что то цепляло от других шаблонов (не помню, но глюк был какой то)

В pxp добавлял еще <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <jdoc:include type="head" />

<?php
foreach ($this->_links as $key=>$item)
{
if ($item['relation'] == 'canonical')
{unset($this->_links[$key]);}
}
Но сейчас вроде нормально там, посмотреть надо.

joomlaforum.ru

1.Браузер с просмотром кода элементов

Для редактирования шаблона вам потребуется браузер с возможностью быстро просматривать элементы кода. Из таковых я рекомендую Google Chrome, который по мне, так является наилучшим.

2.Программа для редактирования файлов Joomla

Чтобы была возможность вносить изменения необходима соответствующая программа для редактирования. Здесь мой выбор остановился на Sublime Text 2 – Скачать Sublime Text 2. Данная программа отличается от подобных в первую очередь своим удобством и скоростью работы.

Я не рассматриваю возможность редактирования с административной панели, т.к. этот процесс сильно проигрывает перед тем же Sublime Text 2.

Пример Редактирования

Мы уже установили Chrome и запустили наш сайт.

Первым делом нужно определится, что мы хотим изменить. Допустим мы определились, и хотим заменить серый цвет левого меню. Наводим мышкой на область этого меню с серым цветом и жмем правую кнопку мыши, далее в появившемся контекстном окне жмем «Просмотр кода элемента»

Редактирование шаблона joomla

Теперь рассмотрим появившееся окошко:

Редактирование шаблона joomla

В левой части расположена вся HTML разметка текущей страницы (теги div, h1 и прочие). В правой части расположены стили CSS применяемые для выделенного класса тега.

Т.к. мы сразу выделили нужную нам часть то сразу можем заметить, где расположен CSS цвета нашего меню в окне:

Редактирование шаблона joomla

Подбираем необходимый цвет, кликнув по серому квадратику и копируем выбранный нами код: #DDE7FF.

Далее нам нужно узнать, где расположен данный фрагмент кода, для его замены. В этом нам подсказывает строчка в правой части окна стилей CSS: module.css:13 Которая означает, что данный стиль расположен на 13 строке файла modules.css

Редактирование шаблона joomla

Теперь открываем Sublime Text 2 и создаем новый проект: New Folder. Выпибаем папку с нашим сайтом и заходим в папку шаблона который изменяем. В нем мы и находим файлы css а именно файл module.css. Прокручиваем до строчки 13 и вставляем наш код #DDE7FF вместо #DDD. Сохраняем.

Редактирование шаблона joomla

Перезагружаем страницу сайта (F5) и видим новый цвет меню.

Редактирование шаблона joomla

Примечание: В том случае если у вас сайт уже в интернете то вам необходимо запускать данный файл(module.css) с помощью FTP, в качестве редактора выбрав Sublime Text 2

  • Назад
  • Вперёд

joomla-create.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.