Posted By

j_junyent on 12/02/07

Tagged

Versions (?)

Last Edited at 12/02/07 04:34am

Statistics

Viewed 557 times

Favorited by 3 user(s)

Related snippets

Alert messages with CSS

/ Published in: PHP

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.

Highlighted TextExpand

* @group Special Styles */
/* This is based on styles from the Sawchuk scheme for K2 */
/* http://www.deanjrobinson.com/wordpress/redoable */
.download, .code, .note,
.alert, .new, .construction,
.information {
	background-position: 15px 10px;
	background-repeat: no-repeat;
	font-size: 1.2em !important;
	line-height: 115%;
	margin: 10px auto;
	padding: 10px 10px 10px 50px;
	text-align: left;
}

ul.download, ul.code, ul.note,
ul.alert, ul.new, ul.construction,
ul.information {
	font-size: 1em !important;
	line-height: 115%;
	list-style-type: disc;
	list-style-position: inside;
	padding: 10px 10px 10px 50px;
}

ol.download, ol.code, ol.note,
ol.alert, ol.new, ol.construction,
ol.information {
	font-size: 1em !important;
	line-height: 115%;
	list-style-type: decimal;
	list-style-position: inside;
	padding: 10px 10px 10px 65px;
}

dl.download, dl.code, dl.note,
dl.alert, dl.new, dl.construction,
dl.information {
	font-size: 1em !important;
	line-height: 115%;
	padding: 10px 10px 10px 50px;
}

dl.download dt, dl.code dt, dl.note dt,
dl.alert dt, dl.new dt, dl.construction dt,
dl.information dt {
	font-size: 1.2em !important;
	font-weight: bold;
	line-height: 115%;
}

dl.download dd, dl.code dd, dl.note dd,
dl.alert dd, dl.new dd, dl.construction dd,
dl.information dd {
	line-height: 115%;
	list-style-type: disc;
}

.download {
	background-color: #353;
	background-image: url('images/package_go.png');
	border-bottom: 2px solid #383;
	border-top: 2px solid #383;
}

.download a, .download a:visited {
	border-bottom: 2px dotted #3F3;
	color: #3F3;
	text-decoration: none !important;
}

.download a:hover {
	border-bottom: 2px dotted #3C3;
	color: #3C3;
	text-decoration: none !important;
}

.code { /* use p class=code when you want to fake it, sometimes handy */
	background-color: #444;
	background-image: url('images/application_osx_terminal.png');
	border-bottom: 2px solid #AAA;
	border-top: 2px solid #AAA;
	font-family: 'Courier New', Courier, Fixed;
}

.alert {
	background-color: #533;
	background-image: url('images/exclamation.png');
	border-bottom: 2px solid #F33;
	border-top: 2px solid #F33;
}

.new {
	background-color: #643;
	background-image: url('images/new.png');
	border-bottom: 2px solid #F93;
	border-top: 2px solid #F93;
}

.construction {
	background-color: #553;
	background-image: url('images/error.png');
	border-bottom: 2px solid #FF3;
	border-top: 2px solid #FF3;
}

.information {
	background-color: #335;
	background-image: url('images/information.png');
	border-bottom: 2px solid #33F;
	border-top: 2px solid #33F;
}

.note {
	background-color: #444;
	background-image: url('images/page_white_text.png');
	border-bottom: 2px solid #AAA;
	border-top: 2px solid #AAA;
}

.callout {
	border-bottom: 2px solid #CCC;
	border-top: 2px solid #CCC;
	color: #CCC;
	font-size: 1.4em !important;
	margin: 10px auto;
	padding: 10px;
	text-align: justify;
}
/* @end */

/* based on xTypo for joomla: http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,2087/Itemid,35/ */

.info {
background: url(icon/info.gif) center no-repeat;
background-color:#F8FAFC ;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#5E6273;
border-top: 2px solid #B5D4FE ;
border-bottom: 2px solid #B5D4FE;
}

.warning {
background: url(icon/warning.gif) center no-repeat;
background-color: #FBEEF1;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#8E6A64;
border-top: 2px solid #FEABB9;
border-bottom: 2px solid #FEABB9;
}

.sticky {
background: url(icon/sun.gif) center no-repeat;
background-color: #E6FFE1;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#48793F;
border-top: 2px solid #FEABB9 ;
border-bottom: 2px solid #FEABB9;
}

.feed {
background: url(icon/feed.gif) center no-repeat;
background-color: #E0E0E8;	
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#333333;
border-top: 2px solid #85BBDB ;
border-bottom: 2px solid #85BBDB;
}

.donwload {
background: url(icon/download.gif) center no-repeat;
background-color: #F0F0F0;	
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#666666;
border-top: 2px solid #c0c0c0 ;
border-bottom: 2px solid #c0c0c0;
}

.code {	
background: #F0F0F0 url(icon/_no-image.gif) 10px 5px no-repeat;
padding:5px 20px 5px 10px;
font-family: Courier New, Courier, mono, times new roman;
line-height:150%;
border-left: 5px solid #C3D7EA;	 
color:#666666;
}

.quote {
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;
font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}

.quote_left {
float:left;
width: 200px;;
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;
font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}

.quote_right {
float:right;
width: 200px;
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}

.dropcap{
float: left;
text-transform:uppercase;
line-height:80%;
padding:0px 8px 4px 0px;
display: block;
color:#333333;
font-size: 70px;
font-family: Georgia, Times New Roman, Trebuchet MS;
}

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.