Суббота, 18.11.2017, 09:00
Приветствую Вас Гость

Дневник программиста

Меню сайта
Рекламка
Форма входа
Категории раздела
Информационные технологии [11]
Все, что касается IT
Гараж [12]
Категория содержит в себе темы, которые так или иначе связаны с моим авто.
Стройка [3]
Школа ремонта.
Кодинг и дизайнинг [10]
Дача [1]
Наш опрос
Какая операционная система у Вас установлена?
Всего ответов: 176
Погода
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » 2009 » Декабрь » 9 » CSS. Дорабатываем UCOZ'овский спойлер напильником.
CSS. Дорабатываем UCOZ'овский спойлер напильником.
00:46

Не для кого наверное не секрет, а если для кого секрет - то счас я его вам открою, что на ucoz'е уже поддерживаются спойлеры. Для чего, собственно, имеется специальный BB-код

Code
[spoiler][/spoiler]

А значит многие из тех, кто пользовался "самописными" спойлерами, использующими эту же кодовую последовательность, скорее всего вдруг обнаружили что их красивые спойлеры превратились примерно вот в это:

Лично меня такой вариант несколько не устроил. Сначала я хотел было изменить кодовую последовательность в своем спойлере - идея глупая! Зачем что то городить, когда можно использовать то, что уже есть. В сорсах страницы можно разглядеть, что у всех элементов спойлера разрабы заботливо задали классы css стилей. Грех их не заюзать! И так, предлагаю вам свой вариант спойлера, полученного из стандартного путем "разукрашивания":

Ну и собственно CSS:

Code
/* ---------------------------------- *
  Spoiler
  * ---------------------------------- */
.uSpoilerClosed
{
  border : thin ridge #F0F0F0;  
  padding-left : 0px;  
  padding-right : 0px;  
  margin-left : 20px;  
  margin-right : 40px;  
}

.uSpoilerOpened
{
  border : thin ridge #F0F0F0;  
  padding-left : 0px;  
  padding-right : 0px;  
  margin-left : 20px;  
  margin-right : 40px;
}

.uSpoilerClosed .uSpoilerButBl
{
  padding-left : 15px;  
  background-image : url('http://diary.3dn.ru/images/plus.gif');  
  background-color : #2C2C2C ;
  background-repeat: no-repeat;  
  background-position:12 3;  
  display:block;  
  cursor: pointer;
}

.uSpoilerOpened .uSpoilerButBl
{
  border-bottom : thin ridge #F0F0F0;
  padding-left : 15px;  
  background-image : url('http://diary.3dn.ru/images/minus.gif');  
  background-color : #2C2C2C ;
  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:#FFFFFF;
  font-size:13px;
  font-weight:bold;
}
.uSpoilerText
{
  padding-left : 40px;
  padding-right : 20px ;
}


Сильно не пинать за дубли в коде, в css'ах я еще не силен. Только начал разбиратся.

Категория: Кодинг и дизайнинг | Просмотров: 2205 | Добавил: allknower | Теги: css | Рейтинг: 5.0/2 |
Всего комментариев: 7
7  
я как у олега сделал

5  
а куды вставлять

6  
Панель управления -> Редактор страниц -> Управление дизайном модуля.
В списке выбрать "Таблица стилей (CSS)".
Добавить стили и нажать кнопу "Сохранить".
Хотя для юзерских css удобнее сделать отдельный файлик и подключить его в основном, типа:
@import относительный_или_абсолютный_путь_к_файлу_css

4  
Почта-то у меня поставилась?)
oc-25@mail.ru
Не сочтите за спам пожалуйста, просто добавьте его в тот комментарий.

3  
Спасибо больше, с вашей помощью я быстрее обучился некоторым хитростям css.
Но вот вариант без пробелов, я думаю он гораздо удобнее=)
[code]/* Spoiler */
.uSpoilerClosed {border:thin ridge #F0F0F0;padding-left:0px;padding-right:0px;margin-left:20px;margin-right:40px;}
.uSpoilerOpened {border:thin ridge #F0F0F0;padding-left:0px;padding-right:0px;margin-left:20px;margin-right:40px;}
.uSpoilerClosed .uSpoilerButBl {padding-left:15px;background-image:url('http://diary.3dn.ru/images/plus.gif');background-color:#2C2C2C;background-repeat:no-repeat;background-position:12 3;display:block;cursor:pointer;}
.uSpoilerOpened .uSpoilerButBl {border-bottom:thin ridge #F0F0F0;padding-left:15px;background-image:url('http://diary.3dn.ru/images/minus.gif');background-color:#2C2C2C;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:#FFFFFF;font-size:13px;font-weight:bold;}
.uSpoilerText {padding-left:0px;padding-right:20px;}
/* --------- */[/code]

Я его немножко поменял кажется... С таким тегом спойлер можно изменить вдоль и поперёк, нужно лишь добавить всякие там border'ы, color'ы, background'ы... пишите на почту, если есть вопросы.


2  
Всегда пожалуйста! yes

1  
Спасибо прикольная вещь !

Имя *:
Email:
Код *:
Облако тегов
Поиск
Календарь
«  Декабрь 2009  »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031
Архив записей
Donate
Если вам понравилось что-либо на этом сайте, вы можете поддержать проект монетой R232680452748 Z159687761685 или добрым словом:
[ Обратная связь ]