Изменяем текст в шапке сайта okis

Как изменить текст в шапке сайта okis

В шапке шаблонов окиса, вы можете прописать два вида текста. Заголовок h1.art-logo-name в котором можно прописать имя вашего сайта и дополнительный текст art-logo-text который отлично подходит для написания слогана компании или контактной информации. Редактировать эти тексты вы можете в админ панели сайта, на вкладке "Параметры сайта" заполнив поля "Ваши контакты" и "Слоган" соответственно.

А вот о том как изменить внешний вид и параметы отображения этих текстов я и хотел бы поговорить в сегодняшнем уроке. Изменять настройки отображения текста в шапке сайта okis, можно (и нужно) в редакторе css. Для этого к селектору элемента, необходимо прописать сответствующие свойства и значения. Вот несколько примеров:

1. Изменяем цвет текста в шапке сайта 

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

h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
color: #fff !important;
}

.art-logo-text, .art-logo-text a {
color: #fff !important;
} 

2. Изменяем размер текста 

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

h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
color: #fff !important;
font-size: 48px;
}

.art-logo-text, .art-logo-text a {
color: #fff !important;
font-size: 20px;

3. Изменить семейство шрифта 

За то какое семейство шрифта будет использоваться, отвечает свойство font-family

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

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier New
  5. Georgia
  6. Impact
  7. Times New Roman
  8. Trebuchet MS
  9. Verdana

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

h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
color: #fff !important;
font-size: 48px;
font-family: Impact, sans-serif;
}

.art-logo-text, .art-logo-text a {
color: #fff !important;
font-size: 20px;
font-family: Arial, Verdana, sans-serif;
}

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

  1. serif — шрифты с засечками (антиквенные), типа Times;
  2. sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  3. cursive — курсивные шрифты;
  4. fantasy — декоративные шрифты;
  5. monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).  

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

Кроме вышесказанного могу посоветовать интересное решение: Онлайн-генератор свойств текста, с помощью которого вы сможете визуально настроить внешний вид любого типа текста присутствующего на вашем сайте созданном на okis.ru 

Более подробно о свойствах текста можно почитать в справочнике css на сайте htmlbook.ru 

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