Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 14 - мая CSS
4520 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Вот искал новые варианты облака тегов для боковой панели, поскольку флеш накрылся медным тазом. Довольно долго искал подходящие варианты и я нашёл пару. Вот один сейчас и разберем он построен на CSS3.
Вот рабочий пример

Как видите получается довольно симпотично и интересно, главное что все просто, и можно еще поиграть со стилями и анимацией.
И так идем в директорию ваш сайт/templates/ваш шаблон/plugins/tags/skins/default и открываем файл sidebar.tpl
и заменяем содержимое файла на вот этот код
Код:
<style>.sidebar-block{ display:none; } .sidebar-cal, .sidebar-tags, .sidebar-summary{ display:block; } .tags a:nth-child(1)  { color:#ffd !important; animation-delay:1s; animation-duration:9.59s; -moz-animation-delay:1s; -moz-animation-duration:9.59s; -webkit-animation-delay:1s; -webkit-animation-duration:9.59s;} .tags a:nth-child(3)  { color:#fed !important; animation-delay:4s; animation-duration:8.35s; -moz-animation-delay:4s; -moz-animation-duration:8.35s; -webkit-animation-delay:4s; -webkit-animation-duration:8.35s;} .tags a:nth-child(5)  { color:#fdf !important; animation-delay:3s; animation-duration:7.17s; -moz-animation-delay:3s; -moz-animation-duration:7.17s; -webkit-animation-delay:3s; -webkit-animation-duration:7.17s;} .tags a:nth-child(7)  { color:#ffe !important; animation-delay:2s; animation-duration:6.26s; -moz-animation-delay:2s; -moz-animation-duration:6.26s; -webkit-animation-delay:2s; -webkit-animation-duration:6.26s;} .tags a:nth-child(9)  { color:#fdf !important; animation-delay:5s; animation-duration:8.88s; -moz-animation-delay:5s; -moz-animation-duration:8.88s; -webkit-animation-delay:5s; -webkit-animation-duration:8.88s;} .tags a:nth-child(11) { color:#ffc !important; animation-delay:3s; animation-duration:7.47s; -moz-animation-delay:3s; -moz-animation-duration:7.47s; -webkit-animation-delay:3s; -webkit-animation-duration:7.47s;} .tags a:nth-child(13) { color:#fff !important; animation-delay:2s; animation-duration:9.79s; -moz-animation-delay:2s; -moz-animation-duration:9.79s; -webkit-animation-delay:2s; -webkit-animation-duration:9.79s;} .tags a:nth-child(15) { color:#fde !important; animation-delay:4s; animation-duration:5.25s; -moz-animation-delay:4s; -moz-animation-duration:5.25s; -webkit-animation-delay:4s; -webkit-animation-duration:5.25s;} .tags a:nth-child(17) { color:#fdf !important; animation-delay:6s; animation-duration:7.67s; -moz-animation-delay:6s; -moz-animation-duration:7.67s; -webkit-animation-delay:6s; -webkit-animation-duration:7.67s;} .tags a:nth-child(19) { color:#ffd !important; animation-delay:3s; animation-duration:6.26s; -moz-animation-delay:3s; -moz-animation-duration:6.26s; -webkit-animation-delay:3s; -webkit-animation-duration:6.26s;} .tags a:nth-child(21) { color:#ffc !important; animation-delay:4s; animation-duration:8.88s; -moz-animation-delay:4s; -moz-animation-duration:8.88s; -webkit-animation-delay:4s; -webkit-animation-duration:8.88s;} .tags a:nth-child(23) { color:#fcc !important; animation-delay:2s; animation-duration:7.35s; -moz-animation-delay:2s; -moz-animation-duration:7.35s; -webkit-animation-delay:2s; -webkit-animation-duration:7.35s;} .tags a:nth-child(25) { color:#fef !important; animation-delay:5s; animation-duration:9.79s; -moz-animation-delay:5s; -moz-animation-duration:9.79s; -webkit-animation-delay:5s; -webkit-animation-duration:9.79s;} .tags a:nth-child(27) { color:#ffd !important; animation-delay:1s; animation-duration:8.25s; -moz-animation-delay:1s; -moz-animation-duration:8.25s; -webkit-animation-delay:1s; -webkit-animation-duration:8.25s;} .tags a:nth-child(29) { color:#fdd !important; animation-delay:4s; animation-duration:7.17s; -moz-animation-delay:4s; -moz-animation-duration:7.17s; -webkit-animation-delay:4s; -webkit-animation-duration:7.17s;} .tags a:nth-child(31) { color:#fff !important; animation-delay:1s; animation-duration:6.26s; -moz-animation-delay:1s; -moz-animation-duration:6.26s; -webkit-animation-delay:1s; -webkit-animation-duration:6.26s;} .tags a:nth-child(33) { color:#fcd !important; animation-delay:3s; animation-duration:8.58s; -moz-animation-delay:3s; -moz-animation-duration:8.58s; -webkit-animation-delay:3s; -webkit-animation-duration:8.58s;} .tags a:nth-child(35) { color:#fff !important; animation-delay:2s; animation-duration:7.27s; -moz-animation-delay:2s; -moz-animation-duration:7.27s; -webkit-animation-delay:2s; -webkit-animation-duration:7.27s;} .tags a:nth-child(37) { color:#fef !important; animation-delay:1s; animation-duration:9.09s; -moz-animation-delay:1s; -moz-animation-duration:9.09s; -webkit-animation-delay:1s; -webkit-animation-duration:9.09s;} .tags a:nth-child(39) { color:#ffd !important; animation-delay:6s; animation-duration:9.45s; -moz-animation-delay:6s; -moz-animation-duration:9.45s; -webkit-animation-delay:6s; -webkit-animation-duration:9.45s;} .tags a{ 	-webkit-animation-name: coloring, tagmove; 	-webkit-animation-timing-function: cubic-bezier(.50, 0, .50, 1); 	-webkit-animation-iteration-count: infinite; 	-moz-animation-name: coloring, tagmove; 	-moz-animation-timing-function: cubic-bezier(.50, 0, .50, 1); 	-moz-animation-iteration-count: infinite; 	animation-name: coloring, tagmove; 	animation-timing-function: cubic-bezier(.50, 0, .50, 1); 	animation-iteration-count: infinite; 	position:relative; 	opacity:0; } .tags a:hover { color:#750B0B !important; text-decoration:underline !important; } .tags{ 	overflow:hidden; 	height: 500px; 	padding-top:100px; 	font-size:1.5em !important; 	line-height:1px; } .sidebar-tags dt{ display:none; } .tags .comma{ display:none; } @keyframes tagmove { 	from { top:-80px; } 	to { top:80px; } } @keyframes coloring {     from { opacity: 0; }     50% { opacity: 1; transform:scale(2,2)}     to { opacity: 0; } } @-moz-keyframes tagmove { 	from { top:-80px; } 	to { top:80px; } } @-moz-keyframes coloring {     from { opacity: 0; }     50% { opacity: 1; -moz-transform:scale(2,2)}     to { opacity: 0; } } @-webkit-keyframes tagmove { 	from { top:-80px; } 	to { top:80px; } } @-webkit-keyframes coloring {     from { opacity: 0; }     50% { opacity: 1; -webkit-transform:scale(2,2)}     to { opacity: 0; } }</style>
<dl class="sidebar-block sidebar-tags">
<dd class="tags">{entries}</dd>
</dl>
<br/><a href="/plugin/tags/">Показать все теги</a>
Сохраняем и открываем файл params.ini и заменяем содержимое вот на этот код
Код:
news.tag = "<a href='{url}'>{tag}</a>"
news.tag.delimiter = ", "
sidebar.tag = "<a href='{url}' {params} title='Количество новостей: {posts}' rel='tag'>{tag}</a>"
sidebar.tag.delimiter = "<span class="comma">,</span> "
cloud.tag = "* <a href='{url}' {params} title='Количество новостей: {posts}' rel='tag'>{tag}</a><sup><small> <font color='red'>{posts}</font></small></sup>"
cloud.tag.delimiter = "<span class="comma">,</span> "

Вот и все, код легко подгоняется под любой шаблон.

Можешь почитать и вот эту статейку "Добавляем свои функции в стандартный bb- редактор для оформления новости"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Обновленное

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйт cущecтвуeт: 4904 дня
  • Статических страниц: 10
  • Категорий: 28
  • Новостей: 624
  • Неопубликованных новостей: 8
  • Комментариев: 259
  • Зарегестрированных пользователей: 1460
  • Онлайн всего: [27]
  • Гости: [26]
  • Поисковые роботы: [1] Google
  • Сегодня нас посетили: [5] irbees2008, dankeanke, Google, Яндекс, Google
  • SQL запросов: 43
  • Генерация страницы: 0.057сек
  • Потребление памяти: 4.795 Mb 
  •   Яндекс.Метрика