Не для кого наверное не секрет, а если для кого секрет - то сейчас я его вам открою, что на ucoz'е уже поддерживаются спойлеры. Для чего, собственно, имеется специальный BB-код
([spoiler][/spoiler])
А значит многие из тех, кто пользовался "самописными" спойлерами, использующими эту же кодовую последовательность, скорее всего вдруг обнаружили что их красивые спойлеры превратились примерно вот в это:
Лично меня такой вариант несколько не устроил. Сначала я хотел было изменить кодовую последовательность в своем спойлере - идея глупая! Зачем что то городить, когда можно использовать то, что уже есть. В ресурсах страницы можно разглядеть, что у всех элементов спойлера заботливо задали классы css стилей. Грех их не заюзать! И так, предлагаю вам свой вариант спойлера, полученного из стандартного путем "разукрашивания":
Находим в CSS Тег SPOILER *
Code
/* ======= ========== === SPOILER */
.title_spoiler {
color: #636363;
background-color: #f2f 2f2;
border: 1px dotted #bebebe;
font-weight: bold;
padding: 5px;
}
.text_spoiler {
color: #757575;
background-color: #f2f2f2;
border: 1px dotted #bebebe;
border-top: 0;
text-align: justify;
padding: 5px;
}
Меняем его на этот:
Code
/* ---------------------------------- *
Spoiler
* ---------------------------------- */
.uSpoilerClosed
{
border: 1px #000 dotted !important; padding: 2px;
padding-left : 1px;
padding-right : 1px;
margin-left : 20px;
margin-right : 40px;
}
.uSpoilerOpened
{
border: 0px #000 dotted !important; padding: 2px;
padding-left : 3px;
padding-right : 3px;
margin-left : 20px;
margin-right : 40px;
}
.uSpoilerClosed .uSpoilerButBl
{
padding-left : 15px;
background-image : url('http://diary.3dn.ru/images/plus.gif');
background-color : #FFFFFF;
background-repeat: no-repeat;
background-position:12 3;
display:block;
cursor: pointer;
}
.uSpoilerOpened .uSpoilerButBl
{
border: 1px #000 dotted !important; padding: 3px;
padding-left : 15px;
background-image : url('http://diary.3dn.ru/images/minus.gif');
background-color : #FFFFFF;
background-repeat: no-repeat;
background-position:12 3;
display:block;
cursor: pointer;
}
.uSpoilerButton
{
cursor: pointer;
width : 100%;
border : 0px;
background-color : transparent;
text-align : left;
font-family:Verdana,Sans-Serif;
color:#1e90ff;
font-size:12px;
font-weight:bold;
}
{
padding-left : 40px;
padding-right : 20px;
}
.uSpoilerText{color: #333333; background: #ededed; font-size: 12px; border: 1px #000 dotted !important; padding: 3px;}
Все готово!
