Часто бывает что в шаблоне что-то не устраивает. Например цвет какого либо элемента, его величина, размер шрифта и.т.д. А в настройках шаблона как на зло, нельзя внести изменения. Расстраиваться не стоит, можно подредактировать код в файле CSS.
Сейчас я выберу определённый элемент на сайте, найду и отредактирую код файла CSS отвечающий за этот элемент, тем самым изменю его внешний вид.
Всё это очень просто сделать с помощью браузера Mozilla Firefox, и установленного в него дополнения Firebug.
Установка Firebug в Mozilla Firefox
Откройте браузер Mozilla не ниже 3 версии и пройдите на официальный сайт Firebug. Там увидите вот такой оранжевый значок "Установить Firebug", кликните по нему. Вас перебросит на "mozilla.org".
Перейдя на "mozilla.org", нажмите "Добавить в Firefox".
В открывшемся окне нажать "установить", после установки перезапустите браузер. 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 файла, который будете редактировать! На этом всё, возникнут вопросы, задавайте в комментариях.
Комментарии
А вот как найти файл html или css где это изменить? я конечно прочитал статью. И у тебя все отично написано. Только именно для квадратиков и для
element.style {
padding-bottom: 5px;
height: 36px;
}
не написана ни строка ни файл
.
Спасибо заранее
Я пытаюсь поменять цвет активного пункта меню в шаблоне Protostar. При его выборе в правом окошке файрбага возникает очень много записей, причем часто записи, относящиеся к цвету, перечеркнуты. Как я понимаю, это значит, что данную запись при компиляции странички перекрыла настройка из какого-то другого файла или места. Единственная запись, которая, как я нашел, меняет цвет кнопки, оказалась в месте, описанном как /joomla/ #2 (строка 72). Путь к нему - http://127.0.0.1/joomla/, т.е. это как бы и не файл вовсе! Что и как ту можно поправить?
Нашел похожую запись в файле template.css в папке protostar, но там замена ни на что не влияет.
Хорошо, что нашелся человек, которому не зазорно ответить на "идиотские" вопросы.
А как можно отрезать лишние данные? Дело в том, что компонент К2, который у меня стоит, добавляет в конец материала всякую ерунду типа тегов, списка публикаций автора и т. д. и нет настроек, как все это не выводить. Может есть какой-то рецепт "обрезания"?
У меня получается адрес http://127.0.0.1/joomla/components/com_k2/css/k2.css
Если его ввести в браузер - текст нельзя редактировать. Если ввести в проводник, чтобы выйти на файл, он опять же открывается в браузере.
Нашел такой же файл в папке, куда установлена джумла, но если там что-то менять, это не оказывает никакого влияния на страничку.
Не могу понять, как путь посмотреть с помощью Firebug.
Например в каком файле надо заменить h2, чтобы этот заголовок "Обустройство лоджии", на этой странице _http://www.myotdelka.ru/master-klass/obustrojstvo-lodzhii.html
был в h1 и во всех остальных статьях сразу заменились.
Заранее благодарен.