Четверг, 01 Май 2014 10:22

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

Всем привет!!! Сегодня будим редактировать шаблон joomla 3, внося изменения в файле CSS. А поможет нам браузер Mozilla Firefox и его замечательное дополнение Firebug. C ним мы легко настроим внешний вид шаблона joomla 3.  

Часто бывает что в шаблоне что-то не устраивает. Например цвет какого либо элемента, его величина, размер шрифта и.т.д. А в настройках шаблона как на зло, нельзя внести изменения. Расстраиваться не стоит, можно подредактировать код в файле CSS.

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

Всё это очень просто сделать с помощью браузера Mozilla Firefox, и установленного в него дополнения Firebug.

Установка Firebug в Mozilla Firefox

Откройте браузер Mozilla не ниже 3 версии и пройдите на официальный сайт Firebug. Там увидите вот такой оранжевый значок "Установить Firebug", кликните по нему. Вас перебросит на "mozilla.org".

Установка Firebug

Перейдя на "mozilla.org", нажмите "Добавить в Firefox". Firebug

В открывшемся окне нажать "установить", после установки перезапустите браузер. Firebug готов к работе!

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

Теперь в браузере мазила необходимо открыть страницу вашего сайта, с элементом который хотите редактировать. Я покажу вам на примере тестового сайта под управлением joomla 3 установленного на денвер. А корректировать буду блок главного меню.

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

В низу откроется панель Firebug, выглядит она так. (Для того чтобы увеличить изображение, кликните по нему).

Чтобы найти код интересующего нас элемента, в верхнем левом углу панели, нажмите на иконку "выделения объекта". 

Далее наведите курсор на объект который хотите редактировать, и кликните по нему левой кнопкой мыши. У меня это блок "главного меню". 

После его выделения, в правой части панели выводится код отвечающий за этот блок. 

Сейчас я буду изменять этот код прямо в панели Firebug, и выводить скриншоты с обновлённым блоком. Баловаться можно сколько угодно, после обновления страницы всё вернётся обратно. Добившись необходимых результатов, нужно будет вносить изменения в файл CSS. В конце статьи покажу как.

1. background-color#F5F5F5; эта строка отвечает за цвет фона. Меняем на бирюзовый  background-color: #00FFFF; 

2. border: 1px solid #E3E3E3; эта строка отвечает за границы блока. Поставим вместо одного пять пикселей и изменим цвет на коричневый border: 5px solid #800000;

3. border-radius: 4px; здесь указан радиус, закругление по углам. Ставим 24 вместо 4 border-radius: 24px; 

Таким вот образом можно редактировать шаблон joomla 3, настраивая его внешний вид. Меняется практически всё на сайте: цвета, шрифты, размеры и.т.д.

Как изменить CSS шаблона joomla 3
Потренировавшись в панели и добившись нужных результатов, необходимо внести изменения в файл CSS. Здесь всё тоже достаточно просто.

Наведите курсор мыши на заголовок с названием файла CSS, рядом в скобочках виден номер строки с кодом, в моём случае "строка 2116". Перед вами откроется путь к файлу CSS. 

1. Пройти по пути "sajtnajoomla.ru/templates/protostar/css/template.css"

2. Открыть файл "template.css", блокнотом Notepad++.

3. Найти 2116 строку, и отредактировать CSS код шаблона joomla 3.

Не забудьте предварительно сделать копию CSS файла, который будете редактировать! На этом всё, возникнут вопросы, задавайте в комментариях.

Комментарии  

Алексей
#17 Алексей 23.09.2016 11:49
Ребят подскажите пожалуйста как открыть файл css в блокноте!
Цитировать
Nik
#16 Nik 26.04.2016 09:23
Привет! хочу изменить размер пункта меню. В фаербаге все нормально меняется через квадратики padding и margin.
А вот как найти файл html или css где это изменить? я конечно прочитал статью. И у тебя все отично написано. Только именно для квадратиков и для
element.style {
padding-bottom: 5px;
height: 36px;
}
не написана ни строка ни файл
.
Спасибо заранее
Цитировать
Руслан
#15 Руслан 16.06.2015 11:18
Если файл .css создается как временный и храниться в папке cache как найти где именно его нужно править? спасибо
Цитировать
Руслан
#14 Руслан 16.06.2015 11:17
Если файл .css создается как временный как найти где править его ? спасибо
Цитировать
Prauler
#13 Prauler 31.05.2015 13:10
C этими шаблонами все просто, а вот попробуйте в шаблоне TZ Plazart Blank от TemPlaza найти где регулируется высота плашки меню и отступы в нем... не могу найти ни с firebug ни другими утилитами
Цитировать
Андрей
#12 Андрей 29.03.2015 09:00
Иван посмотрите в настройках шаблона, так-же можно скачать сторонний шаблон.
Цитировать
Иван
#11 Иван 28.03.2015 09:40
Забыл! Кэш я чистил.
Цитировать
Иван
#10 Иван 28.03.2015 09:39
Андрей, можно я Вас еще попытаю?
Я пытаюсь поменять цвет активного пункта меню в шаблоне Protostar. При его выборе в правом окошке файрбага возникает очень много записей, причем часто записи, относящиеся к цвету, перечеркнуты. Как я понимаю, это значит, что данную запись при компиляции странички перекрыла настройка из какого-то другого файла или места. Единственная запись, которая, как я нашел, меняет цвет кнопки, оказалась в месте, описанном как /joomla/ #2 (строка 72). Путь к нему - http://127.0.0.1/joomla/, т.е. это как бы и не файл вовсе! Что и как ту можно поправить?
Нашел похожую запись в файле template.css в папке protostar, но там замена ни на что не влияет.
Цитировать
Иван
#9 Иван 26.03.2015 18:40
Еще одно ОГРОМЕННОЕ спасибо!!! Поразительно, до чего неочевидно организованы в Джумле и компонентах некоторые простые вещи.
Хорошо, что нашелся человек, которому не зазорно ответить на "идиотские" вопросы.
Цитировать
Андрей
#8 Андрей 26.03.2015 04:05
Иван зайдите в сам материал к2 далее"Опции отображения материала" отключайте там всё не нужное, так же в категории, настройте как надо хоть один материал, после копируйте его, к скопированному материалу будут применятся те-же настройки.
Цитировать
Иван
#7 Иван 25.03.2015 19:41
К2 параметры есть. Вот только в нем для материалов есть лишь разделы "Макет и отображение страниц пользователя (автора)", "Опции макета и просмотра для вывода материалов по тегу" и "Макет и опции отображения для страниц поиска, Тег & Дата списков". А для страницы самого материала никаких настроек почему-то нет, в том числе и в других разделах параметров. Отсюда и вопрос.
Цитировать
Андрей
#6 Андрей 25.03.2015 05:22
Иван настройки должны быть "К2 параметры", всё должно отключаться.
Цитировать
Иван
#5 Иван 24.03.2015 19:37
Спасибо, всё получилось. :-)
А как можно отрезать лишние данные? Дело в том, что компонент К2, который у меня стоит, добавляет в конец материала всякую ерунду типа тегов, списка публикаций автора и т. д. и нет настроек, как все это не выводить. Может есть какой-то рецепт "обрезания"?
Цитировать
Андрей
#4 Андрей 23.03.2015 13:18
Добрый день Иван, Вы всё правильно сделали, файл необходимо редактировать по этому пути в папке с joomla, если изменения не происходят, очистите кеш браузера.
Цитировать
Иван
#3 Иван 21.03.2015 18:35
А как открыть файл ноутпадом?
У меня получается адрес http://127.0.0.1/joomla/components/com_k2/css/k2.css
Если его ввести в браузер - текст нельзя редактировать. Если ввести в проводник, чтобы выйти на файл, он опять же открывается в браузере.
Нашел такой же файл в папке, куда установлена джумла, но если там что-то менять, это не оказывает никакого влияния на страничку.
Цитировать
Александр В
#2 Александр В 06.03.2015 14:41
Благодарю за дельные советы, а также за объяснение по использованию Firebug для поска и верстки кода страницы
Цитировать
Александр
#1 Александр 23.02.2015 16:22
Скажите пожалуйста, а как найти в каком файле изменить заголовок статьи в h2 на h1 ?? Чтобы сразу на всех страницах сайта поменялись.
Не могу понять, как путь посмотреть с помощью Firebug.
Например в каком файле надо заменить h2, чтобы этот заголовок "Обустройство лоджии", на этой странице _http://www.myotdelka.ru/master-klass/obustrojstvo-lodzhii.html
был в h1 и во всех остальных статьях сразу заменились.
Заранее благодарен.
Цитировать

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


Защитный код
Обновить