Настройка внешнего вида информеров

Материал из Wiki.readme.ru

Перейти к: навигация, поиск

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

Наиболее удобно выбирать название в стиле "подвал рубрики Вокруг света", когда оно соответствует месту на сайте, где планируется установить информер.

Вид информера определяет тип кода, который будет установлен на сайте. По умолчанию мы предлагаем HTML-информеры, они реализуются с помощью обычного тега iframe и подходят для большинства случаев. Альтернативный вариант - Javascript, его код состоит из двух частей: div - ставится в том месте сайта, где должен отображаться информер, а script можно располагать где угодно ниже (обычно либо сразу за первой частью, либо в подвале сайта).

Основные преимущества HTML-информеров:

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

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

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

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

Селектор Показывать заголовок позволяет выбрать - отображать заголовок (Да), или не показывать (Нет).

Расположение заголовка относительно картинки определяет, что будет идти выше. Если требуется, чтобы картинка была левее, а заголовок справа, то расположение заголовка следует выставить "после картинки", а в стилях самой картинки выбрать "расположение относительно текста" left. Если заголовок должен быть левее, то наоборот расположение заголовка - "перед картинкой", а "расположение относительно текста" - right.

В графе "Уровень фильтрации новостей" настраивается содержимое новостей по их содержанию. Можно выбрать один из существующих уровней фильтрации:

Все разрешено - показывать все новости;
Мягкий уровень - не показывать новости содержание обнаженную натуру, а так же новости сайтов, перейдя на которые можно обнаружить материалы для взрослых;
Средний уровень - мягкий уровень + не показывать новости содержащие: изображения трупов людей, животных; анимированные картинки;
Жесткий уровень - средний уровень + не показывать новости содержащие: изображения жестокости/избиения/насилие/травмы людей животных; желтые/бульварные новости;
Ручная настройка - запретить к показу новости помеченные выбранными метками.


В графе Перезагружать информер каждые ... секунд вы можете настроить, как часто информер будет перегружаться на странице. Значение 0 означает, что информер не будет перегружаться.

Размер картинки

В данном пункте настроек можно выбрать только квадрат - либо предустановленные значения от 45х45 до 500х500 px, либо указать свое значение стороны квадрата. Нам кажется, что лучше ставить не менее, чем 90 px. Предусмотрена возможность делать и прямоугольные картинки в информерах. Такие изменения можно внести в пункте настроек картинка. Картинка делается прямоугольной за счет обрезания квадрата по краям до нужных значений.

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

Параметр "Длина заголовка и описания" устанавливает ограничение по количеству символов в заголовке новости или в кратком анонсе. Эта функция позволяет не допустить перекос верстки, если размеры информера выбраны впритык и не рассчитаны на слишком длинные тексты заголовка/анонса.

В пункте "Расположение" можно выбрать способ визуализации информера, который наиболее подходит вашему сайту. Информеры могут быть в виде таблицы, расположенные списком и самодельные.

Информеры табличного типа выводятся с помощью тега table и выглядят на сайте как прямоугольная таблица. Количество столбцов и строк не ограничено, для стандартных горизонтальных или вертикальных информеров следует использовать именно этот способ (указывая число строк или столбцов равное единице).

Информер, расположенный списком визуально выглядит как полностью текстовый информер, а с точки зрения html это ненумерованный список (ul). В нем содержаться только текстовые новости без картинок. Каждая новость публикуется с новой строки и может состоять из заголовка и краткого анонса или только из заголовка.

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

В графе “header” можно прописать заголовок для информера. Например, в коде

<a href="http://readme.ru" class="header">ReadMe.ru</a>

указан заголовок всего информера ReadMe.ru.
В графе “footer” может быть прописан код для вывода информации после всего информера. Это может быть и текст, и разделительная линия и прочие детали дизайна.
В графе “line_before” можно прописать код для вывода перед каждой новостью.
В графе “line_after” прописывается код для вывода после каждой новости.
Обращаем ваше внимание, что при выборе самодельного информера, во все поля нужно будет вносить html-теги для формирования верстки самого информера. К примеру, если вы делаете самодельный информер при помощи немаркированного списка, у вас должно быть написано в:
  • header: < ul >
  • footer: < /ul >
  • line_before: < li >
  • line_after: < /li >

CSS - стили

  • Цвет при редактировании информера указывается в шестнадцатеричном формате.

Если вы не нашли необходимого оттенка в выпадающей палитре, вы можете подобрать необходимый цвет в графическом редакторе и вставить индекс цвета в информер. Например: #40B8F5.

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

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


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

  • solid - сплошная линия,
  • dotted - точками,
  • dashed - пунктир.


Ячейки таблицы.

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

При указании значения в графе “отступ содержимого” можно регулировать расстояние от границы ячейки до ее содержимого. При изменении значения, сдвиг происходит и по горизонтали и по вертикали. Указывается в пикселях (px).

Цвет фона позволяет выбрать цвет фона ячеек.

Расположение содержимого: определяет выравнивание содержимого в ячейке. По горизонтали:

  • center - по центру;
  • left - по левому краю;
  • right - по правому краю;

По вертикали:

  • top - по верхнему краю;
  • middle - посередине;
  • bottom - по нижнему краю.


Настройка дизайна границы ячейки идентична настройкам границ всего информера.

Заголовок.

Отступ содержимого позволяет указывать отступ заголовка новости от границ ячеек в пикселях (px).

В заголовках можно менять стиль шрифта и его размер, выделение (normal; bold - полужирный шрифт), подчеркивание (none - без подчеркивания; underline - нижнее подчеркивание).

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

Картинка.

Изменив параметр “отступ содержимого” - вы измените расстояние картинки от границ ячейки. Указывается в пикселях (px).

Можно выбрать расположение картинки относительно текста:

  • none - по центру;
  • left - по левому краю;
  • right - по правому краю.

При выборе расположения картинки right и left текст будет обтекать картинку, если не стоит ограничение заголовка и текста в количестве символов.

Чтобы привлечь внимание пользователя к картинке, вы можете отредактировать ее границу. Можно изменять стиль, толщину и цвет линии границы.


Текст.

В данной графе настроек информера определяются параметры публикации краткого анонса новости.

Отступ содержимого определяет расстояние от границ ячеек в пикселях (px).

В тексте можно менять стиль шрифта и его размер, выделение (normal; bold - полужирный шрифт), подчеркивание (none - без подчеркивания; underline - нижнее подчеркивание).

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

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

Редактирование вручную.

1. Как увеличить расстояние от картинки до текста по горизонтали и вертикали?

В коде информера прописываете в div.rdm_img_"номер информера" img отступ: margin-right: расстояние в пикселях (px), если картинка слева, если справа - margin-left: расстояние в пикселях (px)

2. Как увеличить или уменьшить межстрочные расстояния в заголовках?

Для заголовка изменение межстрочного интервала производится в коде: div.rdm_title_"номер информера" строкой: line-height в процентном соотношении. Например, 85% {line-height: 85%}.

3. Как увеличить или уменьшить межстрочные расстояния в анонсах?

Для текста новости изменение межстрочного интервала производится в коде: div.rdm_text_"номер информера" строкой: line-height в процентном соотношении. Например, 85% {line-height:85%;}.