advanced search

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


Plain TextExpand 
  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.