VoprosIPB Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 Здравствуйте, 1. Помогите, пожалуйста, заменить стандартный куций некрасивый спойлер! Проблема ещё и в том, что в кнопку стандартного спойлера не влезает всё русское слово - Show = 4символа, а Показать или Развернуть - 8 и 10 символов - оба не влезают в кнопку Помогите заменить на вот такой симпатичный и аккуратный и без проблем с подписями кнопки... 2. Также не всегда радует, что спойлер на всю ширину форума фигачит свою строку - когда он закрыт - выглядит как какая-то разделительная полоса, которая зачастую там абсолютно не нужна и вообще неуместна. Было бы здорово, чтобы была просто кнопка либо "Показать/Развернуть", либо кнопка вида "[+]", БЕЗ длинной полоски на новой строке во всю ширину форума. При нажатии чтобы работало также - в этом месте раздвигался скрытый текст. Может кто-нить с этим помочь? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
habahaba Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 Какая у вас версия форума? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Arhar Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 все очень просто, берем ставим тот что со скрина (который украден с torrents.ru) и изменяем в css его дизайн Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
VoprosIPB Опубликовано 14 Октября 2010 Автор Жалоба Поделиться Опубликовано 14 Октября 2010 Версия IPB 3.12 Что куда откуда берём и ставим совершенно непонятно!И ничего не крадено, это же скрин... Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Arhar Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 спойлер оттуда украден, об этом сказано в описании мода для 2.х Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
VoprosIPB Опубликовано 14 Октября 2010 Автор Жалоба Поделиться Опубликовано 14 Октября 2010 Уважаемый, Вы наверняка профи в этом, а я нет, поэтому - пожалуйста, объясните подробно...Как сделать на 3.12: 1) такой красивый спойлер по-шагово; 2) как сделать то что описано в первом топике п.2 ? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Arhar Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 по 3.1 эксперт у нас Ritsukaа по 2 пункту - смотря как реализован 1вероятно Ritsuka скажет сразу все вместе и правильно Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Ritsuka Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 Спойлеры в тройке сделаны без единой строки кода в скриптах. Сам 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; } VoprosIPB, siv1987 и Ruslan Andreev отреагировали на это 3 Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 Фуууу... Всё уже сделано ^____^http://cyber-systems.org/topic/11941-bb-коды-в-разработке/page__st__20__p__116665#entry116665 Ruslan Andreev и VoprosIPB отреагировали на это 2 Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Arhar Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 фуууу... внедрение в код в тройке ))) Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 14 Октября 2010 Жалоба Поделиться Опубликовано 14 Октября 2010 Да, разодрали ))) Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
VoprosIPB Опубликовано 18 Октября 2010 Автор Жалоба Поделиться Опубликовано 18 Октября 2010 Спасибо за ссылку! Отличный спойлер, хорошая работа! Одно хочу уточнить - "В CSS стиля добавить:"В какой конкретно файл, ipb_styles.css ? Или другой?Добавлять в конец или начало? И можно ли как-то в контексте того замечательного спойлера от Tails добавить возможность п.2 - чтобы не было полосы на всю ширину темы, а только кнопка ? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 18 Октября 2010 Жалоба Поделиться Опубликовано 18 Октября 2010 ipb_styles.cssНу, в конец добавь... П2 > ксс > делай как хочешь. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
VoprosIPB Опубликовано 18 Октября 2010 Автор Жалоба Поделиться Опубликовано 18 Октября 2010 П2 > ксс > делай как хочешь. Я не профи в вебе, не могу сделать сам... помоги, пожалуйста, если не сложно... Нужно просто чтобы была кнопка вида [+] или с текстом, но без строки во всю ширину форума...При нажатии также разъезжался блок текста ниже этой кнопки.Кнопку чтобы можно был оставить в конце текста, без перехода на новую строку.Выглядеть должно примерно так: Такая вот информация. [+] или Такая вот информация. [развернуть] Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Arhar Опубликовано 18 Октября 2010 Жалоба Поделиться Опубликовано 18 Октября 2010 строка она из-за border, если делать border: 0, то не будет Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
VoprosIPB Опубликовано 18 Октября 2010 Автор Жалоба Поделиться Опубликовано 18 Октября 2010 (изменено) Криво работает, выглядит совсем не так, как заявлено и как нужно! Из такого кода сообщения:тестслово1 [csnspoiler='заголовок']текст в спойлере[/csnspoiler] тестслово2Получается: Помогите разобраться... Изменено 18 Октября 2010 пользователем VoprosIPB Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 18 Октября 2010 Жалоба Поделиться Опубликовано 18 Октября 2010 (изменено) Криво - потому что КСС нет. Видно же. Это во-первых.А во-вторых - ббкод добавлять нужно не "тупо" копипастом, а думать! Потому что цитирую название темы:(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 Опубликовано 19 Октября 2010 Автор Жалоба Поделиться Опубликовано 19 Октября 2010 (изменено) Сам не умею кодить веб - тк не разбираюсь в этом.Но ссылки разумеется заменил, не идиот.Не работал... использовал код из CSN Spoiler 1.1...Утром заработал! Хотя ничего не трогал со вчера!Видимо то ли стиль не перезагрузился, то ли не применился...В общем со стандартным спойлером CSN всё ок! idTailsБольшое Спасибо! Но пока так и не получается сделать п.2.Пробовал по совету Arhar сделать border:0 - пофиг, блок спойлера всё равно на всю строку... Посмотрите скрин, пожалуйста... как сделать так как там написано?Чтобы:а) перед спойлером не было перехода на новую строку;б) кнопка-заголовок спойлера по ширине была НЕ на всю ширину строки, а только в ширину текста заголовка или только сама кнопка [+]. Изменено 19 Октября 2010 пользователем VoprosIPB Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 19 Октября 2010 Жалоба Поделиться Опубликовано 19 Октября 2010 Переделаю под тебя Но пока так и не получается сделать п.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 Опубликовано 19 Октября 2010 Автор Жалоба Поделиться Опубликовано 19 Октября 2010 (изменено) Спасибо огромное! Хотя всё же несовсем то, что хотел... вот сам доделал уже немного разобравшись....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 Опубликовано 19 Октября 2010 Жалоба Поделиться Опубликовано 19 Октября 2010 (изменено) а) нет непонятно нахрен нужного длинного блока на всю ширину форума - зачем он?! только дизайн портит!Хм... А как ты представляешь собой целый абзац в спойлере?б) спойлер можно вставлять прямо в текст - по-сути получается аля "сноска" которую можно добавить к любому слову, термину и при желании сразу тут же развернуть! чоень удобно!;Спойлер - это спойлер. Сноска - это сноска. Для сноски можно использовать акроним, по сути - всплывающая подсказка. в) кнопка нормально выделена - не пропустишь.Ну это да г) минус только один - если не написать "Заголовок" {option}, то не получается только кнопка [+], а весь текст лезет на кнопку... имхо это недоработка, приходится ставить пробел, хотя он на кнопке не нужен:Заголовок необходим. Он прописан в самом хтмл-замене.PS Пользуясь случаем, а как на твоём форуме такие красивые ссылки сделаны в округлом блоке и с подсветкой при наведении?Это КСС.Кто вообще тот форум развивает? Много что там понравилось. Я и мои друзья. Это экспериментальный проект. Мы собираем и создаём различные идеи и их реализовываем Изменено 19 Октября 2010 пользователем idTails Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
VoprosIPB Опубликовано 19 Октября 2010 Автор Жалоба Поделиться Опубликовано 19 Октября 2010 (изменено) Спойлер - это спойлер. Сноска - это сноска. Для сноски можно использовать акроним, по сути - всплывающая подсказка. Не, сноска - это сноска, а всплывающая подсказка... совсем другое Сноска может быть очень большой и содержать ссылки, которые нужно нажимать итд.Ну полноценный Spoiler, просто мне лично не нравится длинная бандура во всю ширину форума. Большое спасибо за всю помощь! Кстати было бы круто сделать закруглённые углы... наверно это какой-то параметр в CSS? Изменено 19 Октября 2010 пользователем VoprosIPB Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 19 Октября 2010 Жалоба Поделиться Опубликовано 19 Октября 2010 Даhttp://border-radius.com/ Сноска может быть очень большой и содержать ссылки, которые нужно нажимать итд.Я тебе там ссылку указал. Видел? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
VoprosIPB Опубликовано 19 Октября 2010 Автор Жалоба Поделиться Опубликовано 19 Октября 2010 Видел, конечно, ссылку...Видел как ты называешь "сноску" - только это фоременный windows-balloon-tip... всплывающая подсказка...Когда нужно впихнуть в СНОСКУ пару абзацев... такая штука уже не катит.Хотя должен признать - твой balloon-tip выглядит замечательно! =============================================Ну вписал да закругление 2, получил код:border-radius: 2px;Пробовал вставлять код куда только можно - нихрена не выходит или даже портится... Ну не разбираюсь я в вебе! Объясни на примере куда вписывать - отдельным блоком или в border??? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 19 Октября 2010 Жалоба Поделиться Опубликовано 19 Октября 2010 (изменено) Видел как ты называешь "сноску" - только это фоременный 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 Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Рекомендуемые сообщения
Присоединиться к обсуждению
Вы можете ответить сейчас, а зарегистрироваться позже. Если у вас уже есть аккаунт, войдите, чтобы ответить от своего имени.