Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.191.202.48
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
CSS. Дорабатываем UCOZ'овский спойлер.
Сообщение оставлено 02.05.2011 в 22:41:20 | Сообщение #1

Не для кого наверное не секрет, а если для кого секрет - то сейчас я его вам открою, что на 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;  
}

Меняем его на этот:

/* ---------------------------------- *  
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;}

Как вы заметили он собран под белый шаблон.
Сильно не пинать за дубли в коде, в css я еще не силен. Только начал розбиратся.
 
 
   
Сообщение оставлено 05.05.2011 в 15:11:39 | Сообщение #2
Прикольно,Лови +
 
 
   
Сообщение оставлено 12.05.2011 в 01:42:39 | Сообщение #3
спс..лови +
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика