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

Раздел: DataLife Engine » Полезные статьи для DLE
Оформить красиво сайт
Приветствую всех!

Сегодня решил написать, немного о том как оформить вывод новостей по примеру сайта 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="{THEME}/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
  • 100
Рубрика: Все для DLE » Полезные статьи
Ранее » Браузеры Firefox и Opera в помощь верстании сайта« Далее Проверка HTML кода на валидность сайтов DLE
Добавление комментарияОставить комментарий
  • № :22
  • 7 июня 2014 16:29
Цитата: Светлана Ковалева
Прошу прощения! А где в статье ссылка для скачивания скрипта js/tooltip.js?

в конце нужно зарегистрироваться
  • № :21
  • 7 июня 2014 12:06
Прошу прощения! А где в статье ссылка для скачивания скрипта js/tooltip.js?
  • № :20
  • 13 июня 2012 08:00
pilot233,
Не должен грузить легкий скрипт, смотрите что у вас медленнее всего загружается и создает нагрузку в сам конце статьи ресурс для проверки сайта Бесплатные шаблоны дле исправляем ошибки оптимизация кода
  • № :19
  • 13 июня 2012 03:37
dle9,

А такой метод больше грузит сервак? Что-то у меня медленнее стали открываться страници
  • № :18
  • 5 июня 2012 14:05
m1996,
А зачем ...? по правилам валидности ссылки с target (лучше что были с описанием хотя бы таким) ...
В файле tooltip.js найти строчку и удалить...
  • № :17
  • 5 июня 2012 13:48
А как избавиться от этого "(откроется в новом окне)"?
  • № :16
  • 2 июня 2012 02:36
dle9,

СПАСИБО за ВСЕ!!!
  • № :15
  • 1 июня 2012 17:57
В полной также как и в короткой ...если установите код как выше в посте описано .
  • № :14
  • 1 июня 2012 17:36
dle9,

А в полной картинка останется нормального размера или тоже будет маленькой без возможности ее увеличения при нажатии на нее??

А еще вопрос вывод новостей в две равномерные колонки также с маленькими картинками слева
  • № :13
  • 1 июня 2012 15:31
dle9, я это же сказал только другими словами)
  • № :12
  • 1 июня 2012 09:33
можно добавить в данную статью:
расположение картинок
float:left; margin-right:7px; width:150px;
- располагает картинки слева , с правым отступом 7px , шириной 150px
display:block; margin:0 auto; 

- располагает картинки строго по центру без отступов
  • № :11
  • 1 июня 2012 06:52
pilot233,
Для фотохостингов
Оформление только с помощью CSS делать (увеличение из уменьшенной копии работать не будет) ниже Сообщение № :12 Perewalka

Или смотрите новость добавил код и для фотохостинга .
  • № :10
  • 1 июня 2012 03:09
dle9,

А если картинки не гружены на сервер а лежат на фотохостингах ???
  • № :9
  • 31 мая 2012 18:18
m1996,
Хм...
Title и так выводится без этого скрипта (только по умолчанию всегда в светло-желтой рамке) с текстом черного цвета . Не совсем хорошо смотрится. Если тайтел не выводится, значит есть проблемы какие-то с вашим шаблоном.
Данный же скрипт его перехватывает и оформляет, при этом при незначительном изменении CSS можно по разному оформить.
  • № :8
  • 31 мая 2012 17:07
Как я понял, скрипт заменят при загрузи страницы все такие title подсказки на tooltip1. Наверно другого способа нет) Ну эт хорошо что скрипт сам заменяет, а то были скрипты где самому надо было всё заменять)
  • № :7
  • 31 мая 2012 15:10
pilot233,
Расположение картинки для постоянного режима (скажем по умолчанию) в адмике Настройка системы >>Настройка работы изображения>>Размер уменьшенной копии загруженного изображения: (устанавливаем желаемый размер)
Расположение картинки по умолчанию
Настройка системы >>Настройки вывода новостей
>>>Выравнивание картинок по умолчанию
Тогда будет постоянно и для Ваших журналистов.

Если самим хотите управлять по желанию
Внимание ! Сначала устанавливаем размер в всплывающем окне загрузки (файлов и картинок) Размер уменьшенной копии картинки:, потом загружаем картинку. Ну, а там уже расположение снизу рядом выбираем, какое нужно в чекбосе с лева , в центре...расположение
  • № :6
  • 31 мая 2012 14:34
А как картинку сделать как у вас на сайте т.е размер и установить с лева???
  • № :5
  • 31 мая 2012 13:44
Perewalka,
m1996,
Всегда, пожалуйста... winked
  • № :4
  • 31 мая 2012 13:21
+++++++++++++++++++++++++++++++
Супер!) Я давно хотел такую подсказку!!)) Спасибо автору!)
  • № :3
  • 31 мая 2012 13:18
dle9,
спасибки
  • № :2
  • 31 мая 2012 12:48
Perewalka,
Что бы вместо руки выходило увеличительная лупа, нужно добавить ещё один класс
<div class="highslide">
{full-story}</div>


highslide данный класс от движка дле...в настройке не требуется
  • № :1
  • 31 мая 2012 12:21
а где и что поменять, чтоб при наведении на картинку была лупа с плюсиком (как у вас)