Resource icon

XenForo CSS3 Notifications

Shelley_c

Ensign
nevOJ.png
View attachment 522

Summary You will need to have Notifications - powered by Gritter - Developed by Chris Deeming to use this.

Additional Notes: I've made alterations for images to be used as a fallback for older browsers and (excuse my french) That piece of felgercarb browser ie9 that handles css3 gradients in such a disgusting way it's not funny, and entailed more work to having them look good in ie9.

Install Upload the image(s) in one of the archive and put that in your /gradients folder. You will then have to create your notification and use the custom field and insert one of the following classes in one of the five notification below (check css code for class names) and upload the corresponding zip file into /gradients folder. and then paste the following into your Extra.css template and done.

Code:
/*gradient css3 1 NOTIFICATION ENHANCEMENT*/
 
 
.shelley1 .gritter-item{
 
	background: url("@imagePath/xenforo/gradients/shelley1gradientnotification.png") repeat-x scroll top #991706; /* Old browsers */
background: -moz-linear-gradient(top, #dd776a 0%, #ce4a35 2%, #bf3020 4%, #a82c19 29%, #992313 59%, #991706 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd776a), color-stop(2%,#ce4a35), color-stop(4%,#bf3020), color-stop(29%,#a82c19), color-stop(59%,#992313), color-stop(100%,#991706)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dd776a 0%,#ce4a35 2%,#bf3020 4%,#a82c19 29%,#992313 59%,#991706 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dd776a 0%,#ce4a35 2%,#bf3020 4%,#a82c19 29%,#992313 59%,#991706 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dd776a 0%,#ce4a35 2%,#bf3020 4%,#a82c19 29%,#992313 59%,#991706 100%); /* IE10+ */
background: linear-gradient(to bottom, #dd776a 0%,#ce4a35 2%,#bf3020 4%,#a82c19 29%,#992313 59%,#991706 100%); /* W3C */
	border: 1px solid #990F00;
	border-radius: 6px;
}
 
.shelley1 .gritter-title {
  color: #ffbe84!important;
  text-shadow: 0 0 0 transparent, 0 1px 2px #012331;
  border-bottom: 1px solid #872114;
  padding-bottom: 3px;
  margin-bottom: 3px;
  box-shadow: 0 0 0 transparent, 0 1px 0 #c9412f;
}
 
.shelley1 .gritter-close  {
	background: url("@imagePath/xenforo/gradients/shelley1notificationclose.png") no-repeat scroll top left transparent;
	right: -14px !important;
	top: -14px !important;
}
.shelley1 .gritter-item p {
	padding-bottom: 15px;
	color: #f4dedb;
}
 
.shelley1 .gritter-item a {
	color: #f0b988;
	font-weight: bold;
}
 
.shelley1 .gritter-item a:hover {
  -moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	opacity: 0.6;
}
 
.shelley1 .gritter-dismiss {
	font-size: 9px;
}
 
/*gradient css3 1 NOTIFICATION ENHANCEMENT*/

Code:
/*gradient css3 2 NOTIFICATION ENHANCEMENT*/
 
.shelley2 .gritter-item{
	background: url("@imagePath/xenforo/gradients/shelley2gradientnotification.png") repeat-x scroll top #6d0019; /* Old browsers */
background: -moz-linear-gradient(top, #a54359 0%, #a82844 2%, #8e132e 4%, #8e0b27 50%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a54359), color-stop(2%,#a82844), color-stop(4%,#8e132e), color-stop(50%,#8e0b27), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a54359 0%,#a82844 2%,#8e132e 4%,#8e0b27 50%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a54359 0%,#a82844 2%,#8e132e 4%,#8e0b27 50%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a54359 0%,#a82844 2%,#8e132e 4%,#8e0b27 50%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #a54359 0%,#a82844 2%,#8e132e 4%,#8e0b27 50%,#6d0019 100%); /* W3C */
	border: 1px solid #570114;
	border-radius: 6px;
}
 
.shelley2 .gritter-title {
  color: #e2a4b2!important;
  text-shadow: 0 0 0 transparent, 0 1px 2px #012331;
  border-bottom: 1px solid #6e0c22;
  padding-bottom: 3px;
  margin-bottom: 3px;
  box-shadow: 0 0 0 transparent, 0 1px 0 #ab1c3b;
}
 
.shelley2 .gritter-close  {
	background: url("@imagePath/xenforo/gradients/shelley2notificationclose.png") no-repeat scroll top left transparent;
	right: -14px !important;
	top: -14px !important;
}
.shelley2 .gritter-item p {
	padding-bottom: 15px;
	color: #f4dedb;
}
 
.shelley2 .gritter-item a {
	color: #e08096;
	font-weight: bold;
}
 
.shelley2 .gritter-item a:hover {
  -moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	opacity: 0.6;
}
 
.shelley2 .gritter-dismiss {
	font-size: 9px;
}
 
/*gradient css3 2 NOTIFICATION ENHANCEMENT*/

Code:
/*gradient css3 3 NOTIFICATION ENHANCEMENT*/
 
.shelley3 .gritter-item{
	background: url("@imagePath/xenforo/gradients/shelley3gradientnotification.png") repeat-x scroll top #00605f; /* Old browsers */
background: -moz-linear-gradient(top, #79b7b7 0%, #4ea3a3 2%, #38918f 4%, #238e8d 29%, #00605f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#79b7b7), color-stop(2%,#4ea3a3), color-stop(4%,#38918f), color-stop(29%,#238e8d), color-stop(100%,#00605f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #79b7b7 0%,#4ea3a3 2%,#38918f 4%,#238e8d 29%,#00605f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #79b7b7 0%,#4ea3a3 2%,#38918f 4%,#238e8d 29%,#00605f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #79b7b7 0%,#4ea3a3 2%,#38918f 4%,#238e8d 29%,#00605f 100%); /* IE10+ */
background: linear-gradient(to bottom, #79b7b7 0%,#4ea3a3 2%,#38918f 4%,#238e8d 29%,#00605f 100%); /* W3C */
	border: 1px solid #066366;
	border-radius: 6px;
}
 
.shelley3 .gritter-title {
  color: #c7f1f2 !important;
  text-shadow: 0 0 0 transparent, 0 1px 2px #012331;
  border-bottom: 1px solid #1b6e6d;
  padding-bottom: 3px;
  margin-bottom: 3px;
  box-shadow: 0 0 0 transparent, 0 1px 0 #46aead;
}
 
.shelley3 .gritter-close  {
	background: url("@imagePath/xenforo/gradients/shelley3notificationclose.png") no-repeat scroll top left transparent;
	right: -14px !important;
	top: -14px !important;
}
.shelley3 .gritter-item p {
	padding-bottom: 15px;
	color: #f4dedb;
}
 
.shelley3 .gritter-item a {
	color: #ffebb5;
	font-weight: bold;
}
 
.shelley3 .gritter-item a:hover {
  -moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	opacity: 0.6;
}
 
.shelley3 .gritter-dismiss {
	font-size: 9px;
}
 
/*gradient css3 3 NOTIFICATION ENHANCEMENT*/

Code:
/*gradient css3 4 NOTIFICATION ENHANCEMENT*/
 
.shelley4 .gritter-item{
	background: url("@imagePath/xenforo/gradients/shelley4gradientnotification.png") repeat-x scroll top #016000; /* Old browsers */
background: -moz-linear-gradient(top, #74ad74 0%, #4fa54f 2%, #2d9332 4%, #1d8e21 29%, #016000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#74ad74), color-stop(2%,#4fa54f), color-stop(4%,#2d9332), color-stop(29%,#1d8e21), color-stop(100%,#016000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #74ad74 0%,#4fa54f 2%,#2d9332 4%,#1d8e21 29%,#016000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #74ad74 0%,#4fa54f 2%,#2d9332 4%,#1d8e21 29%,#016000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #74ad74 0%,#4fa54f 2%,#2d9332 4%,#1d8e21 29%,#016000 100%); /* IE10+ */
background: linear-gradient(to bottom, #74ad74 0%,#4fa54f 2%,#2d9332 4%,#1d8e21 29%,#016000 100%); /* W3C */
	border: 1px solid #016000;
	border-radius: 6px;
}
 
.shelley4 .gritter-title {
  color: #b6f4b5 !important;
  text-shadow: 0 0 0 transparent, 0 1px 2px #012331;
  border-bottom: 1px solid #166c1a;
  padding-bottom: 3px;
  margin-bottom: 3px;
  box-shadow: 0 0 0 transparent, 0 1px 0 #36b03a;
}
 
.shelley4 .gritter-close  {
	background: url("@imagePath/xenforo/gradients/shelley4notificationclose.png") no-repeat scroll top left transparent;
	right: -14px !important;
	top: -14px !important;
}
.shelley4 .gritter-item p {
	padding-bottom: 15px;
	color: #f4dedb;
}
 
.shelley4 .gritter-item a {
	color: #ffebb5;
	font-weight: bold;
}
 
.shelley4 .gritter-item a:hover {
  -moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	opacity: 0.6;
}
 
.shelley4 .gritter-dismiss {
	font-size: 9px;
}
 
/*gradient css3 4 NOTIFICATION ENHANCEMENT*/

Code:
/*gradient css3 5 NOTIFICATION ENHANCEMENT*/
 
.shelley5 .gritter-item{
	background: url("@imagePath/xenforo/gradients/shelley5gradientnotification.png") repeat-x scroll top #540000; /* Old browsers */
background: -moz-linear-gradient(top, #ba8080 0%, #b53939 2%, #992424 4%, #871f1f 29%, #6d1515 65%, #540000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ba8080), color-stop(2%,#b53939), color-stop(4%,#992424), color-stop(29%,#871f1f), color-stop(65%,#6d1515), color-stop(100%,#540000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ba8080 0%,#b53939 2%,#992424 4%,#871f1f 29%,#6d1515 65%,#540000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ba8080 0%,#b53939 2%,#992424 4%,#871f1f 29%,#6d1515 65%,#540000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ba8080 0%,#b53939 2%,#992424 4%,#871f1f 29%,#6d1515 65%,#540000 100%); /* IE10+ */
background: linear-gradient(to bottom, #ba8080 0%,#b53939 2%,#992424 4%,#871f1f 29%,#6d1515 65%,#540000 100%); /* W3C */
  border: 1px solid #550000;
  border-radius: 6px;
}
 
.shelley5 .gritter-title {
  color: #ffdada !important;
  text-shadow: 0 0 0 transparent, 0 1px 2px #012331;
  border-bottom: 1px solid #691717;
  padding-bottom: 3px;
  margin-bottom: 3px;
  box-shadow: 0 0 0 transparent, 0 1px 0 #aa2e2e;
}
 
.shelley5 .gritter-close  {
	background: url("@imagePath/xenforo/gradients/shelley5notificationclose.png") no-repeat scroll top left transparent;
	right: -14px !important;
	top: -14px !important;
}
.shelley5 .gritter-item p {
	padding-bottom: 15px;
	color: #f4dedb;
}
 
.shelley5 .gritter-item a {
	color: #ffebb5;
	font-weight: bold;
}
 
.shelley5 .gritter-item a:hover {
  -moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	opacity: 0.6;
}
 
.shelley5 .gritter-dismiss {
	font-size: 9px;
}
 
/*gradient css3 5 NOTIFICATION ENHANCEMENT*/


Conditions of use: This pack may be used on forums, websites but cannot be redistributed or repackaged in any way shape or form for any reason without prior consent of the author.
 

Attachments

  • Notification1 (BBSmiley.com).zip
    3.1 KB · Views: 210
  • Notification2 (BBSmiley.com).zip
    3.1 KB · Views: 194
  • Notification3 (BBSmiley.com).zip
    3.1 KB · Views: 201
  • Notification4 (BBSmiley.com).zip
    3.1 KB · Views: 141
  • Notification5 (BBSmiley.com).zip
    3.1 KB · Views: 126
  • notificationpreviewcssgradient.png
    notificationpreviewcssgradient.png
    100.3 KB · Views: 167
Back
Top