Цитата в стиле старой бумаги со старинным компасом.
Для реализации данной цитаты мы будем использовать 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. Для стиля CA Vintage, просто в самый конец темы стиля:igorbond писал(а):но там нет многих строчек
Код: Выделить всё
/* Quote block */
.ca-bbcode {
background: none no-repeat 0 0 transparent;
border: 0;
font-size: 0.95em;
margin: 0.5em 1px 0 25px;
overflow: hidden;
padding: 55px 5px 10px 45px;
position: relative;
}
.ca-bbcode: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;
}
.ca-quote {
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;
}
.ca-quote: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 {
background: url("{T_THEME_PATH}/images/bb_quote.gif") no-repeat 100% 0 transparent;
}
blockquote cite {
/* Username/source of quoter */
font-style: normal;
font-weight: bold;
margin-left: 20px;
display: block;
font-size: 0.9em;
padding: 0px 10px 10px;
}
blockquote.uncited div {
padding-top: 30px;
}
blockquote.uncited div:after {
content: 'Цитата:';
padding-left: 10px;
line-height: 15px;
font-weight: bold;
font-size: 0.9em;
font-style: normal;
position: absolute;
left: 30px;
top: 8px;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Установил, но теперь компас прилип еще и к вложениям в сообщенииCabinetAdmin писал(а):хм... В этом стиле код у цитаты не как у чистого prosilver. Для стиля CA Vintage, просто в самый конец темы стиля:igorbond писал(а):но там нет многих строчекКод: Выделить всё
/* Quote block */ .ca-bbcode { background: none no-repeat 0 0 transparent; border: 0; font-size: 0.95em; margin: 0.5em 1px 0 25px; overflow: hidden; padding: 55px 5px 10px 45px; position: relative; } .ca-bbcode: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; } .ca-quote { 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; } .ca-quote: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 { background: url("{T_THEME_PATH}/images/bb_quote.gif") no-repeat 100% 0 transparent; } blockquote cite { /* Username/source of quoter */ font-style: normal; font-weight: bold; margin-left: 20px; display: block; font-size: 0.9em; padding: 0px 10px 10px; } blockquote.uncited div { padding-top: 30px; } blockquote.uncited div:after { content: 'Цитата:'; padding-left: 10px; line-height: 15px; font-weight: bold; font-size: 0.9em; font-style: normal; position: absolute; left: 30px; top: 8px; }
Ещё и bbcodeigorbond писал(а):Установил, но теперь компас прилип еще и к вложениям в сообщении
[cоde]
, наверно, судя по шаблону bbcode.html
...Самое простое решение вижу в замене кода в шаблоне
bbcode.html
с:
Код: Выделить всё
<!-- BEGIN quote_username_open --><div class="ca-bbcode"><div class="ca-bbcode2 ca-quote"><blockquote><div><cite>{USERNAME} {L_WROTE}:</cite><!-- END quote_username_open -->
<!-- BEGIN quote_open --><div class="ca-bbcode"><div class="ca-bbcode2 ca-quote"><blockquote class="uncited"><div><!-- END quote_open -->
<!-- BEGIN quote_close --></div></blockquote></div></div><!-- END quote_close -->
Код: Выделить всё
<!-- 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 -->
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- HottaBbIch
- Сообщения: 6
- Зарегистрирован: 16 май 2013, 13:55
- Пол: Муж
Всем добрый день!
Я только начинаю осваиваться в этом движке и написании форума, и вот понравился мне вид цитаты с компасом, но как его применить в стиле vphpbb3 я не очень пойму. Изменения делать надо в теме в css, я так понял...но где конкретно и что менять не очень понимаю...не можете ли вы мне подсказать где в моем случае надо изменения вносить? Заранее спасибо
Я только начинаю осваиваться в этом движке и написании форума, и вот понравился мне вид цитаты с компасом, но как его применить в стиле vphpbb3 я не очень пойму. Изменения делать надо в теме в css, я так понял...но где конкретно и что менять не очень понимаю...не можете ли вы мне подсказать где в моем случае надо изменения вносить? Заранее спасибо
- HottaBbIch
- Сообщения: 6
- Зарегистрирован: 16 май 2013, 13:55
- Пол: Муж
- HottaBbIch
- Сообщения: 6
- Зарегистрирован: 16 май 2013, 13:55
- Пол: Муж
Спасибо большое за помощь, все получилось, только вот еще подскажите пожалуйста как мне поменять в цитатах цвет фона?
Менять надо сразу в двух местах, в:
И в:
За цвет отвечают -
Код: Выделить всё
.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);
}
Код: Выделить всё
.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;
}
background-image:
и box-shadow:
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- HottaBbIch
- Сообщения: 6
- Зарегистрирован: 16 май 2013, 13:55
- Пол: Муж
Еще раз большое спасибо! Очень качественная помощь! Все доходчиво объясняете! Успехов и дальнейшего процветания!
Скажите пожалуйста, вот создал рамку, а как к ней прикрепить изображение к правому или левому верхним углам?
Код: Выделить всё
.ramka{
border-radius: 10px;
box-shadow: 0 0 0 3px #ff4f00;
text-indent: 30px;
padding: 10px 10px 10px 10px;
margin: 20px auto;
}