CSS + html код баннера для сайдбара в WordPress

Комментариев нет

Начал доделывать свой блог и решил, что надо как то красиво сообщать людям о важных событиях.

Поискал плагины для WordPress и понял: «Хочешь что бы было качественно и красиво сделай сам»

Сделал несложный html код баннера, добавил css стили и получился у меня удобный, редактируемый блок который подстраивается под высоту и ширину сайдбара.

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

Начнем по порядку.

Вот так выглядит пример данного баннера:

Вот так выглядит пример данного баннера. Здесь показаны все типы текстов которые вы можете использовать и показана кнопка.

Что бы добавить себе такой же баннер необходимо зайти Внешний вид => Редактор и найти там файл style.css от оформления которое у Вас установлена.

И добавить туда этот код

  1. /* ------------------------------------------------------------------------ */
  2. /* BOX INFO by InfoBloger.pro Автор: Казанцев Сергей
  3. /* ------------------------------------------------------------------------ */
  4. #box-info {
  5. position:relative;
  6. padding:10px;
  7. font-family:Tahoma;
  8. border:2px dashed #fff;
  9. -webkit-border-radius:8px;
  10. -khtml-border-radius:8px;
  11. -moz-border-radius:8px;
  12. border-radius:8px;
  13. background:#d75a4b;
  14. }
  15. #box-info .text-w{
  16. text-align:center;
  17. color:#fff;
  18. text-shadow:1px 1px #222;
  19. font-size:19px;
  20. font-weight:500;
  21. padding-bottom:10px;
  22. padding:0;
  23. margin:0;
  24. }
  25. #box-info .subtitle{
  26. text-align:center;
  27. color:#fff;
  28. text-shadow:1px 1px #000;
  29. font-size:33px;
  30. opacity:0.4;
  31. padding:0;
  32. margin:0;
  33. }
  34. #box-info .title{
  35. text-align:center;
  36. color:#fff;
  37. font-weight:500;
  38. opacity:0.2;
  39. text-shadow:2px 2px #000;
  40. font-size:85px;
  41. line-height:93px;
  42. padding:0;
  43. margin:0;
  44. }
  45. #box-info .text{
  46. text-align:center;
  47. text-shadow:0px 0px #000;
  48. color:#fff; font-size:20px;
  49. padding:0;
  50. margin:0;
  51. }
  52. #box-info .text-b{
  53. text-align:center;
  54. color:#222;
  55. text-shadow:0px 0px #000;
  56. font-size:13px;
  57. line-height:15px;
  58. padding:0;
  59. margin:0;
  60. }
  61. #box-info .kn{
  62. width:90%;
  63. padding:5px 8px;
  64. background-color:#fff1ba;
  65. border:1px solid #ffcc00;
  66. font-size:16px;
  67. color:#222;
  68. text-align:center;
  69. border-radius: 5px;
  70. -moz-border-radius: 5px;
  71. -webkit-border-radius:5px;
  72. }
  73. #box-info .kn:hover{
  74. width:90%;
  75. padding:5px 8px;
  76. background-color:#fb784a;
  77. border:1px solid #ff4200;
  78. font-size:16px;
  79. color:#222;
  80. }
  81. /* ------------------------------------------------------------------------ */
  82. /* Конец BOX INFO by InfoBloger.pro Автор: Казанцев Сергей
  83. /* ------------------------------------------------------------------------ */

Затем зайти в Внешний вид =>Виджеты и выбрать виджет «Текст» под ним подписано Произвольный текст или HTML-код и вставить туда этот код

  1. <div id="box-info">
  2. <div class="text-w">Текст 1</div>
  3. <div class="subtitle">Текст 2</div>
  4. <div class="title">Текс 3</div>
  5. <div class="text">Текст 4</div>
  6. <div class="text-b">Тест 5</div>
  7. <a href="#"><div class="kn">Кнопка</div></a>
  8. </div>
Редактируя текст, Вы получите необходимый Вам результат
Комментариев нет
 

Оставьте свой комментарий