Спойлер

Posted 20 июля, 201212 yr

comment_7756

Помогите пожалуйста со спойлером на 3.3.3 версии IPB. Как сделать красивый спойлер с возможностью изменения options

и немного увеличенной стандартной кнопкой Показать, чтобы текст на ней не вылезал за пределы?

Kobalt Mr and Nemo4
2

Link to comment

https://ipbmafia.ru/topic/1317-spojler/

Share on other sites

20 июля, 201212 yr

comment_7758

Тоесть!

Nemo4
1

Link to comment

https://ipbmafia.ru/topic/1317-spojler/?&do=findComment&comment=7758

Share on other sites

20 июля, 201212 yr

Author

comment_7760

Тоесть чтобы можно было выбрать что на спойлере написано вместо "Скрытый текст" и как то расширить кнопку потому что надпись "Показать" не вмещается на нее

Nemo4
1

Link to comment

https://ipbmafia.ru/topic/1317-spojler/?&do=findComment&comment=7760

Share on other sites

20 июля, 201212 yr

comment_7762

Ну вот....
1. Заходим в ACP - Внешний вид - Ваш Стиль - globalTemplate
2. находим тег <head> после него вставляем следующий код:

<script type="text/javascript" src="__ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.blockspoiler2').hide()
jQuery('.blockspoiler').click(function(){
jQuery(this).children('.blockspoiler2').slideToggle("normal");
})
})
</script>

3. Переходим на вкладку CSS - ipb_styles.css. В самый низ вставляем следующий код:

.blockspoiler{
background: #0b6075;
margin-bottom:0;
border-radius: 15px 15px 15px 15px;
padding: 10px;
color: #fff;
width: 95%;
margin-top: 20px;
}
.blockspoiler a{
text-decoration:none;
color: #fff;
}
.blockspoiler a:hover{
text-decoration:none;
color: yellow;
}
.blockspoiler2{
margin-top: 0;
background: #cad8d0;
padding: 10px;
width: 100%;
text-align:justify;
font-size:14px;
margin-top: 20px;
;
color: #000;
}

Качаем сам вв код!

Пример этого спойлера!

Плюсик не забудь!