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


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

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

Комментарии 22

dle9.com от 7 июня 2014 16:29
Цитата: Светлана Ковалева
Прошу прощения! А где в статье ссылка для скачивания скрипта js/tooltip.js?

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

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

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

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

А еще вопрос вывод новостей в две равномерные колонки также с маленькими картинками слева
m1996 от 1 июня 2012 15:31
dle9, я это же сказал только другими словами)
Добавить комментарий

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent