[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 9 из 9
  • «
  • 1
  • 2
  • 7
  • 8
  • 9
Форум » Общая информация » Все о создании сайтов. » Скрипты
Скрипты
ChifДата: Среда, 30.01.2013, 07:19 | Сообщение # 121
Рядовой
Группа: Администраторы
Сообщений: 7
Репутация: 0
Статус: Offline
Вид новостей для Каталога




Создаем информер:
[Каталог файлов-Материалы-Дата добавления материала D- Материалы:21- Колонки:3]

Все в нем заменяем на:
Код
<table class="eBlock" width="25%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding: 0px;">   
  <br></td></tr><tr><td style="border: 0px solid #000000; padding: 1px; background: #000000 none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" align="center"><a href="$ENTRY_URL$"><div align="left"><span style="color: #ffffff">$TITLE$</span></div><table class="eBlock" width="25%" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td style="padding: 1px;"> </a>  
  <table style="padding-bottom: 1px;" width="322" border="0" cellpadding="1" cellspacing="1" height="115">   
  <tbody>   
  <tr valign="top"><td style="border: 1px solid rgb(184, 184, 184); border-radius: 5px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="20%" align="center">  
     
  <a href="$ENTRY_URL$"><img style="border: 6px inset Blueviolet ;border-radius: 5px; width: 178px; height: 100px;" alt="$TITLE$" src="$IMG_URL1$"></td> <td style="border: 1px solid rgb(184, 184, 184); border-radius: 5px; padding: 1px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" align="right"></a>  
   <div class="eMessage" style="text-align: left; clear: both; padding-top: 10px; padding-bottom: 5px;">Категория:<br><?if($CATEGORY_NAME$)?><a href="$CATEGORY_URL$"><b>$CATEGORY_NAME$</b></a><?endif?></b><br>Просмотров: $READS$<br><span style="text-decoration: underline;"></span>   
  Дата: <span title="$TIME$">$DATE$</span><br>  
  <?if($COMMENTS_URL$)?> <a href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?>  

  </div><br></td></tr>   
   </tbody></table></td></tr></tbody></table></td></tr></tbody></table>


Далее на всю нашу страницу пишем код:
Код
<i><font face="Script" size="7" style="font-size: 36pt; color: rgb(0, 191, 255);"><div align="center">Свежие добавления видео</div></font></i><br>  
  <a href="http://$HOME_PAGE_LINK$load/"><span style="color:yellow"><div align="right">подробнее о видео >>></div></span></a><br>  
  <span style="color:blue"><table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> $MYINF_№информера$ </tr> </tbody> </table> </span>
 
ChifДата: Среда, 30.01.2013, 10:40 | Сообщение # 122
Рядовой
Группа: Администраторы
Сообщений: 7
Репутация: 0
Статус: Offline
Новый вид вывода материалов




Код вида материалов, подходит под любой модуль сайта.
Код
<table style="padding-bottom: 1px;" width="100%" border="0" cellpadding="1" cellspacing="1">   
   <tbody><tr><td colspan="2" style="border: 1px solid rgb(54, 90, 189); padding: 2px; background: transparent none repeat scroll 0% 0%;" align="left">   
   <table style="border: 1px solid rgb(54, 90, 189); background: transparent url(http://ucozon.ru/glavnaja/panelTITLE.png) repeat scroll 0% 0%;" width="100%" border="0" cellpadding="0" cellspacing="0" height="23">   
   <tbody><tr><td style="font-size: 12px; padding-left: 10px;" width="100%" align="center"><div style="float:right">   
   <?if($DATE$="Сегодня" or $DATE$="Вчера")?><img src="http://ucozon.ru/SCRIN2/28.gif"><?endif?><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></div>   
   <b><a href="$ENTRY_URL$" title="Смотреть $TITLE$ $CATEGORY_NAME$" class="entryLink">$TITLE$</a></b>   
   </td></tr></tbody></table></td></tr>   
   <tr valign="top"><td style="border: 1px solid rgb(54, 90, 189); padding: 5px;" width="215px">   
   <div class="eMessage">   
   <div style="max-height: 205px; !important; max-width: 205px; overflow: hidden; margin: 2px; border: 0px solid #365ABD;"><div align="center">   
   <?if($OTHER1$)?> <a class="m" href="$ENTRY_URL$"><img src="$OTHER1$" align="center" width="200" title="$TITLE$"></a><?else?>   
   <?if($IMG_SMALL_URL1$)?> <a href="$ENTRY_URL$"><img src="$IMG_SMALL_URL1$" width="200" align="center" title="$TITLE$"></a><?else?>   
   <?if($IMG_URL1$)?> <a href="$ENTRY_URL$"><img src="$IMG_URL1$" width="200" align="center" title="$TITLE$"></a>   
   <?else?><a href="$ENTRY_URL$" title="Скриншота нету,$TITLE$"> <img src="http://ucozon.ru/SCRIN7/1/ryjrsght5.png" width="200" align="center"></a>   
    <?endif?><?endif?><?endif?></div></div></td>   
   <td style="border: 1px solid rgb(54, 90, 189); padding: 5px 5px 5px 10px;>   
   <noindex><div rel="nofollow" class="eMessage" style="text-align: left; clear: both; padding-top: 5px; padding-bottom: 25px;">   
   <b>Категория:</b> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>   
   <hr align="left" class="vid"> <?if($USERNAME$)?><b>Автор:</b> <a href="javascript://" rel="nofollow" onclick="window.open('$HOME_PAGE_LINK$/index/8-$UID$','$UID$','scrollbars=1,top=0,left=0,resizable=1,width=720,height=600');return false;"> $USERNAME$</a>   
   <?endif?>   
   <hr align="left" class="vid"> <b>Просмотров:</b> [$READS$] <?if($LOADS$>0)?><b>Скачали:</b> [$LOADS$]<?endif?>   
   <?if($COMMENTS_NUM$>0)?> <a href="$COMMENTS_URL$"> <b>Комментарии:</b> ($COMMENTS_NUM$)</a><?endif?>   
   <hr align="left" class="vid"> <b>Дата:</b> <span title="$TIME$"> $DATE$</span> | <b>Время:</b> <span title="$DATE$"> $TIME$</span>   
   <?if($AUTHOR_SITE$)?><hr align="left" class="vid">    
   <div rel="nofollow" id="url1$ID$"></div>   
   <script type="text/javascript">   
   var test, url = "$AUTHOR_SITE$";   
   test = url.split('/')[02];   
   $('#url1$ID$').html('<b>Источник:</b> <u>'+test);    
   </script> <?else?> <?endif?>   
    <?if($RATING$)?><hr align="left" class="vid"> <?$RSTARS$('15','http://ucozon.ru/glavnaja/15.png','1','float')?><?endif?><hr align="left" class="vid">   
   </div></noindex>   
   <?if(len($MESSAGE$)>160)?><?substr($MESSAGE$,0,165)?>...<?else?>$MESSAGE$<?endif?>   
   </td></tr></tbody></table><div style="height: 3px"> </div>


$OTHER1$ , $IMG_SMALL_URL1$ , $IMG_URL1$ - ссылка на скрин через форму и стандартную загрузку.
$MESSAGE$,0,165 - кол-во символов при сокращении.
 
ChifДата: Суббота, 02.02.2013, 08:37 | Сообщение # 123
Рядовой
Группа: Администраторы
Сообщений: 7
Репутация: 0
Статус: Offline
Переключатель страниц как на Мегасофт-портал




Это вставляем в Ваш css:

Код
/* Page Selector Style */
.catPages1, .pagesBlockuz1, .pagesBlockuz2 {color:#ffffff;border:0px;margin-bottom:8px;margin-top:9px;}   
.catPages1 a:link, .pagesBlockuz1 a:link, .pagesBlockuz2 a:link,
.catPages1 a:visited, .pagesBlockuz1 a:visited, .pagesBlockuz2 a:visited,
.catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover,
.catPages1 a:active, .pagesBlockuz1 a:active, .pagesBlockuz2 a:active {text-decoration:none;color: #000000;background:#CCCCCC;padding:2px 8px;font-size:10px;font-weight:bold;-moz-border-radius: 3px;border-radius: 3px;}   
.catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover {background:#04b0eb;color:#000000;font-weight:bold;-moz-border-radius: 3px;border-radius: 3px;}   
.catPages1 b, .pagesBlockuz1 b, .pagesBlockuz2 b {text-decoration:none; background:#007fff; padding:2px 8px; color:#000000; font-size:10px;-moz-border-radius: 3px;border-radius: 3px;}
/* ----------------------- */
 
image-pcДата: Пятница, 31.07.2015, 03:23 | Сообщение # 124
Генералиссимус
Группа: Администраторы
Сообщений: 8
Репутация: 0
Статус: Offline
ТЕКСТ С ТЕНЬЮ СОВМЕСТИМЫЙ С IEXPLORER
Создание тени у текста, совместимой с iexplorer.
Происходит дублирование текста - текст берется из title="" и непосредственно из текста помещенного между <span></span>. За счет наложения одного текста на другой, и смещения на 1px осуществляется эффект тени.

HTML

Код
<h1 title="Текст с тенью." class="shadowtitle">
       <span>Текст с тенью.</span>
   </h1>


CSS

Код
h1.shadowtitle {
      position:relative;
      height:1em;
}
h1.shadowtitle span {
      position:absolute;
      left:-1px;
      top:-1px;
      color:#87B7FE;
}
h1.shadowtitle:before {
       content:attr(title);
       position:absolute;
       left:0;
       top:0;
       color:#000;
}


Сообщение отредактировал image-pc - Пятница, 31.07.2015, 03:24
 
RedStarДата: Пятница, 07.08.2015, 15:50 | Сообщение # 125
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline





Видео плеер в сплывающем ajax окне Ucozустановка:
1. Копируем код и ставим где Вам надо
2. Заменяем код плеера на свой! (Код выделен)


Код
<div id="inf" style="display:none;">  
<iframe src="http://vkontakte.ru/video_ext.php?oid=-19707176&id=150372377&hash=9de778d261a5ac97&hd=1" width="607" height="360" frameborder="0"></iframe>    
</div>    
<a href="javascript://" onclick="new _uWnd('id','Название материала',640,460,{autosize:0},document.getElementById('inf').innerHTML)">Название кнопки/ссылки</a>
 
RedStarДата: Воскресенье, 09.08.2015, 14:18 | Сообщение # 126
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
ВЫЗОВ AJAX ОКНА ИЗ ТЕМЫ НА ФОРУМЕ



Код
<a href="javascript:uwnd_update()">Ссылка</a>
<div style="display:none" id="uwnd_update">Содержимое</div>

    <script type="text/javascript"> function uwnd_update(){new _uWnd("Name","Name",540,380,{modal:1, min:0,shadow:1,header:1,max:0,resize:0, close:1, autosize:0},$("#uwnd_update").html()); }  </script>
 
RedStarДата: Воскресенье, 09.08.2015, 14:24 | Сообщение # 127
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
3-4 блока в футере

html:


Код
<section id="content">1</section>
<section id="middle">2</section>
<aside id="sidebar">3</aside>


css:



Код
#content {   width: 290px;   float: left;   padding: 5px 15px; } #middle {   width: 294px; /* Account for margins + border values */   float: left;   padding: 5px 15px;   margin: 0px 5px 5px 5px; } #sidebar {   width: 270px;   padding: 5px 15px;   float: left; }


Ширину и всё остальное регулируйте сами.
 
RedStarДата: Воскресенье, 09.08.2015, 15:06 | Сообщение # 128
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
СМЕНА ВИДА МАТЕРИЛА НА JQUERY



Недавно я увидел смену вида материалов, т.к. она платная в магазине uscript, который недавно презентовала ucoz; Я решил создать свой, малый и понятный, адаптивный, надеюсь красивый (каждому не угодишь) вид материалов, и скрипт к нему; Смысл скрипта и вида материала заключается в том что при нажатии кнопки меняется вид материалов, а точнее становится лентой. сеткой в два или три колонны.

УСТАНОВКА

1) Установите CSS стили с CSS.txt в файл с стилями или в общие шаблоны (Таблица стилей (CSS));
2) Между тегом вставьте библиотеку иконок

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Прочитать про Font-Awesome и узнать примеры вы можете в статьях сайта
3) А перед закрывающим тегом

Код
<script type="text/javascript">   
    $('#grid-view').addClass('active');   
    $('#list-view').click(function(event){   
    event.preventDefault();   
    $('#allEntries [id^="entryID"] .item').removeClass('grid-item');   
    $('#allEntries [id^="entryID"] .item').removeClass('grid3-item')   
    $('#allEntries [id^="entryID"] .item').addClass('list-item');   
    $('#list-view').addClass('active');   
    $('#grid-view').removeClass('active');   
    $('#grid3-view').removeClass('active');   
    };);   
    $('#grid-view').click(function(event){   
    event.preventDefault();   
    $('#allEntries [id^="entryID"] .item').addClass('grid-item');   
    $('#allEntries [id^="entryID"] .item').removeClass('grid3-item')   
    $('#allEntries [id^="entryID"] .item').removeClass('list-item');   
    $('#list-view').removeClass('active');   
    $('#grid-view').addClass('active');   
    $('#grid3-view').removeClass('active');   
    };);   
    $('#grid3-view').click(function(event){   
    event.preventDefault();   
    $('#allEntries [id^="entryID"] .item').removeClass('grid-item');   
    $('#allEntries [id^="entryID"] .item').addClass('grid3-item')   
    $('#allEntries [id^="entryID"] .item').removeClass('list-item');   
    $('#list-view').removeClass('active');   
    $('#grid-view').removeClass('active');   
    $('#grid3-view').addClass('active');   
    };);   
</script>


Скрипт очень простой, на jQuery, и понятный .removeClass - удалить класс, .addClass - добавить, при нажатии на кнопку происходит действие по смене классов, одни удаляются, другие присваиваются;
4) Вид материалов устанавливаем с файла - Вид материалов.txt, один важный момент, иконку я оставил для примера, для каждой категории вы можете присвоить свою с помощью переменной -

Код
<?if($CATEGORY_NAME$='Название категории')?>иконка<?endif?>


где находятся 519 иконок узнаем тоже тут
5) В то место где хотим видеть кнопки вставляем следующий код:

Код
<div class="btn-group">   
<a href="#" class="btn" id="grid-view"><i class="fa fa-th-large"></i></a>
<a href="#" class="btn" id="list-view"><i class="fa fa-list"></i></a>
<a href="#" class="btn active" id="grid3-view"><i class="fa fa-th"></i></a>   
</div>


скачать прикрепленные файлы
 
RedStarДата: Воскресенье, 09.08.2015, 15:32 | Сообщение # 129
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Таблички услуг + Hover эффекты



Думаю, каждый сайт, который представляет услуги, должен их рекомендовать, поэтому такие таблички будут показывать вашу деятельность, и что в нее включено. 
Есть 2 варианта табличек и 11 hover эффектов, и даже если таблички вам не понадобятся, то эффекты всегда будут нужны, и их можно применять к любому элементу сайта, от шапки до картинки, кнопки и т.п. 
Сейчас возьмем пример с демо и разберем, что к чему.

1 Вариант 

Код
<!-- Первый блок -->  
   <div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space" >  
   <div class="ptc-header">  
   <div class="ptc-note-icon"></div>  
   <div class="ptc-stars">  
   <span class="fa fa-star"></span>  
   </div>  
   <h1 class="ptc-title" >БЕСПЛАТНО</h1>  
   <div class="ptc-arrow-down ptc-first"></div></div><div class="ptc-price" >  
   <span class="ptc-total"><sup class="ptc-currency">$</sup>00.00</span><p class="ptc-text">МЕСЯЦ</p>  
   <a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a>  
   </div><div class="ptc-content">  
   <ul class="ptc-features">  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   </ul>  
   </div>  
</div>  
<!-- конец первого блока -->


Обратите внимание 
Цвет таблички зависит от кода

Код
id="ptc_1"

изменив цифру от 1 до 6 вы получаете разное цветовое оформление таблиц. 

Количество звезд зависит от количества тегов , находящихся в этом диве: 

Код
<div class="ptc-stars"> </div>


Если вы хотите, чтобы между таблицами были отступы, то нужно убрать из класса главного дива слово ptc-no-space

Код
<div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space" >

ptc-smaller в стиле отвечает за пропорциональное уменьшение таблички на 15%, ничего не изменяет, кроме габаритов 
Остальные стили в классе

Код
col-lg-2 col-md-4 col-sm-6 col-xs-12


отвечают за разрешение таблицы в разных экранах (проверить можно в демо меняя масштаб, например, с помощью клавиш Ctrl + "+/-" или зажав на Ctrl + колесико мыши) 

Установка HTML для варианта 1 

Код
<div class="ptc-editor">  
   <div class="ptc-tables original ui-sortable standard ui-sortable-disabled" id="sortable" style="font-family: 'Open Sans'; font-size: 47.5%;">  
   <!-- Первый блок -->  
   <div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space" >  
   <div class="ptc-header">  
   <div class="ptc-note-icon"></div>  
   <div class="ptc-stars">  
   <span class="fa fa-star"></span>  
   </div>  
   <h1 class="ptc-title" >БЕСПЛАТНО</h1>  
   <div class="ptc-arrow-down ptc-first"></div></div><div class="ptc-price" >  
   <span class="ptc-total"><sup class="ptc-currency">$</sup>00.00</span><p class="ptc-text">МЕСЯЦ</p>  
   <a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a>  
   </div><div class="ptc-content">  
   <ul class="ptc-features">  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   </ul>  
   </div>  
</div>  
<!-- конец первого блока -->   
<!-- Второй блок -->  
   <div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space" >  
   <div class="ptc-header">  
   <div class="ptc-note-icon"></div>  
   <div class="ptc-stars">  
   <span class="fa fa-star"></span> <span class="fa fa-star"></span><!-- 2 звезды, прописано 2 раза - <span class="fa fa-star"></span> -->  
   </div>  
   <h1 class="ptc-title" >БЕСПЛАТНО</h1>  
   <div class="ptc-arrow-down ptc-first"></div></div><div class="ptc-price" >  
   <span class="ptc-total"><sup class="ptc-currency">$</sup>00.00</span><p class="ptc-text">МЕСЯЦ</p>  
   <a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a>  
   </div><div class="ptc-content">  
   <ul class="ptc-features">  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>  
   </ul>  
   </div>  
</div>  
<!-- конец второго блока --><!-- так до 6 -- >  
</div></div>


Установка HTML для варианта 2 

Код
<div class="ptc-editor">  
   <div class="ptc-tables original ui-sortable plain ui-sortable-disabled" id="sortable" style="font-family: 'Open Sans'; font-size: 47.5%;">  
   <!-- Первый блок -->  
   <div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space">  
<div class="ptc-header"><div class="handle">  
<div class="handle-bg"></div></div><h1 class="ptc-title" >БЕСПЛАТНО</h1>  
<span class="ptc-price ptc-total"><sup class="ptc-currency" >$</sup><span >00.00</span>  
</span><p class="ptc-text">МЕСЯЦ</p>  
   <div class="ptc-stars">  
<span class="fa fa-star"></span>  
   </div></div>  
   <div class="ptc-footer"><a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a></div>  
<div class="ptc-content">  
<ul class="ptc-features">  
<li class="ptc-feature"><a href="#">ССЫЛКА</a></li>  
<li class="ptc-feature"><a href="#" >ССЫЛКА</a></li>  
<li class="ptc-feature"><a href="#" >ССЫЛКА</a></li>  
</ul></div></div>  
<!-- конец первого блока -->  
<!-- Второй блок -->  
<div id="ptc_2" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space">  
<div class="ptc-header"><div class="handle">  
<div class="handle-bg"></div></div><h1 class="ptc-title" >БАЗОВЫЙ</h1>  
<span class="ptc-price ptc-total"><sup class="ptc-currency" >$</sup><span >02.00</span>  
</span><p class="ptc-text">МЕСЯЦ</p>  
   <div class="ptc-stars">  
<span class="fa fa-star"></span><span class="fa fa-star"></span>  
   </div></div>  
   <div class="ptc-footer"><a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a></div>  
<div class="ptc-content">  
<ul class="ptc-features">  
<li class="ptc-feature"><a href="#">ССЫЛКА</a></li>  
<li class="ptc-feature"><a href="#" >ССЫЛКА</a></li>  
<li class="ptc-feature"><a href="#" >ССЫЛКА</a></li>  
</ul></div></div>  
   <!-- конец второго блока --><!-- так же до шестого-->


Установка CSS: 
подключаем CSS-библиотеку перед тегом
Код
<link rel='stylesheet' id='style-css' href='/g-table/g-tables.css' type='text/css' media='all' />


Установка ховер эффектов: 

Чтобы установить ховер-эффект, нужно в класс главного дива добавить следующие стили:
wobble-vertical - вариант 1, второй пример 
wobble-horizontal - вариант 1, третий пример 
wobble-to-bottom-right - вариант 1, четвертый пример 
wobble-to-top-right - вариант 1, пятый пример 
grow - вариант 1, шестой пример 
shrink - вариант 2, первый пример 
rotate - вариант 2, второй пример 
grow-rotate - вариант 2, третий пример 
float - вариант 2, четвертый пример 
sink - вариант 2, пятый пример 
buzz-out - вариант 2, шестой пример

Например: 

Код
<div id="ptc_6" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller buzz-out">

Это все будет хорошо смотреться в "умелых ручках", поэтому используйте их по уму.

скачать прикрепленные файлы
 
RedStarДата: Воскресенье, 09.08.2015, 15:48 | Сообщение # 130
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Модули в UcoZ


Код
<?if($MODULE_ID$='index')?>модуль редактор страниц<?endif?>
<?if($MODULE_ID$='blog')?>модуль блог<?endif?>
<?if($MODULE_ID$='news')?>модуль новости<?endif?>
<?if($MODULE_ID$='publ')?>модуль каталог статей<?endif?>
<?if($MODULE_ID$='load')?>модуль каталог файлов<?endif?>
<?if($MODULE_ID$='dir')?>модуль каталог сайтов<?endif?>
<?if($MODULE_ID$='board')?>модуль каталог объявлений<?endif?>
<?if($MODULE_ID$='stuff')?>модуль игры<?endif?>
<?if($MODULE_ID$='video')?>видео<?endif?>
<?if($MODULE_ID$='shop')?>магазин<?endif?>
 
RedStarДата: Воскресенье, 09.08.2015, 17:20 | Сообщение # 131
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Подсветка синтаксиса кода для любого модуля сайта

Уникальный скрипт для подсветки синтаксиса. При закрытии кода в теги code и quote код будет подсвечен. На скриншоте мы видим пример, пример можно увидеть на нашем сайте.  Установка скрипта - подсветки синтаксиса для сайта очень проста.

Установка "Подсветки синтаксиса для сайта":


Вставляем код в (Панель управления-->Дизайн-->Управление дизайном-->Страница материала и комментариев к нему), либо в другой, любой модуль где вы хотите видеть подсветку синтаксиса, ПЕРЕД  

Код
<script type="text/javascript" src="http://wallaby.ucoz.ru/js_template/prettify.sp.js"></script>   
<link type="text/css" rel="stylesheet" href="http://wallaby.ucoz.ru/css_templates/prettify.css"></link>   
<body onload="window['PR_ADDBR']=true; window['PR_TAGNAME']=['div']; window['PR_CLASSNAME']=['codeMessage']; prettyPrint();">
 
RedStarДата: Воскресенье, 09.08.2015, 17:35 | Сообщение # 132
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Стилизация вида меню категорий

Перед тем как оформить нужный вид меню категорий, нам следует включить нужные функции, для этого заходим в Панель управления » Нужный модуль » Настройки модуля и устанавливаем: 

Количество колонок в меню категорий → 1. 
Выводить количество сообщений в категории возле названия категории: → устанавливаем галочку.

Теперь для отображение меню категорий модуля сайта, нам необходимо установить на страницу сайта специальный системный код → $CATEGORIES$ 

После того, как Вы добавили и сохранили в шаблон системный код $CATEGORIES$ давайте посмотрим, что нам выдала система: 

Код
<table border="0" cellspacing="1" cellpadding="0" width="100%" class="catsTable">    
    <tr>    
    <td style="width:100%" class="catsTd" valign="top">    
    <a href="#" class="catName">Категория 1</a>    
    <span class="catNumData" style="unicode-bidi: embed;">[0]</span>    
    </td>    
    </tr>    
       
    <tr>    
    <td style="width:100%" class="catsTd" valign="top">    
    <a href="#" class="catName">Категория 2</a>    
    <span class="catNumData" style="unicode-bidi: embed;">[0]</span>    
    </td>    
    </tr>    
       
    <tr>    
    <td style="width:100%" class="catsTd" valign="top">    
    <a href="#" class="catName">Категория 3</a>    
    <span class="catNumData" style="unicode-bidi: embed;">[0]</span>    
    </td>    
    </tr>    
       
    <tr>    
    <td style="width:100%" class="catsTd" valign="top">    
    <a href="#" class="catName">Категория 4</a>    
    <span class="catNumData" style="unicode-bidi: embed;">[0]</span>  
    </td>    
    </tr>    
       
    <tr>    
    <td style="width:100%" class="catsTd" valign="top">    
    <a href="#" class="catName">Категория 5</a>    
    <span class="catNumData" style="unicode-bidi: embed;">[0]</span>    
    </td>    
    </tr>    
       
    <tr>    
    <td style="width:100%" class="catsTd" valign="top">    
    <a class="catName" href=#">Категория 6</a>    
    <span class="catNumData" style="unicode-bidi: embed;">[4]</span>    
    </td>    
    </tr>    
       
    <tr>    
    <td style="width:100%" class="catsTd" valign="top">    
    <a href="#" class="catName">Категория 7</a>    
    <span class="catNumData" style="unicode-bidi: embed;">[5]</span>    
    <div class="catDescr">Описание</div>    
    </td>    
    </tr>    
    </table>


Как мы видим, перед нами обычная таблица с классом catsTable и ячейками catsTd в которой представлены: 
Ссылки на нужные категории → class="catName"; 
Тег span — количество материалов в категории → class="catNumData"; 
Тег div — описание категории → class="catDescr". 

Теперь давайте пропишем значения нашим классам: 

Код
.catsTable {width:200px;overflow:hidden;border-collapse:0px;overflow: hidden;}    

.catsTd {width:200px;height:20px;color:#000;}    

a.catName:link,a.catName:visited,a.catName:active {font:10px Arial,sans-serif;color:#eee;margin:0;float:left;width:200px;height:18px;display:block;position:absolute;padding:4px 0 0 11px;border-top: 1px solid #ccc!important;}    

.catsTd a:hover{background:#eee;}    
       
.catNumData {float:right;margin: 5px 5px 0 0;position: relative;font:9px Arial,sans-serif;font-weight: bold;}    
       
.catDescr{color:#484848;font-weight: bold;text-align:right;padding: 9px 6px 0 0;margin: 21px 0 4px 0!important;border-top: 1px solid #ccc!important;}


Рассмотрим использованные CSS классы: 



Настраиваем на свой вкус 

Многие интересуются вопросом → "как установить иконки перед категориями?". Это делается скриптом, но работает скрипт в модулях: каталог статей/файлов/сайтов и онлайн игры.. 
Устанавливаем код на нужных страницах (главная страница каталога, страница добавления, страница материала и комментариев к нему и др.) после

Код
<script type="text/javascript">  
var img = {1:'/img/1.png',2:'/img/2.png',3:'/img/3.png',4:'/img/4.png'};  
for(i in img)  
$('#cid'+i).find('a').before('<span style="padding: 2px;"><img src="'+img[i]+'" style="vertical-align: -4px;" border="0" /></span>');  
// Author: Sheriff ~ http://fi4a.ru/  
</script>




В массиве img пропишите пути к картинкам для категорий (в одинарных кавычках через запятую, не забываем про подсчет категорий). 
Также к скрипту можно добавить CSS стили в свойство style, для упрощенной настройки отображения картинок. 

Вот и всё!
 
RedStarДата: Среда, 26.08.2015, 19:47 | Сообщение # 133
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Вид категорий для ucoz (Темный стиль)


Думаю стандартный вид категорий который идет в стандартных шаблонах как то по дизайну не очень красиво вписываются под портал. И если даже шаблон нарисован под заказ всегда стает точка сомнение какой делать по фактуре этот скрипт или вообще его делать. Если его на сайте нет то становятся много блоков и навигация по сайту становиться слаба и гость уходит с сайта не найдя что искал. Этот скрипт все сразу на свои точки ставит и по нему что вам нужно вы быстро найдете. Выполнен он в темных тонах, но это не говорить что он под темный дизайн сайта, так как на светлом он отлично подойдет. Есть нумерация материалов что самое главное. Да и вообще выполнен и нарисован все красиво и качественно. 
Оставляем стандарт и просто к нему прописываем стиль: 

Код
/* cats */   
.block_cont .catsTable {width:216px; margin:0 auto;}   
.block_cont .catsTable a {text-decoration:none; color:#fff;}   
.block_cont .catsTd {background:url(http://zornet.ru/CSS-ZORNET/ZER/catsTd.png) no-repeat 0 0; width:214px; height:28px; line-height:28px; overflow:hidden; color:#fff; padding:0 0 3px 0;}   
.block_cont .catsTd:hover {color:#fff; background-position:-219px 0; cursor:pointer;}   
.block_cont .catsTd:hover a {color:#fff;}   
.block_cont .catName,   
.block_cont .catNameActive {float:left; padding:0 0 0 26px;}   
.block_cont .catNumData {color:#2a2a2a; float:right; margin:3px 5px 0 0; background:url(http://zornet.ru/CSS-ZORNET/ZER/catNumData.png) no-repeat 0 0; width:36px; height:21px; line-height:20px; text-align:center;}   
.block_cont .catDescr {display:none;}
 
image-pcДата: Воскресенье, 12.06.2016, 17:33 | Сообщение # 134
Генералиссимус
Группа: Администраторы
Сообщений: 8
Репутация: 0
Статус: Offline
Эффект выпуклого текста с помощью CSS3



Код
<style>
#dsoutput{
width:600px;/* - Ширина блока - */
background: #cccccc;/* - Фон блока - */
color: #cccccc;/* - Цвет текста - */
font-size:7em;/* - Размер текста - */
font-famaly:'Tahoma';/* - Тип шрифта - */
text-align:center;
text-shadow: 1px 1px 3px #636363,
-1px -1px 3px #ffffff;
}
</style>
<p id="dsoutput">Делай сайт</p>
 
Форум » Общая информация » Все о создании сайтов. » Скрипты
  • Страница 9 из 9
  • «
  • 1
  • 2
  • 7
  • 8
  • 9
Поиск:


Copyright "IPC" © 2008
Хостинг от uCoz