• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Шесть вариантов цветного вида цитат на сайт (Цветной вид в 6 красивых вариантов цитат по гамме цвета)
Шесть вариантов цветного вида цитат на сайт
Kosten
Понедельник, 29 Мая 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Стандартные цитаты на сайте когда вы создали не создают не каково эффекта, так как они сделаны однообразно под любой дизайн. И вот вам решение заменить их, и сделать оригинальными и чтоб подходили по своей гамме. Теперь у вас будет полноценная рамка, в которой в левом верхнем углу сам значок и главное, вы сможете уже поставить тот который будет к примеру вписываться на форуме и на самом ресурсе.



Для начало мы скачиваем файл и заливаем себе в корень сайта, там будет разметка цвета под каждую цитату, которую вы выберете и будете ставить. И вот основной код, который вам нужно будет прописывать и в него вставлять, что напишите.

Код
<div class="bbQuoteBlock">   <div style="padding-left: 5px; font-size: 7pt;" class="bbQuoteName"><b>Quote</b></div>   <div style="border: 1px inset; max-height: 200px; overflow: auto;" class="quoteMessage">   Текст вашей цитаты  </div>   </div>


Остаются стили, которые CSS нужно, но с начало выбираем, какой именно.

Белый:



Код
.bbQuoteBlock {   margin: 15px 0px 15px 0px!important;   }   .bbQuoteName {   display:none;   }   .quoteMessage1{   overflow: hidden!important;   text-align:justify!important;   font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;   color:#555;text-shadow:1px 1px 1px #fff!important;   font-style: italic!important;   background: #EAEAEA url(/quote/quote_white.png) no-repeat 10px 10px!important;   padding: 5px 10px 5px 50px!important;   border: 1px solid #D0D0D0!important; }


Темный:



Код
.bbQuoteBlock {   margin: 15px 0px 15px 0px!important;   }   .bbQuoteName {   display:none;   }   .quoteMessage {   overflow: hidden!important;   text-align:justify!important;   font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;   color:#c9c9c9;text-shadow:1px 1px 1px #000!important;   font-style: italic!important;   background: #454a50 url(/quote/quote_black.png) no-repeat 10px 10px!important;   padding: 5px 10px 5px 50px!important;   border: 1px solid #333!important;   }


Оранжевый:



Код
.bbQuoteBlock {   margin: 15px 0px 15px 0px!important;   }   .bbQuoteName {   display:none;   }   .quoteMessage {   overflow: hidden!important;   text-align:justify!important;   font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;   color:#867200;text-shadow:1px 1px 1px #fff!important;   font-style: italic!important;   background: #FDEBAE url(/quote/quote_orange.png) no-repeat 10px 10px!important;   padding: 5px 10px 5px 50px!important;   border: 1px solid #E6C555!important;   }


Голубой:



Код
.bbQuoteBlock {   margin: 15px 0px 15px 0px!important;   }   .bbQuoteName {   display:none;   }   .quoteMessage {   overflow: hidden!important;   text-align:justify!important;   font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;   color:#155084;text-shadow:1px 1px 1px #fff!important;   font-style: italic!important;   background: #C2DDF9 url(/quote/quote_blue.png) no-repeat 10px 10px!important;   padding: 5px 10px 5px 50px!important;   border: 1px solid #80BBEF!important;   }


Зелёный:



Код
.bbQuoteBlock {   margin: 15px 0px 15px 0px!important;   }   .bbQuoteName {   display:none;   }   .quoteMessage {   overflow: hidden!important;   text-align:justify!important;   font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;   color:#15841a;text-shadow:1px 1px 1px #fff!important;   font-style: italic!important;   background: #D1F7B6 url(/quote/quote_green.png) no-repeat 10px 10px!important;   padding: 5px 10px 5px 50px!important;   border: 1px solid #8BCA61!important;   }


Розовый:



Код
.bbQuoteBlock {   margin: 15px 0px 15px 0px!important;   }   .bbQuoteName {   display:none;   }   .quoteMessage6 {   overflow: hidden!important;   text-align:justify!important;   font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;   color:#CE3A12;text-shadow:1px 1px 1px #fff!important;   font-style: italic!important;   background: #FFCCCC url(/quote/quote_red.png) no-repeat 10px 10px!important;   padding: 5px 10px 5px 50px!important;   border: 1px solid #FF9999!important;   }


Это комментарий, что были написаны к материалу.

1. Так не понял, это что мне нужно стиль выбрать, а потом код ставить и в нем прописывать, то чтоб была цитата.

2. Этот код предоставлен также для этого и у него свои размеры, где вы можете поменять. А в CSS нужно найти, что отвечает за цитаты, хотя я так ставил и прописать тот сталь который вам понравился и потом посмотрите как выведет.

3. Давно их видел в интернете, можно просто сделать тест и все точно узнать, для чего первый код, но мне кажется, его применяют, так выборочно, просто прописывают или с начало цитируют и его ставят вокруг цитаты и вот тебе совершенно другой дизайн.

4. Проверил цитаты, первый код по сути вообще не нужен, он у меня на форуме скриптом показался, просто ставим стиль и будет у вас новая цитата и смотрится очень красиво.

5. Значок не стал заливать, потому его там и нету, если вы его загрузите в корень сайта, то появиться.

6. Вот и разобрались, ставим только стили в CSS и ваши цитаты изменятся, под каждой картинкой свой оттенок.

7. Значок можно вообще свой поставить, чтоб оригинальный был, в интернете найти не проблема.

8. Вы что здесь совсем не понимаете. Это простые стили, которые меняют стандартные цитаты. А первый код на форуме работать не будет, так как bb КОДЫ, а он под них не сделан, а вот на модулях попробуйте, к примеру блог или статьи.

9. Все правильно, первый код предназначен не для форума, а для других модулей и он будет работать на BB кода и проверено на каталоге файлов

10. Отличный код цитат, они и растягиваются как те которые по умолчанию, скопировал стили и хватит.

11. Возможно кто то хочет показать свой ресурс во всем цвете и может выставить просто код. Сейчас комментарий позволяют выводить и красный оттенок можно сделать на замечание на сайте.

12. Можно и не закачивать, а просто поставить ссылку в стили, так удобней будет и файловый менеджер не засоряется.
Прикрепления: 6259894.jpg (34.4 Kb) · 3062990.png (5.4 Kb) · 0739863.png (6.2 Kb) · 3463619.png (7.0 Kb) · 6548921.png (6.9 Kb) · 0931400.png (6.9 Kb) · 0559079.png (7.1 Kb) · 17_vebmaster_qu.rar (9.3 Kb)
Страна: (RU)
Санчо
Суббота, 02 Сентября 2023 | Сообщение 2
Оффлайн
Пользователи
Сообщений:2
Награды: 0
Сиреневого нет , не порядок . . 11a
но белый вроде ничего так , на сайте смотрится норм
Страна: (DE)
Kosten
Суббота, 02 Сентября 2023 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Санчо, вам не удятся оставить спам - ну его!
Страна: (RU)
AnTron
Воскресенье, 03 Сентября 2023 | Сообщение 4
Оффлайн
Пользователи
Сообщений:37
Награды: 0
Цитата Санчо ()
Сиреневого нет , не порядок

Спамеры на этот оттенок цвета клюют - потому как можно заметить его нет!
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Шесть вариантов цветного вида цитат на сайт (Цветной вид в 6 красивых вариантов цитат по гамме цвета)
  • Страница 1 из 1
  • 1
Поиск: