Перейти к содержимому


Фотография

Красивый Spoiler

Форумы IBResource

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 25
VoprosIPB
  • Участники
  • Cообщений: 64

Отправлено

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

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

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

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

habahaba
  • Участники
  • Cообщений: 356
  • http://

Отправлено

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

Arhar
  • Команда форума
  • Cообщений: 5 631

Отправлено

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

VoprosIPB
  • Участники
  • Cообщений: 64

Отправлено

Версия IPB 3.12

Что куда откуда берём и ставим совершенно непонятно!
И ничего не крадено, это же скрин...

Arhar
  • Команда форума
  • Cообщений: 5 631

Отправлено

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

VoprosIPB
  • Участники
  • Cообщений: 64

Отправлено

Уважаемый, Вы наверняка профи в этом, а я нет, поэтому - пожалуйста, объясните подробно...
Как сделать на 3.12: 1) такой красивый спойлер по-шагово; 2) как сделать то что описано в первом топике п.2 ?

Arhar
  • Команда форума
  • Cообщений: 5 631

Отправлено

по 3.1 эксперт у нас Ritsuka
а по 2 пункту - смотря как реализован 1
вероятно Ritsuka скажет сразу все вместе и правильно

Ritsuka
  • Участники
  • Cообщений: 2 437

Отправлено

Спойлеры в тройке сделаны без единой строки кода в скриптах. Сам 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
  • Участники
  • Cообщений: 753
  • Интересы:Няшное администрирование, кавайная разработка

Отправлено

Фуууу... Всё уже сделано ^____^
http://cyber-systems...665#entry116665

Arhar
  • Команда форума
  • Cообщений: 5 631

Отправлено

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

idTails
  • Участники
  • Cообщений: 753
  • Интересы:Няшное администрирование, кавайная разработка

Отправлено

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

VoprosIPB
  • Участники
  • Cообщений: 64

Отправлено

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

Одно хочу уточнить - "В CSS стиля добавить:"
В какой конкретно файл, ipb_styles.css ? Или другой?
Добавлять в конец или начало?


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

idTails
  • Участники
  • Cообщений: 753
  • Интересы:Няшное администрирование, кавайная разработка

Отправлено

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

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

VoprosIPB
  • Участники
  • Cообщений: 64

Отправлено

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

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

Нужно просто чтобы была кнопка вида [+] или с текстом, но без строки во всю ширину форума...
При нажатии также разъезжался блок текста ниже этой кнопки.
Кнопку чтобы можно был оставить в конце текста, без перехода на новую строку.
Выглядеть должно примерно так:
Такая вот информация. [+]

или

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


Arhar
  • Команда форума
  • Cообщений: 5 631

Отправлено

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

VoprosIPB
  • Участники
  • Cообщений: 64

Отправлено

Криво работает, выглядит совсем не так, как заявлено и как нужно! :(
Из такого кода сообщения:
тестслово1 [csnspoiler='заголовок']текст в спойлере[/csnspoiler] тестслово2
Получается: Прикрепленный файл  1.png   9,62К   49 скачиваний
Помогите разобраться... :(

Сообщение отредактировал VoprosIPB: 18 Октябрь 2010 - 21:17


idTails
  • Участники
  • Cообщений: 753
  • Интересы:Няшное администрирование, кавайная разработка

Отправлено

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

(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);}
И, естественно, ссылки нужно заменить на СВОИ.
И вообще, по хорошему, тема поддержки находится ТАМ, а не тут...

Сообщение отредактировал idTails: 18 Октябрь 2010 - 23:24


VoprosIPB
  • Участники
  • Cообщений: 64

Отправлено

Сам не умею кодить веб - тк не разбираюсь в этом.
Но ссылки разумеется заменил, не идиот.
Не работал... использовал код из CSN Spoiler 1.1...
Утром заработал! Хотя ничего не трогал со вчера!
Видимо то ли стиль не перезагрузился, то ли не применился...
В общем со стандартным спойлером CSN всё ок!

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


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

Посмотрите скрин, пожалуйста... как сделать так как там написано?
Прикрепленный файл  2.png   10,19К   30 скачиваний
Чтобы:
а) перед спойлером не было перехода на новую строку;
б) кнопка-заголовок спойлера по ширине была НЕ на всю ширину строки, а только в ширину текста заголовка или только сама кнопка [+].

Сообщение отредактировал VoprosIPB: 19 Октябрь 2010 - 09:58


idTails
  • Участники
  • Cообщений: 753
  • Интересы:Няшное администрирование, кавайная разработка

Отправлено

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

Но пока так и не получается сделать п.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(https://forums.ibresource.ru/public/style_images/ibr/bullet_toggle_minus.png);}
.bbc_csnSpoiler_plus{background-image: url(https://forums.ibresource.ru/public/style_images/ibr/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
  • Участники
  • Cообщений: 64

Отправлено

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

Хотя всё же несовсем то, что хотел... вот сам доделал уже немного разобравшись...
.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(https://forums.ibresource.ru/public/style_images/ibr/bullet_toggle_minus.png);}
.bbc_csnSpoiler_plus{background-image: url(https://forums.ibresource.ru/public/style_images/ibr/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 Пользуясь случаем, а как на твоём форуме такие красивые ссылки сделаны в округлом блоке и с подсветкой при наведении?
Кто вообще тот форум развивает? Много что там понравилось.

Сообщение отредактировал VoprosIPB: 19 Октябрь 2010 - 12:04





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных