От автора: приветствую Вас дорогой друг. Текстовая информация, публикуемая на страницах сайта, должна легко восприниматься пользователями, то есть быть легко читаемой, и немаловажную роль в этом играет шрифт Joomla 3, который используется в конкретном шаблоне, для отображения информации на экран. Поэтому в данной статье мы с Вами поговорим о том как осуществляется работа с шрифтами в Joomla.
Как было сказано выше, шрифты используемые на сайте, играют очень важную роль в восприятии посетителем, как определенной текстовой информации, так и всего сайта в целом. Так как хорошо подобранный шрифт, с одной стороны обеспечит легкость чтения материалов и статей, и с другой стороны, поможет выделить некоторые важные блоки или элементы страницы.
Шрифт, как и дизайн страницы, формируется шаблоном, то есть в стилях шаблона, как правило, указано кокой шрифт и какого размера используется для определенного блока или группы блоков. Соответственно, если Вас интересует вопрос, как изменить шрифт в joomla? Ответ достаточно прост, необходимо открыть используемый файл стилей, найти селектор элемента, шрифт которого необходимо изменить и отредактировать правила CSS, или добавить недостающие.
Предположим, что у нас есть вот такой сайт, дизайн которого формирует стандартный шаблон Beez3.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееЕсли необходимо изменить шрифт контента, то мы можем сделать следующее. Откроем плагин FireBug для браузера Mozilla FireFox, или любой удобный для Вас инспектор кода, и выберем интересующий элемент сайта, в нашем случае это текст материалов.
При этом плагин показывает, какие правила CSS, применены к элементу, а так же в каком файле они описаны. Данная информация особенно полезна, если Вы не знаете как устроен конкретный шаблон, или же если для определенного шаблона используется множество файлов со стилями, как в случае с стандартным шаблоном Beez3.
Если опустить ползунок скролла на вкладке “Стиль” по ниже, мы найдем определение семейства шрифтов.
Теперь мы знаем, где описаны интересующие стили, а значит, мы можем их отредактировать. Поэтому открываем файл layout.css, который располагается в папке активного шаблона по адресу \templates\beez3\css. И для начала определим семейство шрифтов (строка 13).
| 1 2 3 | body#shadow { font-family: Curier,sans-serif } |
Затем изменим размер шрифта (строка 56).
| 1 2 3 4 5 | body p,body ol,body ul,body dl,body address { margin-bottom: 1.5em; font-size: 1.3em; line-height: 1.8em; }} |
Сохранив изменения, мы увидим следующий результат в браузере.
Помимо этого, очень часто начинающие веб-мастера задаются вопросом, как изменить цвет шрифта на сайте джумла. Опять же, изначально цвет шрифта определен и его просто нужно отредактировать. По структуре шаблона Beez3, содержимое страницы содержится в блоке div с идентификатором #all, а значит для выбранного текста давайте найдем при помощи FireBug, стили прописанные для вышеуказанного блока.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееКак Вы видите цвет, определен совсем в другом файле – personal.css на строке 38. Опять же давайте откроем данный файл и изменим CSS правила.
| 1 2 3 4 | #all { background: #FFFFFF; color: #4565b8; } |
При этом мы увидим следующий результат.
Как Вы видите, цвет шрифта успешно изменен. Так же хотел бы отметить, что довольно часто, необходимо использовать нестандартный шрифт для оформления конкретной страницы, а значит, давайте поговорим о том, как добавить шрифт в Joomla 3.
Для начала, скачаем необходимый шрифт в формате .ttf. Для примера я скачал шрифт Argentine Bold на сайте 7fonts. Далее, распакуем полученный архив и перейдем на сайт font2web, где при помощи поля загрузки файлов, выберем только что скачанный шрифт и нажмем кнопку “Convert&Download”. Тем самым мы получим готовый архив, в котором содержится каталог fonts, со скачанным шрифтом, а так же файл стилей, с примером подключения нового шрифта.
Поэтому, каталог fonts, скопируем в корень папки активного шаблона. Далее переименуем имена файлов в данном каталоге, на более простые, к примеру Argentine-Bold.ttf, то есть уберем префикс 7fonts.ru, и открываем в текстовом редакторе файл стилей fonts.css.
| 1 2 3 4 5 6 7 8 | /** Generated by FG **/ @font-face { font-family: 'Conv_7fonts.ru_Argentine-Bold'; src: url('fonts/7fonts.ru_Argentine-Bold.eot'); src: local('☺'), url('fonts/7fonts.ru_Argentine-Bold.woff') format('woff'), url('fonts/7fonts.ru_Argentine-Bold.ttf') format('truetype'), url('fonts/7fonts.ru_Argentine-Bold.svg') format('svg'); font-weight: normal; font-style: normal; } |
Данные правила немного подкорректируем, а именно укажем новые имена файлов, и правильно пропишем путь к ним, с учетом того, что данные правила будут добавлены в файл layouts.css, который располагается в каталоге css.
| 1 2 3 4 5 6 7 | @font-face { font-family: 'Argentine-Bold'; src: url('../fonts/Argentine-Bold.eot'); src: local('☺'), url('../fonts/Argentine-Bold.woff') format('woff'), url('../fonts/Argentine-Bold.ttf') format('truetype'), url('../fonts/Argentine-Bold.svg') format('svg'); font-weight: normal; font-style: normal; } |
Теперь добавим правила в самый конец файла layouts.css, и используем новый шрифт для написания текста материалов.
| 1 2 3 | body#shadow { font-family: Argentine-Bold, sans-serif } |
После сохранения мы увидим следующий результат в браузере.
Теперь Вы знаете, применительно к CMS Joomla 3 как изменить шрифт. Если Вы желаете узнать, как устроены шаблоны данной CMS и хотите научиться на профессиональном уровне создавать собственные, Вам будет полезен наш курс Joomla-Мастер. С нуля до премиум шаблона. На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнее
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
Спасибо за полезный урок! Шрифты должны быть в меру яркими, выразительными. Мне понравилось сочетание темно-синего с желто-салатовым на сайте boosters.com.ua Многие веб-мастера, увы, не обращают на шрифты должного внимания, а стоило бы. Всё-таки грамотно подобранные шрифты и их цвета улучшают читабельность и восприятие текстов, а следовательно — привлекательность сайта для посетителей.