Приветствую всех!
Сегодня решил написать, немного о том как оформить вывод новостей по примеру сайта dle9.com, а точнее огранка графических изображений(рисунков, картинок) новости материала и ещё всплывающая текстовая подсказка для тега TITLE.
Сразу скажу увидел подобный прием в шаблоне Allcensor Dle и применил у себя.
Оформить красиво сайт огранка (рисунков, картинок) новости материала и всплывающая текстовая подсказка для тега title
Итак, приступим.
Для огранки рисунка в публикации найти шаблон вывода короткой новости shortstory.tpl
Находим тег
{short-story}И за меняем
<div class="ssc">{short-story}</div>и полной новости fullstory.tpl
Находим тег
{full-story}И за меняем
<div class="ssc">{full-story}</div>Осталось добавить CSS код в стили файла шаблона например style.css
Добавляем :
.ssc img {padding:9px;margin:8px;border:1px solid #e0e8ec;border-radius: 4px;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-opacity:0.80;-khtml-opacity:0.80;opacity: 0.80;-moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);}Что бы убрать прозрачность картинки новости из кода выше нужно удалить следующий CSS код.
-moz-opacity:0.80;-khtml-opacity:0.80;opacity: 0.80;-moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);От пользователя Perewalka фиксированная картинка вывода в новости для всех графических изображений (так же и для с фотохостингах)
Добавляем только этот стиль вместо, представленного выше.
.ssc img {float:left; width:150px;/-/слева, шириной картинки 150pxpadding:9px;margin:10px 10px 10px 10px;border:1px solid #e0e8ec;border-radius: 4px;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-opacity:0.80;-khtml-opacity:0.80;opacity: 0.80;-moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);}Все на этом огранка картинки к новости закончена!
Для установки всплывающей текстовой подсказки tooltip к title картинки и ссылкам, закачиваем файл JS-скрипта к себе в шаблона в папку js/tooltip.js
И в main.tpl до тега
</head>добавляем следующий код :
<script type="text/javascript" src="/templates/Default/js/tooltip.js"></script>Осталось добавить CSS код в стили файла шаблона например style.css
Добавляем :
#tooltip1 {background:#e4f3fa;border:1px solid #1d668c; font-size:11px;color:#002a3f;padding:5px 10px;position:absolute;visibility:hidden;/*opacity: 0.9;*/z-index:100;}Если хотите, чтобы углы рамки были не острыми тогда добавляем следующий стиль.
#tooltip1 {background:#e4f3fa;border:1px solid #1d668c;font-size:11px;color:#002a3f;padding:5px 10px;border-radius: 4px;-moz-border-radius: 6px;-webkit-border-radius: 6px;position:absolute;visibility:hidden;/*opacity: 0.9;*/z-index:100;}Так же внутри архива находятся два файла tooltip.js первый сжатый с помощью одно из лучших онлайн сервиса для сжатия JS и CSS файлов в интернете который удалось найти Online YUI Compressor (может кому-нибудь тоже понадобиться для оптимизации JS и CSS кода своего блога) и второй не сжатый, который можно настраивать при желании.
Вот в принципе и все!
Предлагаем haki dle оформить красиво сайт огранка (рисунков, картинок) новости материала и всплывающая текстовая подсказка для тега title
