Posted By

j_junyent on 12/02/07


Tagged

alert


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

scyfox
jamesming
benrudolph
mumra


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.

Complemented with xtypo joomla extension.

  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 */
  131.  
  132. /* based on xTypo for joomla: http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,2087/Itemid,35/ */
  133.  
  134. .info {
  135. background: url(icon/info.gif) center no-repeat;
  136. background-color:#F8FAFC ;
  137. background-position: 15px 50%;
  138. text-align: left;
  139. padding: 5px 20px 5px 45px;
  140. color:#5E6273;
  141. border-top: 2px solid #B5D4FE ;
  142. border-bottom: 2px solid #B5D4FE;
  143. }
  144.  
  145. .warning {
  146. background: url(icon/warning.gif) center no-repeat;
  147. background-color: #FBEEF1;
  148. background-position: 15px 50%;
  149. text-align: left;
  150. padding: 5px 20px 5px 45px;
  151. color:#8E6A64;
  152. border-top: 2px solid #FEABB9;
  153. border-bottom: 2px solid #FEABB9;
  154. }
  155.  
  156. .sticky {
  157. background: url(icon/sun.gif) center no-repeat;
  158. background-color: #E6FFE1;
  159. background-position: 15px 50%;
  160. text-align: left;
  161. padding: 5px 20px 5px 45px;
  162. color:#48793F;
  163. border-top: 2px solid #FEABB9 ;
  164. border-bottom: 2px solid #FEABB9;
  165. }
  166.  
  167. .feed {
  168. background: url(icon/feed.gif) center no-repeat;
  169. background-color: #E0E0E8;
  170. background-position: 15px 50%;
  171. text-align: left;
  172. padding: 5px 20px 5px 45px;
  173. color:#333333;
  174. border-top: 2px solid #85BBDB ;
  175. border-bottom: 2px solid #85BBDB;
  176. }
  177.  
  178. .donwload {
  179. background: url(icon/download.gif) center no-repeat;
  180. background-color: #F0F0F0;
  181. background-position: 15px 50%;
  182. text-align: left;
  183. padding: 5px 20px 5px 45px;
  184. color:#666666;
  185. border-top: 2px solid #c0c0c0 ;
  186. border-bottom: 2px solid #c0c0c0;
  187. }
  188.  
  189. .code {
  190. background: #F0F0F0 url(icon/_no-image.gif) 10px 5px no-repeat;
  191. padding:5px 20px 5px 10px;
  192. font-family: Courier New, Courier, mono, times new roman;
  193. line-height:150%;
  194. border-left: 5px solid #C3D7EA;
  195. color:#666666;
  196. }
  197.  
  198. .quote {
  199. margin: 15px 10px;
  200. background:#FFFFFF url(icon/quote1.gif) top left no-repeat;
  201. padding:10px 20px 10px 60px;
  202. border-top: 2px dotted #cccccc;
  203. border-bottom: 2px dotted #cccccc;
  204. background: url(icon/quote2.gif) bottom right no-repeat;
  205. padding:10px 30px 15px 0px;
  206. font-size:110%;
  207. line-height:120%;
  208. color:#999999;
  209. font-style:italic;
  210. }
  211.  
  212. .quote_left {
  213. float:left;
  214. width: 200px;;
  215. margin: 15px 10px;
  216. background:#FFFFFF url(icon/quote1.gif) top left no-repeat;
  217. padding:10px 20px 10px 60px;
  218. border-top: 2px dotted #cccccc;
  219. border-bottom: 2px dotted #cccccc;
  220. background: url(icon/quote2.gif) bottom right no-repeat;
  221. padding:10px 30px 15px 0px;
  222. font-size:110%;
  223. line-height:120%;
  224. color:#999999;
  225. font-style:italic;
  226. }
  227.  
  228. .quote_right {
  229. float:right;
  230. width: 200px;
  231. margin: 15px 10px;
  232. background:#FFFFFF url(icon/quote1.gif) top left no-repeat;
  233. padding:10px 20px 10px 60px;
  234. border-top: 2px dotted #cccccc;
  235. border-bottom: 2px dotted #cccccc;
  236. background: url(icon/quote2.gif) bottom right no-repeat;
  237. padding:10px 30px 15px 0px;font-size:110%;
  238. line-height:120%;
  239. color:#999999;
  240. font-style:italic;
  241. }
  242.  
  243. .dropcap{
  244. float: left;
  245. text-transform:uppercase;
  246. line-height:80%;
  247. padding:0px 8px 4px 0px;
  248. display: block;
  249. color:#333333;
  250. font-size: 70px;
  251. font-family: Georgia, Times New Roman, Trebuchet MS;
  252. }

Report this snippet  

You need to login to post a comment.