Красивая цитата для вашего форума.

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Красивая цитата для вашего форума.

CabinetAdmin 16 мар 2013, 13:20 Сообщение

Изображение


Такую цитату очень просто сделать обычным способом, кучей блочных элементов <div> с присвоенными им классами и прописанным CSS.
А можно сделать тоже самое, но только с помощью CSS3.

Для начала скачивайте архив с изображениями, распаковывайте и закачивайте файлы на форум:
a-beautiful-quote.rar
(13.95 КБ) 187 скачиваний



Для prosilver

Мы не меняем стандартный bbcode цитата (шаблон bbcode.html):

Код: Выделить всё

<!-- BEGIN quote_username_open --><blockquote><div><cite>{USERNAME} {L_WROTE}:</cite><!-- END quote_username_open --> <!-- BEGIN quote_open --><blockquote class="uncited"><div><!-- END quote_open --> <!-- BEGIN quote_close --></div></blockquote><!-- END quote_close -->


Добавляем лишь новый css, в самый конец темы стиля добавляете:

Код: Выделить всё

/* Quote on CSS3 */ blockquote { font-size: 0.95em; margin: 0em 1px 0 5px; overflow: hidden; color: #797971; font-family: georgia; font-style: italic; min-height: 35px; padding: 20px; background: none; border: 0; } blockquote div { margin-top: -5px; border: 1px solid #0076B4; background: url("путь до файла/spback.png") bottom left repeat-x #FFFFFF; padding: 20px 20px 5px 30px; position: relative; } blockquote div:before { content: ''; position: absolute; background: url("путь до файла/openq.png") top left no-repeat transparent; width: 16px; height: 16px; top: 23px; left: 5px; } blockquote div:after { content: ''; position: absolute; background: url("путь до файла/closeq.png") top left no-repeat transparent; width: 16px; height: 16px; right: 5px; bottom: 5px; } blockquote div cite { font-style: normal; font-weight: bold; display: block; font-size: 0.9em; color: #fff; background: url("путь до файла/qhm.png") top left repeat-x transparent; height: 32px; line-height: 24px; position: absolute; top: -14px; text-shadow: #000000 1px 1px; left: -1px; } blockquote div cite:before { content: ''; position: absolute; background: url("путь до файла/qho.png") no-repeat 0px 0px transparent; width: 31px; height: 39px; left: -31px; top: 0px; } blockquote div cite:after { content: ''; background: url("путь до файла/qhc.png") no-repeat 0px 0px transparent; position: absolute; right: -10px; width: 10px; height: 32px; } blockquote.uncited div { padding: 10px 20px 5px 30px; } blockquote.uncited div:before { top: 15px; }


Изменить цвет текста или размер можно в блоке: blockquote {.
font-size: 0.95em; - размер
color: #797971; - цвет
font-family: georgia; - имя шрифта
font-style: italic; - начертание


Не забудьте прописать пути для изображений в css.






Для subsilver2

У стандартного subsilver2 bbcode цитата выглядит так (шаблон bbcode.html):

Код: Выделить всё

<!-- BEGIN quote_username_open --> <div class="quotetitle">{USERNAME} {L_WROTE}:</div><div class="quotecontent"> <!-- END quote_username_open --> <!-- BEGIN quote_open --> <div class="quotetitle"><b>{L_QUOTE}:</b></div><div class="quotecontent"> <!-- END quote_open --> <!-- BEGIN quote_close --> </div> <!-- END quote_close -->


В конец темы стиля добавляете:

Код: Выделить всё

/* Quote on CSS3 */ .quotetitle { background: url("путь до файла/qhm.png") top left repeat-x transparent; height: 32px; padding: 0px 20px 0px 20px; position: relative; margin: 10px 10px 0px 30px; display: inline-block; border: 0; top: 20px; left: 20px; z-index: 9; line-height: 24px; color: #fff; text-shadow: #000000 1px 1px; font-size: 0.9em; font-weight: bold; font-style: normal; } .quotetitle:before { content: ''; position: absolute; background: url("путь до файла/qho.png") no-repeat 0px 0px transparent; width: 31px; height: 39px; left: -31px; top: 0; } .quotetitle:after { content: ''; background: url("путь до файла/qhc.png") no-repeat 0px 0px transparent; position: absolute; right: -10px; width: 10px; height: 32px; } .quotecontent { margin: 0px 10px 10px 30px; padding: 20px 10px 10px 30px; border: 1px solid #0076B4; background: url("путь до файла/spback.png") bottom left repeat-x #FFFFFF; position: relative; overflow: hidden; color: #797971; font-size: 12px; font-style: italic; min-height: 35px; } .quotecontent:before { content: ''; position: absolute; background: url("путь до файла/closeq.png") top left no-repeat transparent; width: 16px; height: 16px; top: 20px; left: 5px; } .quotecontent:after { content: ''; position: absolute; background: url("путь до файла/openq.png") top left no-repeat transparent; width: 16px; height: 16px; right: 5px; bottom: 5px; }


Изменить цвет текста или размер можно в блоке: .quotecontent {.
color: #797971; - цвет
font-size: 12px; - размер
font-style: italic; - начертание


Не забудьте прописать пути для изображений в css.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Bukovka_

Re: Красивая цитата для вашего форума.

Bukovka_ 30 мар 2013, 15:58 Сообщение

Классная цитата. :Bravo: Только может стоит дописать, что в теме стиля надо удалить стандартный квоттитл и квотконтент, иначе новая цитата не захочет отображаться. :oooo:

И еще вот так получается в суперцитате :( (потому что ник - это ссылка). Не подскажете, как прописать в этой цитате вид ссылки, чтобы она тоже была белого цвета?

Изображение

Аватара пользователя
CabinetAdmin

Re: Красивая цитата для вашего форума.

CabinetAdmin 30 мар 2013, 18:29 Сообщение

Если стили добавлены в конец темы, то исполнятся будут в первую очередь будут именно они, по крайней мере должны.
Но если мало ли, почему-то форум не хочет выполнять именно эти стили, то для каждого класса можно дописать класс "родителя", для subsilver:

Код: Выделить всё

/* Quote on CSS3 */ .postbody .quotetitle { background: url("путь до файла/qhm.png") top left repeat-x transparent; ...


И для prosilver:

Код: Выделить всё

/* Quote on CSS3 */ .content blockquote { font-size: 0.95em; ...


Bukovka_ писал(а):Не подскажете, как прописать в этой цитате вид ссылки, чтобы она тоже была белого цвета?

Добавьте:

Код: Выделить всё

.quotetitle a { color: #fff; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Bukovka_

Re: Красивая цитата для вашего форума.

Bukovka_ 31 мар 2013, 00:11 Сообщение

Спасибо большое. Теперь все идеально. :Rose:

Bukovka_

Re: Красивая цитата для вашего форума.

Bukovka_ 31 мар 2013, 13:18 Сообщение

Сделала для другого стиля в красном цвете. Может кому еще пригодится.

Изображение


Обводку с синей на красную меняем в этом куске (выделено зеленым цветом)

Код: Выделить всё

.quotecontent { margin: 0px 10px 10px 30px; padding: 20px 10px 10px 30px; border: 1px solid #0076B4; /* обводку меняем на красную, например #cc0000 */ background: url("путь до файла/spback.png") bottom left repeat-x #FFFFFF; position: relative; overflow: hidden; color: #797971; font-size: 12px; font-style: italic; min-height: 35px; }
Вложения
a-beautiful-quote-red.rar
(26.29 КБ) 155 скачиваний

Аватара пользователя
silver073000

Re: Красивая цитата для вашего форума.

silver073000 05 май 2013, 01:43 Сообщение

Попробовал поставить эту цитату и обнаружил такую вещь: если написать цитату без переноса строки в таком виде

Код: Выделить всё

Косяк.[quote]Та-ра-рам[/quote]
то верхняя часть её съезжает.
Изображение

И чем длиннее текст перед цитатой, тем дальше уезжает верх этой цитаты.

Стиль subsilver2-modded.

Аватара пользователя
CabinetAdmin

Re: Красивая цитата для вашего форума.

CabinetAdmin 05 май 2013, 06:51 Сообщение

Проверил на чистом subsilver2-modded - работает.

Проверяйте установку... Если есть возможность дайте ссылку, посмотрим, может быть у вас в стиле код цитаты другой...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Красивая цитата для вашего форума.

silver073000 07 май 2013, 02:39 Сообщение

Может, так потому, что у меня форум в другой системе, хотя все html-модификации и JavaScript/jQuery взяты именно с вашего сервиса и отлично работают. Не ругайте сильно :oops: Ссылка вот http://gff.5nx.org/portal.php

Аватара пользователя
CabinetAdmin

Re: Красивая цитата для вашего форума.

CabinetAdmin 07 май 2013, 15:19 Сообщение

А ведь действительно, мне не пришло в голову проверить работоспособность цитаты с написанием без переноса строки...

Могу посоветовать делать перенос строки перед вставкой цитаты.
Могу посоветовать вместо:

Код: Выделить всё

display: inline-block;


использовать:

Код: Выделить всё

display: block;


Тогда цитата будет всегда корректно работать, но заголовок будет на всю её ширину. Есть ещё советы, но вам они не пригодятся.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Красивая цитата для вашего форума.

silver073000 07 май 2013, 19:23 Сообщение

Премного благодарен :) Замена помогла :) Ну а то, что верх цитаты растянуло на всю ширину страницы, "вылечил", может, и не правильно, но не растягивает верхушку. Изображение qhm.png растянул на 250 точек, закруглив правую сторону, и поставил для него no-repeat. Ну а qhc.png просто сделал прозрачным.

Аватара пользователя
CabinetAdmin

Re: Красивая цитата для вашего форума.

CabinetAdmin 07 май 2013, 19:34 Сообщение

Минусом может быть только слишком длинное имя, которое может не влезть в поле, но 250 пикселей наверно должно всё же хватить.

Но за решение спасибо:)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Красивая цитата для вашего форума.

silver073000 07 май 2013, 19:47 Сообщение

CabinetAdmin писал(а):Минусом может быть только слишком длинное имя, которое может не влезть в поле, но 250 пикселей наверно должно всё же хватить.

Длинных имён у меня нет, вроде ограничилдл длину ника до 20 символов. Не помню точно.
И ещё раз выражаю благодарность, что, несмотря на то, что мой форум в другой системе, всё же подсказали решение, как исправить этот недочёт :)

Аватара пользователя
CabinetAdmin

Re: Красивая цитата для вашего форума.

CabinetAdmin 07 май 2013, 19:51 Сообщение

В какой системе форум не имеет никакого значения, главное чтобы он был на phpBB... Чем сможем поможем, заходите, спрашивайте если что:)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Dgene

Re: Красивая цитата для вашего форума.

Dgene 17 июл 2013, 13:36 Сообщение

[quote="CabinetAdmin"]Если стили добавлены в конец темы, то исполнятся будут в первую очередь будут именно они, по крайней мере должны. [/quote]

Не работает, к сожалению данная фишка

[url=http://forumimage.ru/show/8714339][img]http://forumimage.ru/thumbs/20130717/137405737475957430.jpg[/img][/url]

Для наглядности прикрепляю файл темы, пожалуйста подскажите, в чем ошибка и как можно подправить тему, очень уж красивая цитата, но сожалению код не работает. В чем ошибка?
Вложения
pro scc.zip
(15.11 КБ) 123 скачивания

Аватара пользователя
CabinetAdmin

Re: Красивая цитата для вашего форума.

CabinetAdmin 17 июл 2013, 14:43 Сообщение

Dgene » 45 минут назад писал(а):В чем ошибка?

Ошибок нет, может быть во всём виноват кеш браузера?

зы. Перешёл на ваш форум, тот что в профиле, в одной из тем нашёл цитату, она работает, но немного не корректно отображается. Почему не разбирался, возможно из-за стиля или ваших предыдущих правок, можно поправить отредактировав blockquote div cite { изменить значение left: -1px; на left: 18px;
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя