Цитата, спойлер, код - оформление

Не успели вы соскучится, как я тут, как тут. Хочу довести до ума цитату, спойлер и код (phpbb2).

Без скриптов (просто стандартными настройками) они выглядят так.



Чего я хочу достичь. Закругленных краев, обводки, цвета (или даже фона) заливки - все в одном стиле.

Края я закругляла так:

Код:

/*Края кода*/
.code {
border-radius: 5px;

border-color: #856340 !important;
}
/*Края спойлера*/
.spoiler_content {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

border-color: #856340 !important;
}
/*Края цитат*/
.quote {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

border-color: #856340 !important;
}

Получилось вот что


У спойлера почему-то обводку и круглые края видно только когда его откроешь. А у кода получилась какая то странная обводка.


Помогите, пожалуйста, в следующем:
1. Сделать равномерные отступы текста цитаты/кода/спойлера от обводки.
2. Обводку распространить и на сами слова "Цитата"/"Спойлер"/"Код", примерно так

3. Ну и чтобы все было можно менять, цвет шрифта, обводки, размеры отступов, закругленности.

Буду очень благодарна!

Попробуйте заменить ваши коды на это

Код:

/*Оформление цитаты*/
.quote{
background-color:#EAE1D1;
color:#622A06;
font-size:12px;
line-height:1.4em;
padding:5px 5px 5px 30px;
border-style:none !important;
}

/*Фон и рамка вокруг кода и цитаты*/
.postbody div table{
background-color:#EAE1D1;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:#856341 1px solid;
padding:3px;
}

/*Шрифт, фон окна Код*/
.code div {
background-color:#EAE1D1;
color:#622A06;
}
.code {
background-color:transparent !important;
border-style:none !important;
}

/*скрытая и открытая части спойлера*/
.spoiler_content,.spoiler_closed{
background-color:#EAE1D1;
color:#622A06;
padding:6px;
border-style:none !important;
}

Домовой, просто шикарно!



Только вот спойлер в закрытом виде слишком широк. Это можно исправить?

Попутно спрошу, ибо в тему. У меня спойлер с телефона не открывается (опера-мини для андроида), это моя проблема (моего телефона), глюк или нерешаемый вопрос нашего сервиса? Хочется эту проблему решить как-то.

Маргаритка пишет:
Только вот спойлер в закрытом виде слишком широк. Это можно исправить?

Последний код

Код:

/*скрытая и открытая части спойлера*/
.spoiler_content,.spoiler_closed{
background-color:#EAE1D1;
color:#622A06;
padding:6px;
border-style:none !important;
}

замените на этот

Код:

.spoiler_content{
background-color:#EAE1D1;
color:#622A06;
padding:6px;
border-style: none !important;
}
.spoiler_closed{
border-style: none !important;
height:0px;
}

Домовой пишет:Последний код

Код:

/*скрытая и открытая части спойлера*/
.spoiler_content,.spoiler_closed{
background-color:#EAE1D1;
color:#622A06;
padding:6px;
border-style:none !important;
}

замените на этот

Код:

.spoiler_content{
background-color:#EAE1D1;
color:#622A06;
padding:6px;
border-style: none !important;
}
.spoiler_closed{
border-style: none !important;
height:0px;
}

Просто отлично получилось! Спасибо огромное, я прямо в неоплатном долгу

А тот вопросик про неоткрывающийся спойлер? *робко*

Это не ко мне

Домовой, а куда это вставлять?

Наталик пишет:Домовой, а куда это вставлять?

Это коды CSS, соответственно они ставятся в CSS