[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Стильный спойлер для форума
procazДата: Воскресенье, 17.03.2013, 16:43 | Сообщение # 1
Ученик
Группа: Модераторы
Сообщений: 25
Награды: 0
Репутация: 7
Статус: Offline


Для установки этого спойлера на ваш форум вам нужно скопировать данный скрипт в вид материалов форума (в самый низ):

Код
<script type="text/javascript">    
    $('td.posttdMessage .uSpoilerButton').each(function (){    
    $(this).val($(this).val().replace(/\[[+-]]/g, '')).removeAttr('onclick');    
    $(this).click(function(){    
    $(this).parent().parent().toggleClass('uSpoilerOpened').find('.uSpoilerText').slideToggle('fast');    
    });    
    });    
    </script>


Затем в css, не в общий, а именно для вида материалов форума добавить:

Код
/* Site Spoiler */          
    .uSpoilerClosed .uSpoilerButBl input{width: 100%; font: bold italic normal 11px Tahoma,Calibri,Verdana,Geneva,sans-serif; margin: 0px;line-height: 15px; color: silver; background: url('/by_fender/plus.png') no-repeat left center #141414; padding: 2px 17px 2px 17px; text-align: left; border: 1px solid #333;}          
    .uSpoilerOpened .uSpoilerButBl input{width: 100%; font: bold italic normal 11px Tahoma,Calibri,Verdana,Geneva,sans-serif; margin: 0px;line-height: 15px; color: silver; background: url('/by_fender/minus.png') no-repeat left center #141414; padding: 2px 17px 2px 17px; text-align: left; border: 1px solid #333;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}          
    .uSpoilerButton {width: 100%; cursor: pointer; font: bold italic normal 11px Tahoma,Calibri,Verdana,Geneva,sans-serif; margin: 0px;line-height: 15px; color: silver; background: #141414; padding: 3px; text-align: left; border: 1px solid #333;}          
    .uSpoilerText {color: silver; background: #141414; text-align: left; border: 1px solid #333; border-radius: 5px;border-top-left-radius: 0px;border-top-right-radius: 0px;border-top: 0px;padding: 3px 6px;}          
    /* ----------- */


И последний шаг, качаем картинки + и -

http://s53.radikal.ru/i141/1303/30/1b6d389b7ab3.png
http://s017.radikal.ru/i414/1303/35/0c71c255ca06.png

Заливаем их к себе на сайт и в css указываем свои ссылки на картинки, для полного соответствия спойлера как на моем сайте, можете в общем css найти input { и установить значения border-radius на 5px




Сообщение отредактировал procaz - Воскресенье, 17.03.2013, 16:45
 
  • Страница 1 из 1
  • 1
Поиск:

Хостинг от uCoz