Изменение спойлера IPB 3.4.9

[Neverlok]

Здравствуйте, подскажите как я могу изменить внешний вид спойлера, чтобы не было вот такой рамки вокруг него пока его не откроют, и чтобы эта рамка появлялась указывая текст спойлера когда его откроют. Как убрать надпись спойлер рядом, и видоизменить кнопку показать.
 

[poduna]

ссылку дай

[benix]

Модифицированный спойлер для IPB 3.4 (универсальный 2v1)

1. Внешний вид - Содержимое сообщений - Управление BB-кодами

Меняете параметры Спойлера на следующие:

Пример использования:

[spoiler=Название]Текст внутри[/spoiler]

Использовать опции в теге? - Да
Опция не обязательна? - Да
Поменять option и content местами? - Нет
Предотвращать обработку внутренних кодов? - Нет

Шаблон замены BB-кода

<div class='bbc_spoiler clearfix'>
    <input type='button' class='bbc_spoiler_show' value='Показать' style="float:right;" /><span class='spoiler_title clearfix'>Спойлер: {option}</span>
    <div class='bbc_spoiler_wrapper'><div class='bbc_spoiler_content clearfix' style="display:none;">{content}</div></div>
</div>

2. Внешний вид - Ваш стиль - ipb_common.css

div.bbc_spoiler 		{	 }
div.bbc_spoiler span.spoiler_title	{ 	font-weight: bold; }
div.bbc_spoiler_wrapper	{ }
div.bbc_spoiler_content	{ 	border: 1px inset #777; padding: 4px; }
input.bbc_spoiler_show	{ 	width: 70px; font-size: .9em; margin: 0px; padding: 0px; }

Меняете на:

div.bbc_spoiler    { background: #f3f3f3;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    border-radius: 4px;
    -moz-border-radius: 4px;
    /*margin: 0px -15px;*/
    padding: 10px 15px 10px 10px;
    color: #222; }
div.bbc_spoiler span     {  color: #000; font-weight: bold;  text-align: left; width: auto; }
div.bbc_spoiler_wrapper    {  background: #fff;
    border: 0px #ded9d9 solid;
    margin-top: 3px;
    padding: 2px;
    border-style: solid;
    border-color: inset #c6ced8;
    border-radius: 4px;
    -moz-border-radius: 4px; }
div.bbc_spoiler_content  {  padding: 5px; }
input.bbc_spoiler_show   {  font-weight: bold;
    width: 63px;
    height: 23px;
    line-height: 22px;
    font-size: 11px;
    margin: -2px 0px 0px 0px;
    padding: 0;
    float: right;
    cursor: pointer;
    background: #fff;
outline-style: none; }

Выглядеть будет так:

P.S. - Спойлер универсальный, можно использовать как с заголовком, так и без.

Изменено 11 апреля, 2017 пользователем benix

[Neverlok]

Спасибо