Простая красивая цитата

[Serifa]

Камрад Zoltan с форума на борде подсказал. Работает на любом движке, хотя на борде нужен скрипт. А для SMF  скрипта не надо, просто добавляется внизу index.css  код:

Код Выделить Развернуть

.quoteheader {
padding-left:40px;
color:grey;
font-size:10px;
border: 1px dashed black;
-moz-border-radius:25px 12px;
-webkit-border-radius:25px 12px;
border-radius:25px 12px;
width:350px;}
blockquote {
color:white;
font-style:italic;
border:2px solid grey;
background: #18181a;
padding: 5 15 5;
text-shadow:black 0px 1px 0px;
-moz-border-radius:13px 35px;
-webkit-border-radius:13px 35px;
border-radius:13px 35px;}

Я просто вставила в самый низ css, ничего больше нигде не меняла.
Расцветку правите под себя. (Добавила, как выглядит "шаблонный" код на темном фоне).

[chilly86]

нащёт "простая" я бы поспорил
а так ваще няшно 

[Serifa]

А плюсик мне поставить, а?)

[chilly86]

А плюсик мне поставить, а?)

Zoltan пущай региццо, с удовольствием поставим плюсеги

[GeorG]

А плюсик мне поставить, а?)

Лови... Шикарная цитата.

[david.xard]

Если тема не дефолтная, то добавлять сюда? forum/Themes/MYTheme/css/index.css

[Serifa]

У меня несколько тем оформления, везде добавила в css/index.css, в самый низ.

[david.xard]

Поставил - непонравилось. Залил назад ориг.css - цитаты остались вашего вида. Как вернуть?

[chilly86]

кеш?

[david.xard]

Так вроде почистил. Даже по фтп его вручную удалил (я про кэш)

Ладно, не суть важно. Оставлю пока. Как фон изменить? Где на скрине он оранжевый, по дефолту он серый. Третья строка? Если да, то можно grey заменить не на blue например, а на код цвета?

[Serifa]

Так вроде почистил. Даже по фтп его вручную удалил (я про кэш)
Ладно, не суть важно. Оставлю пока. Как фон изменить? Где на скрине он оранжевый, по дефолту он серый. Третья строка? Если да, то можно grey заменить не на blue например, а на код цвета?

Так это... камрад, ты код-то смотри. Там цвета все прописаны. Заменяй на свои, делов-то. Конечно, подобрать цвет к оформлению форума непросто. Я оранжевую цитату делала ТРИ ЧАСА! Убилась просто. Открыла Гимп и подбирала цвета там. Сначала весь синий спектр попробовала, потом что-то меня дернуло перейти к оранжевому. Так стало гораздо лучше) пока самой нравится.

Но если тебе очень надо, я тебе цвета подберу. Примерно, конечно. Зайду на твой форум, открою Gimp...

[david.xard]

Да я и сам фотошопом владею неплохо. Мне нужно просто точно знать что за что отвечает (верхняя цитата кого комментируем меня устраивает):
blockquote {
color:white; -?
font-style:times new roman; - шрифт сменил
border:2px solid grey; -?
background: #03c6fe; -?
padding: 5 15 5;
text-shadow:black 0px 0px 0px; - убрал тень - нечитабельно было
-moz-border-radius:13px 35px;
-webkit-border-radius:13px 35px;
border-radius:13px 35px;}

Там где знаки ? можно пояснить где фон, обводка рамки и сам цвет текста? Спасибо.

[Serifa]

Это часть отвечает за верхний овал, где слово "цитата":

Код Выделить Развернуть

    .quoteheader {
    padding-left:40px;
    color:grey; - цвет шрифта
    font-size:10px; размер шрифта
    border: 1px dashed black; бордер вокруг овала
    -moz-border-radius:25px 12px;
    -webkit-border-radius:25px 12px;
    border-radius:25px 12px;
    width:350px;} длина овала, фиксированная


А эта часть отвечает за нижний овал, где сам текст цитаты:

Код Выделить Развернуть

    blockquote {
    color:white; цвет текста
    font-style:italic; гарнитура
    border:2px solid grey; бордер вокруг овала
    background: #18181a; цвет заливки внутри овала
    padding: 5 15 5;
    text-shadow:black 0px 1px 0px; тень текста
    -moz-border-radius:13px 35px;
    -webkit-border-radius:13px 35px;
    border-radius:13px 35px;}

Я тень не убирала, на светлой фоне светлый цвет тени делает буквы более четкими. У меня пока светлый диз на форуме, и цитаты тоже светлые.

[david.xard]

background: #18181a; цвет заливки внутри овала - у меня стоит цвет синий, а заливается все равно по-дефолтной теме.

[Serifa]

Но заливка-то на скрине голубая, или светло-синяя, а в дефолте она темная, почти черная. Что не так?

[david.xard]

У меня прописан такой цвет: 

А отображается как выше я выложил. Не заливается фон нижнего блока нужным мне цветом.

[0daliska]

А если найти в index.css такой стиль?

Код Выделить Развернуть

blockquote.bbc_standard_quote {
    background-color: #D7DAEC;
}
и заменить на:

Код Выделить Развернуть

blockquote.bbc_standard_quote {
    background-color: #03c6fe;
}
или просто дописать, если такого вдруг нет?

[david.xard]

Спасибо. Помогло. Но все равно не до конца то, что нужно.
У меня

Код Выделить Развернуть

blockquote {
color:white;
font-size:12px;
font-style:impact;
border:2px solid grey;
background: #36bdea;
padding: 5 15 5;
text-shadow:black 0px 0px 0px;
-moz-border-radius:13px 35px;
-webkit-border-radius:13px 35px;
border-radius:13px 35px;}

А выглядит так: (шрифт не белый, а черный, и сам он не impact а другой, и размер тоже не 12 - этот параметр я сам вставил - должен ведь работать?)

[0daliska]

Используйте Firebug!!
По дефолту стили:

Код Выделить Развернуть

blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    background: url("../images/theme/quote.png") no-repeat scroll 0.1em 0.1em transparent;
    border-bottom: 2px solid #9999AA;
    border-top: 2px solid #9999AA;
    color: #000000;
    font-size: x-small;
    line-height: 1.4em;
    margin: 0.1em 0 0.3em;
    overflow: auto;
    padding: 1.1em 1.4em;
}
сделайте все, что Вам нужно с учетом этого!!!!!

[Xansen]

text-shadow:black 0px 1px 0px;
у меня из-за этой тени буквы сливаются... убрал - получше стало!

[david.xard]

0daliska,
спасибо. А как шрифт еще бы сюда впихнуть? Добавление font-style:impact; ничего не дает.

[0daliska]

а font-style:impact; и не может ничего дать:
http://htmlbook.ru/css/font-style
посмотрите, что можно задать...

normal -    Обычное начертание текста.
italic -     Курсивное начертание.
oblique -     Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
inherit -     Наследует значение родителя.

А impact - это, скорее всего,  к font-family относится...
http://htmlbook.ru/css/font-family

[david.xard]

Спасибо, лисичка) Фонт-фэмили то что нужно)

[Serifa]

Замечено, что на версии 2.0.7 эта штука уже не срабатывает. Пришлось немного видоизменить:

Берем default/css/index.css
Ищем там /* Some BBC related styles и подставляем вместо того, что есть там, вот это новое:

Код Выделить Развернуть

/* Some BBC related styles.
------------------------------------------------------- */

/* A quote, perhaps from another post. */
.quoteheader {
border: 1px dashed black;
-moz-border-radius:25px 12px;
-webkit-border-radius:25px 12px;
border-radius:25px 12px;
width:350px;
}

blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{font-size: x-small;
color: #000;
border:2px solid #fff;
padding: 5px 10px 5px;

-moz-border-radius:13px 35px;
-webkit-border-radius:13px 35px;
border-radius:13px 35px;
}

/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
background-color: #E3E9F5;
}
blockquote.bbc_alternate_quote
{
background-color: #e7eafc;
}

Ну, цвета и прочие украшательства подбираем под себя.

[Fotorobot]

Как поправить по левую сторону?

[GeorG]

А что с ней не так?

[Fotorobot]

На старой версии SMF смотрелось как бы красивее когда было все вровень. ИМХО

[Serifa]

Точно! Я тоже заметила, что в новой версии цитата получается с отступом. Но сколько ни смотрела в цсс, не увидела причины( Кто знает?

[GeorG]

Попробуйте добавить:

Код Выделить Развернуть

blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
margin-left: 0;
}
Ну или какое-то свое значения в пикселях, вместо нуля.

p.s. Но как по мне, то с отступом лучше.

[Serifa]

Попробуйте добавить...

Заработало!! GeorG, и почему ты такой умный?
С этим отступом цитата выглядит иногда совсем скукоженной, особенно если попадает в блок портала на главной.

[Silovvasya]

Замечено, что на версии 2.0.7 эта штука уже не срабатывает. Пришлось немного видоизменить:

Спасибо Вам, установил новые изменения.
Работает отлично на 2.0.13
Ладыжинский форум
http://ladyzhin.xyz
Очень доволен    

[laraine98]

А тяжело вообще научиться html?

[GeorG]

Легче чем защитить диплом по ядерной физике.

[Сан]

А тяжело вообще научиться html?

Легче чем защитить диплом по ядерной физике.

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