Цитата в стиле старой бумаги со старинным компасом.
Для реализации данной цитаты мы будем использовать CSS3, поэтому в старых браузерах правильного отображения, задуманного мною, не будет.
Можно пойти обычным путём и, как я писал в соседней теме, нарисовать кучу изображений в фотошопе, потом отредактировав шаблон
Для начала скачиваем архив с двумя изображениями: Распаковываем и закачиваем на форум.
Стили на основе prosilver
Открываем тему вашего стиля, находим:
Меняем на:
Если вы хотите изменить размер шрифта, то, чтобы не возвращаться, измените значение у свойства:
Чуть ниже находим:
Меняем на:
Находим:
К найденному, с новой строки, после
Далее находим:
Меняем на:
После замены, после
Теперь при использовании цитаты без автора, как и в стилях subsilver2, будет выводиться -
Далее находим и удаляем:
Последний удалённый фрагмент, это изначальный цвет цитаты, цвет обводки и кавычки. Мы их поместили в другое место, поэтому они нам больше не нужны в этом месте. Два последних блока, это цветовое оформление цитаты в другой цитате, они нам тоже больше не понадобится.
Для стилей на основе subsilver2
В самый конец темы вашего стиля ставим:
Чтобы изменить размер шрифта автора темы. Находим:
Чтобы изменить размер шрифта самой цитаты. Находим:
Стили находящиеся в самом низу файла со стилями используются в первую очередь, поэтому можно их не удалять.
Если изменения не видно, можно удалить cookies конференции, некоторые браузеры очень сильно к ним "цепляются".
Для реализации данной цитаты мы будем использовать CSS3, поэтому в старых браузерах правильного отображения, задуманного мною, не будет.
Можно пойти обычным путём и, как я писал в соседней теме, нарисовать кучу изображений в фотошопе, потом отредактировав шаблон
bbcode.html
, добавить необходимое количество блоков и к каждому из них, с помощью css, присвоить необходимые нам изображения. Мы не ищем лёгких путей:) Мы пойдём по пути реализации красивого отображения с помощью CSS3.Для начала скачиваем архив с двумя изображениями: Распаковываем и закачиваем на форум.
Стили на основе prosilver
Открываем тему вашего стиля, находим:
Код: Выделить всё
/* Quote block */
blockquote {
background: #ebebeb none 6px 8px no-repeat;
border: 1px solid #dbdbdb;
font-size: 0.95em;
margin: 0.5em 1px 0 25px;
overflow: hidden;
padding: 5px;
}
Код: Выделить всё
/* Quote block */
blockquote {
background: none no-repeat 0 0 transparent;
border: 0px solid #dbdbdb;
font-size: 0.95em;
margin: 0.5em 1px 0 25px;
overflow: hidden;
padding: 55px 5px 10px 45px;
position: relative;
}
font-size: 0.95em;
Чуть ниже находим:
Код: Выделить всё
blockquote blockquote {
/* Nested quotes */
background-color: #bababa;
font-size: 1em;
margin: 0.5em 1px 0 15px;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #e4e4e4;
}
Код: Выделить всё
blockquote blockquote {
/* Nested quotes */
font-size: 1em;
margin: 0.5em 1px 0 15px;
}
Код: Выделить всё
blockquote cite {
/* Username/source of quoter */
font-style: normal;
font-weight: bold;
margin-left: 20px;
display: block;
font-size: 0.9em;
}
font-size: 0.9em;
добавляем:
Код: Выделить всё
padding: 0px 25px 10px;
font-size: 0.9em;
- отвечает за размер шрифта автора цитаты.Далее находим:
Код: Выделить всё
blockquote.uncited {
padding-top: 25px;
}
Код: Выделить всё
blockquote.uncited div {
padding-top: 35px;
}
}
с новой строки добавляем:
Код: Выделить всё
blockquote:before {
content: '';
left: 0;
top: 0;
background: url("путь до изображения/quote-compass.png") no-repeat 0 0 transparent;
position: absolute;
width: 75px;
height: 100px;
z-index: 1;
}
blockquote div {
padding: 5px;
border: 1px solid #703D07;
position: relative;
background-color: transparent;
background-image: -webkit-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -moz-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -o-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -ms-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
z-index: 0;
}
blockquote div:before {
content: '';
left: 0;
top: 0;
background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
blockquote div:after {
content: '';
left: 30px;
top: 8px;
background: url("{T_THEME_PATH}/images/quote.gif") no-repeat 0 0 transparent;
position: absolute;
width: 15px;
height: 12px;
}
blockquote.uncited div:after {
content: 'Цитата:';
padding-left: 20px;
line-height: 15px;
font-weight: bold;
font-size: 0.9em;
font-style: normal;
}
Цитата:
. Отвечает за это свойство content:
в blockquote.uncited div:after {
.Далее находим и удаляем:
Код: Выделить всё
/* Quote block */
blockquote {
background-color: #EBEADD;
background-image: url("{T_THEME_PATH}/images/quote.gif");
border-color:#DBDBCE;
}
blockquote blockquote {
/* Nested quotes */
background-color:#EFEED9;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #EBEADD;
}
Для стилей на основе subsilver2
В самый конец темы вашего стиля ставим:
Код: Выделить всё
.quotetitle {
margin: 55px 5px 0 45px;
padding: 4px 4px 4px 40px;
position: relative;
position: relative;
border-color: #703D07;
background-color: transparent;
background-image: -webkit-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -moz-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -o-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -ms-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
}
.quotetitle:before {
position: absolute;
left: -45px;
top: -60px;
background: url("путь до изображения/quote-compass.png") no-repeat 0 0 transparent;
content: '';
width: 75px;
height: 100px;
z-index: 1;
}
.quotetitle:after {
position: absolute;
left: 0px;
top: 0px;
background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
content: '';
width: 100%;
height: 27px;
z-index: 1;
}
.quotecontent {
margin: 0 5px 10px 45px;
position: relative;
overflow: hidden;
border-color: #703D07;
color: #2D1206;
background-color: transparent;
background-image: -webkit-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -moz-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -o-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -ms--radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
-webkit-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
z-index: 0;
}
.quotecontent:before {
position: absolute;
right: 0px;
bottom: 0px;
background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
content: '';
width: 100%;
height: 100%;
z-index: -1;
}
Код: Выделить всё
/* BBCode
------------ */
.quotetitle, .attachtitle {
margin: 10px 5px 0 5px;
padding: 4px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #A9B8C2;
color: #333333;
background-color: #A9B8C2;
font-size: 0.85em;
font-weight: bold;
}
font-size: 0.85em;
- ставим нужное значение.Чтобы изменить размер шрифта самой цитаты. Находим:
Код: Выделить всё
.quotecontent, .attachcontent {
margin: 0 5px 10px 5px;
padding: 5px;
border-color: #A9B8C2;
border-width: 0 1px 1px 1px;
border-style: solid;
font-weight: normal;
font-size: 1em;
line-height: 1.4em;
font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: #FAFAFA;
color: #4B5C77;
}
font-size: 1em;
- ставим нужное значение.Стили находящиеся в самом низу файла со стилями используются в первую очередь, поэтому можно их не удалять.
Если изменения не видно, можно удалить cookies конференции, некоторые браузеры очень сильно к ним "цепляются".
Комментарии: 37
Тут стандартные коды цитат. Коды у них такие, у prosilver:
у subsilver:
Меняется только стили, конструкция цитат остаётся стандартной.
Код: Выделить всё
<!-- 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 -->
Код: Выделить всё
<!-- 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 -->
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Да, точно. Спасибо, поправим это дело.igorbond писал(а):В блоке цитаты не работают ссылки, точнее они стали не кликабельны
Для prosilver, найти:
Код: Выделить всё
blockquote div {
padding: 5px;
border: 1px solid #703D07;
position: relative;
background-color: transparent;
background-image: -webkit-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -moz-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -o-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -ms-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
}
}
):
Код: Выделить всё
z-index: 0;
Код: Выделить всё
blockquote div:before {
content: '';
left: 0;
top: 0;
background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
position: absolute;
width: 100%;
height: 100%;
}
}
):
Код: Выделить всё
z-index: -1;
Для subsilver2, найти:
Код: Выделить всё
.quotecontent {
margin: 0 5px 10px 45px;
position: relative;
overflow: hidden;
border-color: #703D07;
color: #2D1206;
background-color: transparent;
background-image: -webkit-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -moz-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -o-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
background-image: -ms--radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
-webkit-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
}
}
):
Код: Выделить всё
z-index: 0;
Код: Выделить всё
.quotecontent:before {
position: absolute;
right: 0px;
bottom: 0px;
background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
content: '';
width: 100%;
height: 62px;
}
}
):
Код: Выделить всё
z-index: -1;
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Это из-за того что я указал реальный размер, а не размер поля:)igorbond писал(а):ссылка работает только лишь тогда, когда навидешь на ее самый низ.
Косяк только у subsilver, найти:
Код: Выделить всё
.quotetitle:after {
position: absolute;
left: 0px;
top: 0px;
background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
content: '';
width: 100%;
height: 62px;
z-index: 1;
}
height: 62px;
, 62px - изменить на 27px.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Тут сразу назрел еще вопрос, а нельзя ли ее адаптировать под цвет вот этого стиля http://demo.phpbb3styles.net/CA+Vintage
Тут сразу назрел еще вопрос, а нельзя ли ее адаптировать под цвет вот этого стиля http://demo.phpbb3styles.net/CA+Vintage