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

[Likan_TM]

Возможно ли добавить к спойлеру следующий функционал: чтобы при раскрытии спойлера внизу появлялась ссылка для сворачивания (например, "свернуть"). Данная вещь будет весьма удобна при скрытии под спойлер больших объемов текста.

[PPK]

Можно ..

[TEK]

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

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

[spoiler=ТУТ ТВОЁ НАЗВАНИЕ или скриншот(лого)]тут твоя инфа[/spoiler]

ПРИМЕР-смотрим в самой теме по сылке (отображение спойлера)

было бы неплохо такая модернизация спойлера

[serrrios]

Для этого надо чтоб была обработка бб-кодов, а как уже сказали в 4ом посте, не будет =(

[TEK]

Для этого надо чтоб была обработка бб-кодов, а как уже сказали в 4ом посте, не будет =(

зря конечно - значит будем пытаться мудрить

[guru3000]

Будет ли выложена новая версия спойлера со всеми доработками которые используются в торрент-треккере? (ну там минусик в конце спойлера)

[PPK]

Не знаю, нужен ли?, плюсик/минусик в конце можно конечно , а вот fancybox и т.д. - если только отдельной веткой этот мод спойлера обозначить.

[filosof]

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

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

[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]

Я из всего этого обнаружил только возможность вставлять картинку вместо "Скрытый текст" и т.д. - если имелось ввиду именно это - то пока не планируется.