Никаких изменений, она двигается внутри рамкиCabinetAdmin писал(а):Поиграйтесь со значениями, поставьте -20 или -30, посмотрите как будет выглядеть.
Цитата в стиле старой бумаги со старинным компасом.
Для реализации данной цитаты мы будем использовать 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
Вообще, вариантов вывести объект за пределы другого, достаточное количество, всё зависит от других элементов, элементов вокруг и тд...
Можно вывести добавив объекту
Можно вывести добавив объекту
position: relative;
и нужную сторону left: -20px;
. Можно дать родительскому элементу position: relative;
, а тот, который нужно вывести за пределы position: absolute;
и те же отступы, сверху, снизу, ширину и высоту объекта и тд... Можно с помощью того же margin-left: -20px;
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Вот мой стиль рамки
Код: Выделить всё
.ramka{
background: url("/wp-content/themes/ElegantBlog/images/exclaimc.jpg") no-repeat -10px -10px;
border-radius: 10px;
box-shadow: 0 0 0 2px #84D79D;
font-family: 'Kelly Slab';
font-size: 18px;
text-indent: 0px;
padding: 10px 10px 10px 10px;
margin: 20px auto;
}
Например:
Размеры изображения
Отступы
Код: Выделить всё
.ramka {
position: relative;
border-radius: 10px;
box-shadow: 0 0 0 2px #84D79D;
font-family: 'Kelly Slab';
font-size: 18px;
text-indent: 0px;
padding: 10px 10px 10px 10px;
margin: 20px auto;
}
.ramka:before {
position: absolute;
content: '';
background: url("/wp-content/themes/ElegantBlog/images/exclaimc.jpg") no-repeat 0 0;
width: 10px;
height: 10px;
top: -10px;
left: -10px;
}
width: 10px;
и height: 10px;
.Отступы
top: -10px;
и left: -10px;
.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Ну правильно, такое огромное изображение, конечно оно чего нибудь закроет:) Можно его чуть уменьшить или добавить после
background: url("/wp-content/themes/ElegantBlog/images/exclaimc.jpg") no-repeat 0 0;
- background-size: 10px 10px;
, уменьшение с помощью css.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!