Магазин
Правила Ответы на вопросы Конфиденциальность
Магазин
Правила Ответы на вопросы Конфиденциальность

BB2Spoiler/BB3Spoiler

Вопрос по спойлеру

Мод спойлера на аяксе для форума phpBB3
Просмотры: 5326 • 
  • Likan_TM Сообщение
    Возможно ли добавить к спойлеру следующий функционал: чтобы при раскрытии спойлера внизу появлялась ссылка для сворачивания (например, "свернуть"). Данная вещь будет весьма удобна при скрытии под спойлер больших объемов текста. ;)
  • Аватара пользователя
    PPK Сообщение
    Можно .. ;)
  • Аватара пользователя
    serrrios Сообщение
    Для этого надо чтоб была обработка бб-кодов, а как уже сказали в 4ом посте, не будет =(
    http://aniproject.ru - перспектива... велком епта..
    http://www.ppkbb3cker.ru/viewtopic.php?f=35&t=1042 - мои платные услуги по трекеру.
  • Аватара пользователя
    TEK Сообщение
    serrrios писал(а):Для этого надо чтоб была обработка бб-кодов, а как уже сказали в 4ом посте, не будет =(
    зря конечно - значит будем пытаться мудрить
  • guru3000 Сообщение
    Будет ли выложена новая версия спойлера со всеми доработками которые используются в торрент-треккере? (ну там минусик в конце спойлера) 8-)
  • Аватара пользователя
    PPK Сообщение
    Не знаю, нужен ли?, плюсик/минусик в конце можно конечно ;) , а вот fancybox и т.д. - если только отдельной веткой этот мод спойлера обозначить.
  • filosof Сообщение
    TEK писал(а):Вопрос по теме можно чтоб в названии спойлера былне только текст: была возможность отображения лого или скрина

    Код: Выделить всё

    [spoiler=ТУТ ТВОЁ НАЗВАНИЕ или скриншот(лого)]тут твоя инфа[/spoiler]
    ПРИМЕР-смотрим в самой теме по сылке (отображение спойлера)

    было бы неплохо такая модернизация спойлера
    вот что нагуглил по этому вопросу:
    Относительно спойлеров для phpbb3.
    Общий код выглядит так:

    Код: Выделить всё

    /* Code block------------------------------------------------*/
dl.codebox {
    padding: 3px;
    background-color: #ffffff; 
    border: 1px solid #C9D2D8;  
    font-size: 1em;      
    width: 60%; 
    }
dl.codebox dt {
    text-transform: uppercase;  
    border-bottom: 1px solid #CCCCCC; 
    margin-bottom: 3px;        
    font-size: 0.8em; 
    font-weight: bold;
    background-color: #fff;
    }
    Что есть что:

    dl.codebox - блок спойлера
    padding: 3px; - расстояние между границами спойлера и его содержимым
    background-color: #ffffff; - цвет фона блока
    border: 1px solid #C9D2D8; - контур блока (толщина, сплошная линия, цвет)
    font-size: 1em; - размер шрифта
    width: 60%; - ширина блока

    dl.codebox dt { - заголовок свернутого блока, надпись "Спойлер"
    text-transform: uppercase; - заголовок пишется прописными буквами
    border-bottom: 1px solid #CCCCCC; - черта, подчеркивающая заголовок "Спойлер" (толщина, сплошная линия, цвет)
    margin-bottom: 3px; - отступ снизу
    font-size: 0.8em; - размер шрифта
    font-weight: bold; - толщина шрифта (жирный)
    background-color: #fff; - цвет строки с заголовком "Спойлер"


    Для того, чтобы сделать фоном изображение, нужно добавить код:

    Код: Выделить всё

    background: url('адрес изображения') center no-repeat;
    Например, можно добавить изображение в заголовок, вместо надписи "Спойлер". Для этого в dl.codebox dt частично изменим / добавим:
    b

    Код: Выделить всё

    order-bottom: 0px solid #CCCCCC;
   background: url('адрес изображения') center no-repeat;
   color: transparent;
   height: 50px;
    где:
    border-bottom: 0px - убираем подчеркивание под заголовком "Спойлер"
    color: transparent - делаем надпись прозрачной
    height: 50px - задаем высоту заголовка

    В довершении - изменяем фон и обрамление всего спойлера.
    Теперь весь код будет выглядеть так:

    Код: Выделить всё

    dl.codebox {
   padding: 15px;
   background-color: #E1EBF2;
   border: 2px dotted #fff;
   font-size: 1em;
   width: 60%;
   }
dl.codebox dt {
   text-transform: uppercase;
   border-bottom: 0px solid #CCCCCC;
   background: url('адрес изображения') center no-repeat;
   margin-bottom: 3px;
   font-size: 0.8em;
   font-weight: bold;
   display: block;
   background-color: #fff;
   color: transparent;
   height: 50px;
   }
    Результат:



    .............................................................................................................................................................

    наш спойлер по адресу \tracker\addons\css выглядит сейчас так:

    Код: Выделить всё

    .sp-wrap			{ margin: 8px auto; }
.sp-wrap			{ width: 98%; clear: both; }
.sp-wrap .sp-wrap		{ margin: 2px auto 4px; }
.sp-wrap, .sp-head, .sp-body	{
	border: solid #C3CBD1; border-width: 1px 1px 1px 2px; clear: both;
}
.sp-body	{ padding: 2px 6px; }
.sp-head	{ text-align: left !important; }

.sp-wrap	{ padding: 0; background: #E9E9E6; }
.sp-head	{ border-width: 0; font-size: 11px; padding: 1px 14px 3px; margin-left: 6px; line-height: 15px; font-weight: bold; color: #2A2A2A; cursor: pointer; }
.sp-body	{ border-width: 1px 0 0 0; display: none; font-weight: normal; background: #F5F5F5; }

.clickable	{ cursor: pointer; }
.folded	{ display: block;
	background: transparent url(../images/spoiler/icon_plus_1.gif) no-repeat left center; padding-left: 14px; }
.unfolded	{ display: block;
	background: transparent url(../images/spoiler/icon_minus_1.gif) no-repeat left center; padding-left: 14px; }

var.postImgAligned {
	display: block;
}

img.postImg  { vertical-align: text-bottom; }
img.postImg        { margin: 2px 2px 0 0; }
img.postImgAligned { margin: 4px 4px 2px; }

.clear     { clear: both; height: 0; font-size: 0px; line-height: 0px; overflow: hidden; }
  • filosof Сообщение
    Относительно спойлеров для phpbb2.
    Общий код выглядит так:

    Код: Выделить всё

    .quote{
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 13px;
   color: #000;
   background-color: #fff;
   background: url('изображение');
   border: #000 solid 1px;
}
    Что есть что:
    font-family - используемые шрифты
    font-size: 13px - размер шрифта
    color: #000; - цвет текста
    background-color: #fff- цвет фона
    background: url('изображение'); - фоновое изображение
    border: #000 solid 1px; - контур блока (цвет, сплошная линия, толщина)

    Например.
    1) Можно задать фоновое изображение, сместить его в верхний правый угол и запретить повторять.
    2) Установить минимальную высоту блока таким образом, чтобы фоновое изображение было видно при свернутом спойлере.
    3) Задать отступ содержимого спойлера - сверху на высоту фонового изображения (чтобы они не сливались), на 5px по сторонам и 2px снизу.
    4) Убрать бордюр, назначив ему нулевую толщину
    Соответственно, добавляем / изменяем в коде:

    Код: Выделить всё

     background: url('http://i17.servimg.com/u/f17/14/67/67/89/code110.png') top right no-repeat;
   min-height: 40px;
   padding: 40px 5px 2px;
   border: #d1d7dc solid 0px;
}
    Теперь весь код будет выглядеть так:

    Код: Выделить всё

    .quote{
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 13px;
   color: #754960;
   background: url('http://i17.servimg.com/u/f17/14/67/67/89/code110.png') top right no-repeat;
   background-color: #FFFEE2;
   border: #d1d7dc solid 0px;
   min-height: 40px;
   padding: 40px 5px 2px;
}
    Результат (свернутый и развернутый спойлеры):



    ............................................................................................................................
    вопрос: подойдет ли все, что я понаписал выше, для нас?
  • Аватара пользователя
    PPK Сообщение
    Я из всего этого обнаружил только возможность вставлять картинку вместо "Скрытый текст" и т.д. - если имелось ввиду именно это - то пока не планируется. ;)

Вернуться в «BB2Spoiler/BB3Spoiler»

Time: 0.000s | Queries: 0 | Peak Memory Usage: 0.00 МБ | GZIP: Unknown | SQL Explain
Список форумов Участники темы