We Recommend

Wicked Cool PHP: Real-World Scripts That Solve Difficult Problems Wicked Cool PHP: Real-World Scripts That Solve Difficult Problems
Wicked Cool PHP contains a wide variety of scripts to process credit cards, check the validity of email addresses, template HTML, and serve dynamic images and text.


Posted By

j_junyent on 12/02/07


Tagged

alert


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

scyfox
jamesming


Alert messages with CSS


Published in: PHP 


URL: http://www.deanjrobinson.com/wordpress/redoable

This is based on styles from the Sawchuk scheme for K2 to create, alert, download, code, construction, new, information, note and callout boxes


  1. * @group Special Styles */
  2. /* This is based on styles from the Sawchuk scheme for K2 */
  3. /* http://www.deanjrobinson.com/wordpress/redoable */
  4. .download, .code, .note,
  5. .alert, .new, .construction,
  6. .information {
  7. background-position: 15px 10px;
  8. background-repeat: no-repeat;
  9. font-size: 1.2em !important;
  10. line-height: 115%;
  11. margin: 10px auto;
  12. padding: 10px 10px 10px 50px;
  13. text-align: left;
  14. }
  15.  
  16. ul.download, ul.code, ul.note,
  17. ul.alert, ul.new, ul.construction,
  18. ul.information {
  19. font-size: 1em !important;
  20. line-height: 115%;
  21. list-style-type: disc;
  22. list-style-position: inside;
  23. padding: 10px 10px 10px 50px;
  24. }
  25.  
  26. ol.download, ol.code, ol.note,
  27. ol.alert, ol.new, ol.construction,
  28. ol.information {
  29. font-size: 1em !important;
  30. line-height: 115%;
  31. list-style-type: decimal;
  32. list-style-position: inside;
  33. padding: 10px 10px 10px 65px;
  34. }
  35.  
  36. dl.download, dl.code, dl.note,
  37. dl.alert, dl.new, dl.construction,
  38. dl.information {
  39. font-size: 1em !important;
  40. line-height: 115%;
  41. padding: 10px 10px 10px 50px;
  42. }
  43.  
  44. dl.download dt, dl.code dt, dl.note dt,
  45. dl.alert dt, dl.new dt, dl.construction dt,
  46. dl.information dt {
  47. font-size: 1.2em !important;
  48. font-weight: bold;
  49. line-height: 115%;
  50. }
  51.  
  52. dl.download dd, dl.code dd, dl.note dd,
  53. dl.alert dd, dl.new dd, dl.construction dd,
  54. dl.information dd {
  55. line-height: 115%;
  56. list-style-type: disc;
  57. }
  58.  
  59. .download {
  60. background-color: #353;
  61. background-image: url('images/package_go.png');
  62. border-bottom: 2px solid #383;
  63. border-top: 2px solid #383;
  64. }
  65.  
  66. .download a, .download a:visited {
  67. border-bottom: 2px dotted #3F3;
  68. color: #3F3;
  69. text-decoration: none !important;
  70. }
  71.  
  72. .download a:hover {
  73. border-bottom: 2px dotted #3C3;
  74. color: #3C3;
  75. text-decoration: none !important;
  76. }
  77.  
  78. .code { /* use p class=code when you want to fake it, sometimes handy */
  79. background-color: #444;
  80. background-image: url('images/application_osx_terminal.png');
  81. border-bottom: 2px solid #AAA;
  82. border-top: 2px solid #AAA;
  83. font-family: 'Courier New', Courier, Fixed;
  84. }
  85.  
  86. .alert {
  87. background-color: #533;
  88. background-image: url('images/exclamation.png');
  89. border-bottom: 2px solid #F33;
  90. border-top: 2px solid #F33;
  91. }
  92.  
  93. .new {
  94. background-color: #643;
  95. background-image: url('images/new.png');
  96. border-bottom: 2px solid #F93;
  97. border-top: 2px solid #F93;
  98. }
  99.  
  100. .construction {
  101. background-color: #553;
  102. background-image: url('images/error.png');
  103. border-bottom: 2px solid #FF3;
  104. border-top: 2px solid #FF3;
  105. }
  106.  
  107. .information {
  108. background-color: #335;
  109. background-image: url('images/information.png');
  110. border-bottom: 2px solid #33F;
  111. border-top: 2px solid #33F;
  112. }
  113.  
  114. .note {
  115. background-color: #444;
  116. background-image: url('images/page_white_text.png');
  117. border-bottom: 2px solid #AAA;
  118. border-top: 2px solid #AAA;
  119. }
  120.  
  121. .callout {
  122. border-bottom: 2px solid #CCC;
  123. border-top: 2px solid #CCC;
  124. color: #CCC;
  125. font-size: 1.4em !important;
  126. margin: 10px auto;
  127. padding: 10px;
  128. text-align: justify;
  129. }
  130. /* @end */

Report this snippet 

You need to login to post a comment.