Neverlok

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

В теме 4 сообщения

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

Screenshot_4.png

Screenshot_7.png

Screenshot_5.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ID: 3   Опубликовано (изменено)

Модифицированный спойлер для 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; }

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

Безымя.png

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

Изменено пользователем benix
Neverlok понравился пост

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!


Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.


Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу