Оформить красиво сайт

Приветствую всех!

Сегодня решил написать, немного о том как оформить вывод новостей по примеру сайта 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

ogranka-i-tooltip.zip [22,74 Kb] (cкачиваний: 173)