Такую цитату очень просто сделать обычным способом, кучей блочных элементов
А можно сделать тоже самое, но только с помощью CSS3.
Для начала скачивайте архив с изображениями, распаковывайте и закачивайте файлы на форум:
Для prosilver
Мы не меняем стандартный bbcode цитата (шаблон
Добавляем лишь новый css, в самый конец темы стиля добавляете:
Изменить цвет текста или размер можно в блоке:
Не забудьте прописать пути для изображений в css.
Для subsilver2
У стандартного subsilver2 bbcode цитата выглядит так (шаблон
В конец темы стиля добавляете:
Изменить цвет текста или размер можно в блоке:
Не забудьте прописать пути для изображений в css.
<div>
с присвоенными им классами и прописанным CSS.А можно сделать тоже самое, но только с помощью CSS3.
Для начала скачивайте архив с изображениями, распаковывайте и закачивайте файлы на форум:
Для 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 -->
Код: Выделить всё
/* 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.
Комментарии: 28
- Bukovka_
- Сообщения: 165
- Зарегистрирован: 05 мар 2009, 13:01
- Пол: Жен
- Откуда: Киев
Классная цитата. Только может стоит дописать, что в теме стиля надо удалить стандартный квоттитл и квотконтент, иначе новая цитата не захочет отображаться.
И еще вот так получается в суперцитате (потому что ник - это ссылка). Не подскажете, как прописать в этой цитате вид ссылки, чтобы она тоже была белого цвета?
И еще вот так получается в суперцитате (потому что ник - это ссылка). Не подскажете, как прописать в этой цитате вид ссылки, чтобы она тоже была белого цвета?
Если стили добавлены в конец темы, то исполнятся будут в первую очередь будут именно они, по крайней мере должны.
Но если мало ли, почему-то форум не хочет выполнять именно эти стили, то для каждого класса можно дописать класс "родителя", для subsilver:
И для prosilver:
Но если мало ли, почему-то форум не хочет выполнять именно эти стили, то для каждого класса можно дописать класс "родителя", для subsilver:
Код: Выделить всё
/* Quote on CSS3 */
.postbody .quotetitle {
background: url("путь до файла/qhm.png") top left repeat-x transparent;
...
Код: Выделить всё
/* Quote on CSS3 */
.content blockquote {
font-size: 0.95em;
...
Добавьте:Bukovka_ писал(а):Не подскажете, как прописать в этой цитате вид ссылки, чтобы она тоже была белого цвета?
Код: Выделить всё
.quotetitle a {
color: #fff;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- Bukovka_
- Сообщения: 165
- Зарегистрирован: 05 мар 2009, 13:01
- Пол: Жен
- Откуда: Киев
Спасибо большое. Теперь все идеально.
- Bukovka_
- Сообщения: 165
- Зарегистрирован: 05 мар 2009, 13:01
- Пол: Жен
- Откуда: Киев
Сделала для другого стиля в красном цвете. Может кому еще пригодится.
Обводку с синей на красную меняем в этом куске (выделено зеленым цветом)
Обводку с синей на красную меняем в этом куске (выделено зеленым цветом)
Код: Выделить всё
.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 КБ 337 скачиваний
Попробовал поставить эту цитату и обнаружил такую вещь: если написать цитату без переноса строки в таком виде то верхняя часть её съезжает.
И чем длиннее текст перед цитатой, тем дальше уезжает верх этой цитаты.
Стиль subsilver2-modded.
Код: Выделить всё
Косяк.[quote]Та-ра-рам[/quote]
И чем длиннее текст перед цитатой, тем дальше уезжает верх этой цитаты.
Стиль subsilver2-modded.
Может, так потому, что у меня форум в другой системе, хотя все html-модификации и JavaScript/jQuery взяты именно с вашего сервиса и отлично работают. Не ругайте сильно Ссылка вот http://gff.5nx.org/portal.php
А ведь действительно, мне не пришло в голову проверить работоспособность цитаты с написанием без переноса строки...
Могу посоветовать делать перенос строки перед вставкой цитаты.
Могу посоветовать вместо:
использовать:
Тогда цитата будет всегда корректно работать, но заголовок будет на всю её ширину. Есть ещё советы, но вам они не пригодятся.
Могу посоветовать делать перенос строки перед вставкой цитаты.
Могу посоветовать вместо:
Код: Выделить всё
display: inline-block;
Код: Выделить всё
display: block;
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Длинных имён у меня нет, вроде ограничилдл длину ника до 20 символов. Не помню точно.CabinetAdmin писал(а):Минусом может быть только слишком длинное имя, которое может не влезть в поле, но 250 пикселей наверно должно всё же хватить.
И ещё раз выражаю благодарность, что, несмотря на то, что мой форум в другой системе, всё же подсказали решение, как исправить этот недочёт
[quote="CabinetAdmin"]Если стили добавлены в конец темы, то исполнятся будут в первую очередь будут именно они, по крайней мере должны. [/quote]
Не работает, к сожалению данная фишка
[url=http://forumimage.ru/show/8714339][img]http://forumimage.ru/thumbs/20130717/13 ... 957430.jpg[/img][/url]
Для наглядности прикрепляю файл темы, пожалуйста подскажите, в чем ошибка и как можно подправить тему, очень уж красивая цитата, но сожалению код не работает. В чем ошибка?
Не работает, к сожалению данная фишка
[url=http://forumimage.ru/show/8714339][img]http://forumimage.ru/thumbs/20130717/13 ... 957430.jpg[/img][/url]
Для наглядности прикрепляю файл темы, пожалуйста подскажите, в чем ошибка и как можно подправить тему, очень уж красивая цитата, но сожалению код не работает. В чем ошибка?
- Вложения
-
- pro scc.zip
- 15.11 КБ 288 скачиваний
Ошибок нет, может быть во всём виноват кеш браузера?Dgene » 45 минут назад писал(а):В чем ошибка?
зы. Перешёл на ваш форум, тот что в профиле, в одной из тем нашёл цитату, она работает, но немного не корректно отображается. Почему не разбирался, возможно из-за стиля или ваших предыдущих правок, можно поправить отредактировав
blockquote div cite {
изменить значение left: -1px;
на left: 18px;
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
После обновления старого PHPBB форума
с версии 2 до версии 3.3.10 в меню форума появился link The team , при открытии которого выдает 404 ошибку... -
darkmode,расширение которое переключает светлый,темный режим форума.
Расширение работает и для гостей и имеет переключатель в navbar .
Недостатки:... -
Все привет, с Новым 2023 годом, здоровья и успехов во всем.
Ребят, такой вопрос, нужно было сделать форум, не стал делать чистую установку, просто... -
Добрый вечер.
Появилась необходимость запретить показ рекламы от гугл адсенс на некоторых страницах форума. Там есть такая функция как исключить... -
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...