Меню

Как изменит цвет шрифта joomla



Работа с шрифтами в Joomla

Дата публикации: 2016-10-20

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

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

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

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

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Если необходимо изменить шрифт контента, то мы можем сделать следующее. Откроем плагин FireBug для браузера Mozilla FireFox, или любой удобный для Вас инспектор кода, и выберем интересующий элемент сайта, в нашем случае это текст материалов.

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

Если опустить ползунок скролла на вкладке “Стиль” по ниже, мы найдем определение семейства шрифтов.

Источник

Как изменить шрифт в Joomla

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

Шрифт в Joomla

Как правило, макет содержит шрифт, стоящий первым в списке. Соответственно, проставить свой шрифт (к примеру, Ubuntu) можно, только поставив его название первым. Кроме того, указывая свой шрифт перед Arial, вы добьетесь вызова по умолчанию желаемого Ubuntu, а затем уже будет отображаться Arial, Verdana либо sans-serif.

Лучше, если проставлено несколько вариантов, чтобы не потерять пользователя изза такой досадной чепухи. Заходите в Расширения / Менеджер шаблонов / Свой шаблон / Редактировать CSS, вписывая нужный шрифт в строчку font-family: 1шрифт, 2шрифт и т.д.

Размер

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

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

Для создания файла CSS нужно воспользоваться текстовым блокнотом, чтобы получить следующую запись:

В этом файле CSS я отобразил шрифт на 160% больше от первоначального показателя. Желаемый размер выбирается с использованием пикселей (13px), пойнтов (13pt), но для удобства лучше применять форму записи в процентах (em), т.к. они подходят для всех браузеров. В дальнейшем, это поможет избежать проблем с отображением административной панели в предпросмотре разными браузерами.

Цвет шрифта

Цвет шрифта меняется аналогично размеру и типу шрифта. Единственно, в чем состоит разница, так это в выбранных параметрах. Цвет шрифта, равно как и фон сайта меняется внутри меню административной панели, в шаблоне JA_Purity. Находим в Расширениях/ Менеджее шаблонов / Своем шаблоне / Редактировать CSS и вписываем нужный цвет (например, blue) в параметр color (цвет фона – в параметре background #ffffff):

Читайте также:  Как украсить веранду искусственными цветами

Требуемый цвет шрифта готов!

Стили CSS

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

Отображение классов CSS, ответственных за оформление пунктов меню имеет следующий вид:

Источник

Шрифты в Joomla

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

Но есть какие-то проблемы, с которыми, в общем-то, принято мириться. Либо их решение производится за счёт знания языка html. Но и эти решения, к сожалению, грешат недостатками, создавая определённые неудобства. В данном конкретном случае речь идёт о возможности изменения шрифта текста на сайтах, работающих под управлением системы Joomla. Существуют разные способы задания внешнего вида отображения текста:

  • Вручную при редактировании статьи.
  • Через каскадные таблицы стилей (CSS).
  • Преобразование текста в картинку специальными скриптами.
  • Установив наш плагин niceText.

Остановимся вкратце на каждом из этих способов.

Изменение шрифтов в Joomla вручную в статьях

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

Задание шрифтов через CSS

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

Понять даже умудренному опытом специалисту в этом нагромождении где и что менять не очень легко. Конечно, существуют методы и средства, встроенные в современные браузеры (например, Firebug в Mozilla FireFox ), которые облегчают поставленную задачу. Но и в этом случае необходимы также высокая квалификация и продолжительный опыт работы с шаблонами Joomla.

А теперь о главном. Перечисленные выше способы НЕ РАБОТАЮТ в тех случаях, когда на компьютере посетителя сайта отсутствуют указанные при создании страниц шрифты. Также, многим, пересевшим на альтернативные операционные системы (например, Linux), не нравится отсутствие сглаживания текста. Мало того, если web-дизайнер применит теги типа FONT с указанием шрифта отсутствующего на компютере клиента, то страницы могут вообще отображаться «кракозябрами».

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

Изменение внешнего вида текста через преобразование в картинки

Метод, в общем-то, неплох и даже в чём-то, по своему, хорош. Но вот только поисковые машины пока не научились преобразовывать изображение в текст. То есть для них картинка это бессмысленный набор информации. Такие сайты не то что плохо индексируются, они вообще не воспринимаются поисковиками. Поэтому если первые два метода ещё можно применять, то этот не подходит совершенно. К тому же, встроить картинку в картинку даже в ручном режиме непросто, а уж в автоматическом вообще этого никто не делает.

Потому что есть надёжный, простой и элегантный способ.

Плагин для изменения шрифтов в Joomla

Мы в начале статьи писали об удобствах. Плагин niceText олицетворяет в данном случае квинтэссенцию понятия об удобстве. После установки и активации этой «удобняшки» вы сразу можете задать шрифт для пяти групп элементов. Например, можно задать шрифт отдельно для текста в тэгах h1, h2, p, b, li. Проблемы, как правило, присутствуют при задании специального шрифта для заголовков, но не в случае с плагином niceText.

Читайте также:  Что надо весной для роста цветов

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

Согласитесь, управлять шрифтами в Joomla с нашим плагином легко и эффективно.

Источник

Редактируем шаблон Joomla 3 — оформляем контент

Сегодня мы в очередной раз поговорим о редактировании стандартного шаблона Joomla. В предыдущих уроках мы говорили о том, как работать с кодом страницы и файлами стилей, а так же создали шапку для нашего сайта. Сегодня разберем не менее важный вопрос – как оформить контентную часть страницы (заголовки, параграфы, изображения). Кроме того научимся работать со шрифтами и подберем красивый шрифт для нашего сайта.

Оформление изображений на сайте

Для начала давайте разберемся с изображениями на сайте и начнем с изображения полного текста материала.

По умолчанию изображение полного текста материала можно выводить по левому либо по правому краю, а как быть, если появилось желание разместить его строго по центру? Для этого придётся написать собственные CSS стили для оформления изображения.

Тут нет ничего сложного, находим блок, в котором у нас находится изображение, определяем примененные к нему классы и пишем необходимые стили. В шаблоне Protostar изображение полного текста материала находится в блоке

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

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

Оформление миниатюр изображений

Следующим шагом необходимо оформить миниатюры изображений, которые создаются плагином mAvik Thumbnails (если вы его используете, а если нет, то очень рекомендую). Если честно проблем с ним практически не возникает, но почему то именно в шаблоне Protostar есть особенности вывода миниатюр изображений на мобильных устройствах – они вылезают за пределы области контента. Дабы избавиться от подобной проблемы применим к ним следующие стили:

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

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

Медиа-запрос @media (max-width: 420px) указывает, что вложенные в него стили будут применимы только для устройств с шириной экрана 420 пикселей и менее.

В итоге мы получим вот такой результат:

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

Оформление текста

Основная составляющая любого сайта помимо всего прочего это текст и изображения, с изображениями разобрались, теперь займемся оформлением текста на сайте.

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

Красивый шрифт для сайта

Для изменения шрифта на сайте служит определенное CSS свойство:

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

Такой подход по-своему хорош, но можно пойти и другим путем – загружать шрифты с онлайн сервисов (CDN-хостинга). В этом случае можно быть уверенным, что указанный шрифт будет работать на любом компьютере. Все что необходимо сделать, это подключить понравившийся Вам шрифт и использовать его по своему усмотрению, но тут стоит быть осторожным и не загружать слишком много шрифтов, это может повлиять на скорость загрузки страницы.

Один из таких онлайн сервисов с бесплатными шрифтами это Google Web Fonts. Сервис со шрифтами от Гугла хорош тем, что вы можете наглядно посмотреть на имеющиеся шрифты, выбрать понравившиеся и подгрузить их на свой сайт. Все проще простого, переходим на страницу Google Web Fonts и ищем шрифт, который нам понравится:

На странице Google Web Fonts можно настроить отображение имеющихся шрифтов по своему усмотрению, например, выбрать только русские шрифты, семейство шрифтов и т.д. Кроме того можно посмотреть как будет выглядеть шрифт применив к нему различные стили такие как размер, начертание и прочее.

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

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

Файл index.php должен получиться примерно следующего вида:

Вторую строку вставляем в файл стилей, либо для всего документа (страницы), либо для каждого элемента по отдельности (заголовок, параграф, список и т.д.). Я, например, выбрал сразу три шрифта Alice, Lobster (рукописный шрифт) и Open Sans и применил их к разным элементам.

Изначально для всего текста я выбрал шрифт Alice и прописал его следующим образом:

Затем отдельно для заголовков применил другие шрифты:

Стили в файле CSS можно размещать где угодно по вашему усмотрению, если необходимо указать на приоритет того или иного стиля тогда необходимо дописать параметр «!important» до символа «;».

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

Другие свойства текста

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

Для начала увеличим размер текста до 16 пикселей для параграфов, и списков. Для этого напишем следующее:

Обратите внимание что стили к спискам будут применены не ко всем, а только к тем которые находятся в области контента (.item-page), это сделано для того чтобы указанные стили не были применены к меню на сайте, и хлебным крошкам которые в свою очередь построены на базе списка.

Теперь добавим параграфам и спискам отступы снизу и сделаем выравнивание текста по ширине страницы:

Переходим к ссылкам, по умолчанию они выделены, синим цветом, а при наведении становятся подчеркнутыми. Избавимся от стереотипов и сделаем наши ссылки другого цвета, а при наведении вместо подчеркивания сделаем их более жирными:

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

В результате код файла стилей у меня получился следующим:

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

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

Источник