Tricks: Красивый вывод даты новости

vitaly · 2008-10-31 22:21:43

Некоторые из вас задаются вопросом - как сделать красивое отображение дат в новостях?
Специально для решения подобной задачи был создан плагин varmgr - при его активизации у вас появляются дополнительные переменные для отображения даты.

В этой теме буду размещать различные варианты:

Как это выглядит

Вариант №1

Как это делается

Вариант №1
Для вывода нам потребуется картинка:

И HTML код:

<html>
<head>
<!-- Стили отображения -->
<style type="text/css">
.contentdate {
background:#FFFFFF url(calendar.gif) repeat scroll 0%;
float:left;
height:50px;
margin:0px;
padding:0px;
width:45px;

color:#333333;
font-family:Verdana,Helvetica,Sans-Serif;
font-size:12px;
}

.contentdate h3 {
color:#FFFFFF;
font-size:10px;
font-weight:normal;
margin:0px;
padding:4px 0px 0px 11px;
text-transform:uppercase;
}

.contentdate h4 {
color:#999999;
font-family:Times New Roman,Helvetica,Sans-Serif;
font-size:21px;
font-weight:bold;
margin:0px;
padding:5px 4px 0px 3px;
text-align:center;
}
</style>
</head>
<body>
<!-- Отображение даты -->
<div class="contentdate"><h3>OCT</h3><h4>15</h4></div>
</body>
</html>

Как это реализовать в шаблоне?
1. Выносим стили в общий файл стилей (в шаблоне по умолчанию это style.css)
2. В шаблонах news.short.tpl и news.full.tpl в место, куда хотим вывести дату, добавляем:

<div class="contentdate"><h3>{month_s}</h3><h4>{day}</h4></div>

3. Наслаждаемся красивой "фишкой"

Djaffar · 2012-08-14 03:01:23

Вариант 2 Без плагина

В "Формат времени для новостей" ставим

<p>j</p><b>M</b>Y

в стили прописываем

.news_date{
	position: absolute;
	width : 61px;
	height : 73px;
	background:url(images/data.png) no-repeat;
	padding: 56px 0px 0px 5px;
	font : normal 11px verdana, sans-serif;
	color : #3d3e40;
	font-weight: bold;
}
.news_date p{
	position: absolute;
	width : 51px;
	height : 73px;
	top : 20px;
	font : normal 32px verdana, sans-serif;
	color : #3d3e40;
	font-weight: bold;
	text-align: center;
}
.news_date b{
	position: absolute;
	width : 51px;
	height : 73px;
	top : 6px;
	font : normal 11px verdana, sans-serif;
	color : #fff;
	font-weight: bold;
	text-align: center;
}

в шаблон короткой и длинной

<div class="news_date">{date}</div>

Пример под картинку 73px x 51px (data.png)

irbees2008 · 2013-01-10 19:14:41

у меня год не помещается

vl · 2013-01-23 23:50:17

А где найти плагин varmgr ? - ссылка не открывается. или этот плагин уже списан в утиль?

Djaffar · 2013-01-24 04:14:17

vl Можно и без плагина сделать, попробуйте

irbees2008 число, месяц, год, все помещается

irbees2008 · 2013-01-24 20:32:11

Нужен плагин,Виталя может обновишь ссылку?

Djaffar · 2013-01-25 01:01:31

качни из SVN, чего ждать

irbees2008 · 2013-01-25 05:54:39

Djaffar пишет:

качни из SVN, чего ждать

вот я ступил.

спасибо

Отредактировано irbees2008 (2013-01-25 06:02:36)

Next Generation CMS :: Форум поддержки

Объявление

#1 2008-10-31 22:21:43

Tricks: Красивый вывод даты новости

#2 2012-08-14 03:01:23

Re: Tricks: Красивый вывод даты новости

#3 2013-01-10 19:14:41

Re: Tricks: Красивый вывод даты новости

#4 2013-01-23 23:50:17

Re: Tricks: Красивый вывод даты новости

#5 2013-01-24 04:14:17

Re: Tricks: Красивый вывод даты новости

#6 2013-01-24 20:32:11

Re: Tricks: Красивый вывод даты новости

#7 2013-01-25 01:01:31

Re: Tricks: Красивый вывод даты новости

#8 2013-01-25 05:54:39

Re: Tricks: Красивый вывод даты новости

Подвал форума