[proSilver] Красивые дни рождения (css3).

[Balamut]

В очередной раз кто-то будет скрипеть зубами, но на всякий случай, вдруг кому понадобится. ;-)

На самом деле, меня давно интересовал вопрос, почему список дней рождения находится между "Ху из онлайн" и статистикой. По логике вещей, он явно должен быть либо ниже, либо выше. Ну да оставим этот момент на совести Tom'а Beddard'а и subBlue, а сами перенесём его чуть выше, вспомнив при этом про css3 =)

В итоге мы получим это:

birthday.png

Для этого нам надо:

Открыть:

Код: Выделить всё

index.php

Найти

Код: Выделить всё

	'S_DISPLAY_BIRTHDAY_LIST'	=> ($config['load_birthdays']) ? true : false,

Добавить после

Код: Выделить всё

	'DATE_DAY' => date("d"),
	'DATE_MONTH' => date("M"),

Открыть

Код: Выделить всё

styles/prosilver/theme/common.css

Найти

Код: Выделить всё

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}

Добавить после

Код: Выделить всё

/* CoolBirthday (http://phpbb.tttz.ru)
-----------------------------v.1.0.0--- */
.calendar{
	margin:.25em 10px 10px 0;
	padding-top:5px;
	float:left;
	width:50px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 20px/40px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	position:relative;
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}
.calendar em{
	display:block;
	font:normal bold 11px/20px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}	
.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:4px;	
	width:6px;
	height:6px;
	background:#111;
	z-index:1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:7px;}	
.calendar:after{right:7px;}	
.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-3px;	
	width:2px;
	height:10px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calendar em:before{left:9px;}	
.calendar em:after{right:9px;}	

Открыть

Код: Выделить всё

styles/prosilver/template/index_body.html

Найти

Код: Выделить всё

<!-- INCLUDE forumlist_body.html -->

Добавить после

Код: Выделить всё

<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST-->
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<ul class="topiclist">
			<li class="header">
				<dl class="icon">
					<dt>{L_BIRTHDAYS}
					</dt>
				</dl>
			</li>
		</ul>
		<ul class="topiclist forums">
			<dl class="icon"><em class="calendar">{DATE_DAY} <em>{DATE_MONTH}</em></em>
				<p>{L_CONGRATULATIONS}: <br />
				<strong>{BIRTHDAY_LIST}</strong></p>
			</dl>
               </ul>
	</div>
	<span class="corners-bottom"><span></span></span>
</div>
<!-- ENDIF -->

Найти

Код: Выделить всё

<!-- IF S_DISPLAY_ONLINE_LIST -->
	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
	<h3>{L_BIRTHDAYS}</h3>
	<p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF NEWEST_USER -->
	<h3>{L_STATISTICS}</h3>
	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->

Заменить на

Код: Выделить всё

<!-- IF S_DISPLAY_ONLINE_LIST -->
	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF NEWEST_USER -->
	<h3>{L_STATISTICS}</h3>
	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->

Ну и, как всегда, не забудьте очистить кэш (Администраторский раздел - Общие) и обновить шаблон и тему (Администраторский раздел - Стили - Шаблоны || Темы - Обновить).

[Алсидес]

Smayliks
Гений по CSS Спасибо=)

[Romnik]

почему список дней рождения находится между "Ху из онлайн" и статистикой.

У меня он вообще в самом верху в блоке приветствия.

[ВладимирТ]

А у меня как то так...

[MIT]

Smayliks, такой красивый календарик скопирован получился и так неаккуратно вписан он в блок.
Не знаю, отступы бы хоть нормальные сделал. Ну чес-слово, халтура.