Будем делать из стандартных некрасивых цитат, красивые, современные, всё с помощью CSS3.
Чтобы изменить внешний вид цитаты, мы не будем менять её html структуру, просто доработаем её CSS.
Представленные цитаты выполнены в тёмном стиле, при желании цвета можно изменить, подогнать под стиль вашего форума.
Также стоит упомянуть, что при создании цитат используются псевдоэлементы :before, поэтому работать во всей своей красе, они будут только в современных браузерах.
Меняем на:
Находим:
Удаляем.
Всё.
Меняем на:
Находим:
Также как и в первом варианте - удаляем.
Ничего сложного нет.
Здесь -
Чтобы изменить внешний вид цитаты, мы не будем менять её html структуру, просто доработаем её CSS.
Представленные цитаты выполнены в тёмном стиле, при желании цвета можно изменить, подогнать под стиль вашего форума.
Также стоит упомянуть, что при создании цитат используются псевдоэлементы :before, поэтому работать во всей своей красе, они будут только в современных браузерах.
Открываем ваш стиль, ищем:
Код: Выделить всё
/* BB Code styles
----------------------------------------*/
/* 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;
}
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 cite {
/* Username/source of quoter */
font-style: normal;
font-weight: bold;
margin-left: 20px;
display: block;
font-size: 0.9em;
}
blockquote cite cite {
font-size: 1em;
}
blockquote.uncited {
padding-top: 25px;
}
Код: Выделить всё
/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
margin: 0;
background: #333;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow: hidden;
border: 1px solid #ddd;
}
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 div {
margin: 0;
padding: 0;
position: relative;
padding: 15px;
text-align: left;
color: #fff;
font-family: Georgia, serif;
font-size: 15px;
text-shadow: 1px 1px 1px #000;
}
blockquote div:before{
color: #333;
position: absolute;
content: "\275d";
font-size: 50px;
font-style: italic;
top: 15px;
left: 90%;
font-family: Georgia, serif;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #fff;
width: 45px;
height: 45px;
line-height: 65px;
}
blockquote cite {
border-bottom: 1px solid #fff;
color: #FFFFFF;
display: block;
font-family: Georgia,cursive;
font-size: 12px;
font-style: italic;
font-weight: 400;
margin-bottom: 25px;
padding-bottom: 5px;
text-align: left;
text-shadow: 1px 1px 1px #333;
}
blockquote cite cite {
font-size: 1em;
}
blockquote.uncited div {
padding-top: 60px;
}
Код: Выделить всё
/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
background-color: transparent;
background-image: url("{T_THEME_PATH}/images/quote.gif");
border-color:#888888;
}
blockquote blockquote {
/* Nested quotes */
background-color:#EFEED9;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #EBEADD;
}
Всё.
Открываем ваш стиль, ищем:
Код: Выделить всё
/* BB Code styles
----------------------------------------*/
/* 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;
}
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 cite {
/* Username/source of quoter */
font-style: normal;
font-weight: bold;
margin-left: 20px;
display: block;
font-size: 0.9em;
}
blockquote cite cite {
font-size: 1em;
}
blockquote.uncited {
padding-top: 25px;
}
Код: Выделить всё
/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
margin: 0px;
padding: 10px 10px 40px;
position: relative;
background: #fff;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
overflow: hidden;
border: 1px solid #999;
}
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 div {
margin: 0;
padding: 0;
position: relative;
background: #333;
height: 75%;
padding: 30px;
text-align: left;
color: #fff;
font-family: 'Abril Fatface', sans-serif;
font-size: 15px;
text-shadow: 1px 1px 1px #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
blockquote div:before{
color: rgba(255,255,255,0.8);
position: absolute;
content: '\0022';
font-size: 100px;
line-height: 80px;
font-style: italic;
top: 0px;
right: 20px;
font-family: Cambria, Georgia, serif;
}
blockquote cite {
bottom: -30px;
color: #999999;
font-size: 12px;
position: absolute;
right: 0;
text-align: right;
text-shadow: 1px 1px 1px #FFFFFF;
}
blockquote cite cite {
font-size: 1em;
}
blockquote.uncited div {
padding-top: 60px;
}
Код: Выделить всё
/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
background-color: transparent;
background-image: url("{T_THEME_PATH}/images/quote.gif");
border-color:#888888;
}
blockquote blockquote {
/* Nested quotes */
background-color:#EFEED9;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #EBEADD;
}
Ничего сложного нет.
Здесь -
blockquote blockquote {
и здесь - blockquote blockquote blockquote {
находится цветовое оформление цитаты в цитате. При необходимости цвета можно заменить на свои.Комментарии: 7
Дык, в кружке двоеточие должно быть...
Я не помню, это вроде первый вариант!?... Тогда, вот кусок отвечающий за него:
Можно вставить свою картинку сюда
Я не помню, это вроде первый вариант!?... Тогда, вот кусок отвечающий за него:
Код: Выделить всё
blockquote div:before{
color: #333;
position: absolute;
content: "\275d";
font-size: 50px;
font-style: italic;
top: 10px;
left: 90%;
font-family: Georgia, serif;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #fff;
width: 50px;
height: 50px;
}
content: "\275d";
, это двоеточие.background: #fff;
, это цвет круга.border-radius: 50%;
, это то что делает круг кругом:)Можно вставить свою картинку сюда
background
, удалить содержимое content
(content: "";
), ну и радиус тоже, нафиг он тогда не нужен будет.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Доброго времени суток.
Подскажите пожалуйста как можно реализовать ( стилизацию закрепленных тем) ?
Стиль - elegance
Сейчас выглядит так у меня.... -
Если вам надоело цветовое оформление адм. раздела и вы не прочь его изменить, то у меня как раз завалялось пара стилей для вас.
Стили для phpbb...