Первісне відображення related-news виглядає приблизно так:
Не дуже привабливо, чи не так? Що приверне увагу користувача? Звичайно ж, картинки!
Крок №1: знайдіть файл шаблону relatednews.tpl
Спочатку цей файл містить такий код:
Необхідно цей код замінити на наступний:
[Xfvalue_img1] - це код додаткового поля, через який я виводжу першу картинку статті (експериментую з альтом і мікророзмітки). Якщо ви не виводьте першу картинку статті через доп.поле, то замість [xfvalue_img1] вставте.
- тайтл картинки (заголовок), який додається в альт (опис картинки для пошукових систем).
Крок №2: редагуємо файл стилів.
У будь-якому місці файлу вставляємо код класу.
.relatednews - назва класу.
display: inline-block; - Значення inline-block генерує блоковий елемент, з поведінкою сатиричного елемента (ще цей параметр може бути корисний для виправлення помилок відображення в безглуздому браузері IE).
width: - ширина вашої картинки.
height: - висота картинки.
Цього достатньо для виведення картинки по-горизонталі.
Для краси додаємо рамочку.
padding. - величина поля в пікселях. Чим більше цей параметр, тим товщі рамочка.
border-radius. - округлення куточків. (-webkit-border-radius: - для кросбраузерності)
box-shadow. - тінь рамочки. (-moz-box-shadow: - для кросбраузерності)
От і все! Грайте з цифрами параметрів і підлаштовувати під свій сайт.
В Internet Explorer відображається точно так же!
Всім дякую за увагу!
PS: не забудьте почистити кеш в адмінпанелі!