Красивый Spoiler

[VoprosIPB]

Здравствуйте,

 

1. Помогите, пожалуйста, заменить стандартный куций некрасивый спойлер! Проблема ещё и в том, что в кнопку стандартного спойлера не влезает всё русское слово - Show = 4символа, а Показать или Развернуть - 8 и 10 символов - оба не влезают в кнопку Помогите заменить на вот такой симпатичный и аккуратный и без проблем с подписями кнопки...

 

2. Также не всегда радует, что спойлер на всю ширину форума фигачит свою строку - когда он закрыт - выглядит как какая-то разделительная полоса, которая зачастую там абсолютно не нужна и вообще неуместна. Было бы здорово, чтобы была просто кнопка либо "Показать/Развернуть", либо кнопка вида "[+]", БЕЗ длинной полоски на новой строке во всю ширину форума. При нажатии чтобы работало также - в этом месте раздвигался скрытый текст.

 

Может кто-нить с этим помочь?

[habahaba]

Какая у вас версия форума?

[Arhar]

все очень просто, берем ставим тот что со скрина (который украден с torrents.ru) и изменяем в css его дизайн

[VoprosIPB]

Версия IPB 3.12

 

Что куда откуда берём и ставим совершенно непонятно!

И ничего не крадено, это же скрин...

[Arhar]

спойлер оттуда украден, об этом сказано в описании мода для 2.х

[VoprosIPB]

Уважаемый, Вы наверняка профи в этом, а я нет, поэтому - пожалуйста, объясните подробно...

Как сделать на 3.12: 1) такой красивый спойлер по-шагово; 2) как сделать то что описано в первом топике п.2 ?

[Arhar]

по 3.1 эксперт у нас Ritsuka

а по 2 пункту - смотря как реализован 1

вероятно Ritsuka скажет сразу все вместе и правильно

[Ritsuka]

Спойлеры в тройке сделаны без единой строки кода в скриптах. Сам html-код замены спойлера лежит в одноименном бб-коде:

<div class='bbc_spoiler'>
   <span>Spoiler</span> <input type='button' class='bbc_spoiler_show' value='Show' />
   <div class='bbc_spoiler_wrapper'><div class='bbc_spoiler_content' style="display:none;">{content}</div></div>
</div>

 

Обработчик нажатий - простой JS-код:

<script type="text/javascript">
   document.observe("dom:loaded", function(){
       $$('.bbc_spoiler_show').find( function( elem ) {
           elem.addClassName( 'button page-button' ).setStyle( { 'font-size' : '12px', 'padding': '5px' } );
           elem.observe('click', _fireSpoiler );
       } ) } );

   function _fireSpoiler(e)
   {
       button = Event.element(e);

       Event.stop(e);
       var returnvalue = $(button).up().down('.bbc_spoiler_wrapper').down('.bbc_spoiler_content').toggle();

       if( returnvalue.visible() )
       {
           $(button).value = ipb.lang['spoiler_hide'];
       }
       else
       {
           $(button).value = ipb.lang['spoiler_show'];
       }
   }
</script>

 

Т.е. вы можете менять внешний вид всего этого безобразия при выполнении двух условий:

- у кнопки остается класс bbc_spoiler_show

- вверх -> вниз -> вниз по дереву DOM находятся блоки с классами bbc_spoiler_wrapper и bbc_spoiler_content.

 

Не рекомендую редактировать сам шаблон замены, лучше обратитесь к шаблону стиля ipb_common.css. Там есть строки:

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

 

Сделать что-то, похожее на скриншот, поможет такой код:

 

div.bbc_spoiler    {  border: 1px solid #999; margin: 10px 0; padding: 0; background: #ddd;  }
div.bbc_spoiler span     {  display: none;  }
div.bbc_spoiler_wrapper  {  margin: 0; padding: 0;  }
div.bbc_spoiler_content  {  border-top: 1px solid #999; background: #eee; padding: 5px; }
input.bbc_spoiler_show   {  border: 0; background: transparent; width: 100%; font-size: .7em; margin: 0; padding: 0; height:20px; text-align: left; }

[idTails]

Фуууу... Всё уже сделано ^____^

http://cyber-systems.org/topic/11941-bb-коды-в-разработке/page__st__20__p__116665#entry116665

[Arhar]

фуууу... внедрение в код в тройке )))

[idTails]

Да, разодрали )))

[VoprosIPB]

Спасибо за ссылку! Отличный спойлер, хорошая работа!

 

Одно хочу уточнить - "В CSS стиля добавить:"

В какой конкретно файл, ipb_styles.css ? Или другой?

Добавлять в конец или начало?

 

 

И можно ли как-то в контексте того замечательного спойлера от Tails добавить возможность п.2 - чтобы не было полосы на всю ширину темы, а только кнопка ?

[idTails]

ipb_styles.css

Ну, в конец добавь...

 

П2 > ксс > делай как хочешь.

[VoprosIPB]

П2 > ксс > делай как хочешь.

Я не профи в вебе, не могу сделать сам... помоги, пожалуйста, если не сложно...

 

Нужно просто чтобы была кнопка вида [+] или с текстом, но без строки во всю ширину форума...

При нажатии также разъезжался блок текста ниже этой кнопки.

Кнопку чтобы можно был оставить в конце текста, без перехода на новую строку.

Выглядеть должно примерно так:

Такая вот информация. [+]

или

Такая вот информация. [развернуть]

[Arhar]

строка она из-за border, если делать border: 0, то не будет

[VoprosIPB]

Криво работает, выглядит совсем не так, как заявлено и как нужно!

Из такого кода сообщения:

тестслово1 [csnspoiler='заголовок']текст в спойлере[/csnspoiler] тестслово2

Получается:

Помогите разобраться...

Изменено 18 Октября 2010 пользователем VoprosIPB

[idTails]

Криво - потому что КСС нет. Видно же. Это во-первых.

А во-вторых - ббкод добавлять нужно не "тупо" копипастом, а думать! Потому что цитирую название темы:

(BB-Коды) В разработке. Тема представляет собой сборник идей и разработок для BB-Кодов

 

И если хоть немного почитать КСС, то видно, что картинки берутся с нашего сервера:

.bbc_csnSpoiler_minus{background-image: url(http://cyber-systems.org/public/style_images/cso_interface_0002/bullet_toggle_minus.png);}
.bbc_csnSpoiler_plus{background-image: url(http://cyber-systems.org/public/style_images/cso_interface_0002/bullet_toggle_plus.png);}

И, естественно, ссылки нужно заменить на СВОИ.

И вообще, по хорошему, тема поддержки находится ТАМ, а не тут...

Изменено 18 Октября 2010 пользователем idTails

[VoprosIPB]

Сам не умею кодить веб - тк не разбираюсь в этом.

Но ссылки разумеется заменил, не идиот.

Не работал... использовал код из CSN Spoiler 1.1...

Утром заработал! Хотя ничего не трогал со вчера!

Видимо то ли стиль не перезагрузился, то ли не применился...

В общем со стандартным спойлером CSN всё ок!

 

idTails

Большое Спасибо!

 

 

Но пока так и не получается сделать п.2.

Пробовал по совету Arhar сделать border:0 - пофиг, блок спойлера всё равно на всю строку...

 

Посмотрите скрин, пожалуйста... как сделать так как там написано?

Чтобы:

а) перед спойлером не было перехода на новую строку;

б) кнопка-заголовок спойлера по ширине была НЕ на всю ширину строки, а только в ширину текста заголовка или только сама кнопка [+].

Изменено 19 Октября 2010 пользователем VoprosIPB

[idTails]

Переделаю под тебя

 

Но пока так и не получается сделать п.2.

Пробовал по совету Arhar сделать border:0 - пофиг, блок спойлера всё равно на всю строку...

 

Нет, если его делать без переноса - то теряется сама структура спойлера.

То есть, он немного не так будет функционировать.

 

Это БЕЗ серой полосы, т.е. идёт транспарент:

.bbc_csnSpoiler{}
.bbc_csnSpoiler_button{background-color:transparent;border:0;border-left:0;}
.bbc_csnSpoiler_show{background-color:transparent;background-repeat:no-repeat;background-position:0 50%;border:0;text-align:left;width:100%;padding-left:12px;}
.bbc_csnSpoiler_minus{background-image: url({style_images_url}/bullet_toggle_minus.png);}
.bbc_csnSpoiler_plus{background-image: url({style_images_url}/bullet_toggle_plus.png);}
.bbc_csnSpoiler_wrapper{}
.bbc_csnSpoiler_content{border:0;border-top:0;border-left:0;padding:5px;}

 

Можешь ещё поменять

.bbc_csnSpoiler{}

на

.bbc_csnSpoiler{display:inline-block;}

Но тогда теряется структура.

[VoprosIPB]

Спасибо огромное!

 

Хотя всё же несовсем то, что хотел... вот сам доделал уже немного разобравшись...

.bbc_csnSpoiler{display:inline-block;}
.bbc_csnSpoiler_button{background-color:transparent;border:0;border-left:0;}
.bbc_csnSpoiler_show{background-color:#ddd;background-repeat:no-repeat;background-position:0 50%;border:1px solid #aaa;text-align:left;width:100%;padding-left:12px;}
.bbc_csnSpoiler_minus{background-image: url({style_images_url}/bullet_toggle_minus.png);}
.bbc_csnSpoiler_plus{background-image: url({style_images_url}/bullet_toggle_plus.png);}
.bbc_csnSpoiler_wrapper{}
.bbc_csnSpoiler_content{border:1px solid #aaa;border-top:0;border-left:2px solid #aaa;padding:5px;}

Преимущества:

а) нет непонятно нахрен нужного длинного блока на всю ширину форума - зачем он?! только дизайн портит!

б) спойлер можно вставлять прямо в текст - по-сути получается аля "сноска" которую можно добавить к любому слову, термину и при желании сразу тут же развернуть! чоень удобно!;

в) кнопка нормально выделена - не пропустишь.

г) минус только один - если не написать "Заголовок" {option}, то не получается только кнопка [+], а весь текст лезет на кнопку... имхо это недоработка, приходится ставить пробел, хотя он на кнопке не нужен:

[csnspoiler=' ']

имхо нужно доработать - если опция пустая - чтобы нормально отображалась кнопка [+]

 

 

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

Кто вообще тот форум развивает? Много что там понравилось.

Изменено 19 Октября 2010 пользователем VoprosIPB

[idTails]

а) нет непонятно нахрен нужного длинного блока на всю ширину форума - зачем он?! только дизайн портит!

Хм... А как ты представляешь собой целый абзац в спойлере?

б) спойлер можно вставлять прямо в текст - по-сути получается аля "сноска" которую можно добавить к любому слову, термину и при желании сразу тут же развернуть! чоень удобно!;

Спойлер - это спойлер. Сноска - это сноска. Для сноски можно использовать акроним, по сути - всплывающая подсказка.

в) кнопка нормально выделена - не пропустишь.

Ну это да

г) минус только один - если не написать "Заголовок" {option}, то не получается только кнопка [+], а весь текст лезет на кнопку... имхо это недоработка, приходится ставить пробел, хотя он на кнопке не нужен:

Заголовок необходим. Он прописан в самом хтмл-замене.

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

Это КСС.

Кто вообще тот форум развивает? Много что там понравилось.

Я и мои друзья. Это экспериментальный проект.

Мы собираем и создаём различные идеи и их реализовываем

Изменено 19 Октября 2010 пользователем idTails

[VoprosIPB]

Спойлер - это спойлер. Сноска - это сноска. Для сноски можно использовать акроним, по сути - всплывающая подсказка.

Не, сноска - это сноска, а всплывающая подсказка... совсем другое

Сноска может быть очень большой и содержать ссылки, которые нужно нажимать итд.

Ну полноценный Spoiler, просто мне лично не нравится длинная бандура во всю ширину форума.

 

Большое спасибо за всю помощь!

 

Кстати было бы круто сделать закруглённые углы... наверно это какой-то параметр в CSS?

Изменено 19 Октября 2010 пользователем VoprosIPB

[idTails]

Да

http://border-radius.com/

 

Сноска может быть очень большой и содержать ссылки, которые нужно нажимать итд.

Я тебе там ссылку указал. Видел?

[VoprosIPB]

Видел, конечно, ссылку...

Видел как ты называешь "сноску" - только это фоременный windows-balloon-tip... всплывающая подсказка...

Когда нужно впихнуть в СНОСКУ пару абзацев... такая штука уже не катит.

Хотя должен признать - твой balloon-tip выглядит замечательно!

 

=============================================

Ну вписал да закругление 2, получил код:

border-radius: 2px;

Пробовал вставлять код куда только можно - нихрена не выходит или даже портится...

Ну не разбираюсь я в вебе! Объясни на примере куда вписывать - отдельным блоком или в border???

[idTails]

Видел как ты называешь "сноску" - только это фоременный windows-balloon-tip... всплывающая подсказка...

Нет, называю я это "пузырьком". Собственно, в той теме кк раз я об этом и говорю

Когда нужно впихнуть в СНОСКУ пару абзацев... такая штука уже не катит.

Тогда это акроним с расшифровкой

Знаешь, что такое акроним?

Кстати, пузырёк вроде как мой должен поддерживать пар небольших абзацев с бб-кодами

Поэтому я его и привёл в пример.

Хотя должен признать - твой balloon-tip выглядит замечательно!

Пасиба

Ну не разбираюсь я в вебе! Объясни на примере куда вписывать - отдельным блоком или в border???

Я тебе в ЛС отправил некоторую часть кода.

А вот вторая:

a.bbc_url{-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}

Добавляешь это в ipb_styles.css

 

Мне не нравятся когда сами не хотят разобраться.

Не разочаровывай меня

Изменено 19 Октября 2010 пользователем idTails