MyBB Community Forums

MyBB Community Forums > 1.8 Support > General Support > CSS (removing of jGrowl)
Full Version: CSS (removing of jGrowl)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Nicole-Studios

2017-01-11, 04:02 PM
I'm thoroughly curious to know what would happen if I was to remove this from my CSS?

What is it's purpose? Is it important? Should it not be removed? etc. etc.

I'm asking because it just seems to be a clutter of mess I do not understand and the more you have it always seems to be the slower your page will load.

/** jGrowl Start **/

/** Special IE6 Style Positioning **/
.ie6 {
	position: absolute;
}

.ie6.top-right {
	right: auto;
	bottom: auto;
	left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.top-left {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-right {
	left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-left {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.center {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	width: 100%;
}

/** jGrowl Styling **/
.jGrowl {
  z-index: 9999;
  color: #ffffff;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: fixed;
}
.jGrowl.top-left {
  left: 0px;
  top: 0px;
}
.jGrowl.top-right {
  right: 0px;
  top: 0px;
}
.jGrowl.bottom-left {
  left: 0px;
  bottom: 0px;
}
.jGrowl.bottom-right {
  right: 0px;
  bottom: 0px;
}
.jGrowl.center {
  top: 0px;
  width: 50%;
  left: 25%;
}

/** Cross Browser Styling **/

.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer {
  margin-left: auto;
  margin-right: auto;
}
.jGrowl-notification {
  background-color: #000000;
  opacity: 0.9;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  zoom: 1;
  width: 250px;
  padding: 10px;
  margin: 10px;
  text-align: left;
  display: none;
  border-radius: 5px;
  word-break: break-all;
  min-height: 40px;
}
.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
  border: 1px solid #000;
  background: #000;
  color: #fff;
}
.jGrowl-notification .jGrowl-header {
  font-weight: bold;
  font-size: .85em;
}
.jGrowl-notification .jGrowl-close {
  background-color: transparent;
  color: inherit;
  border: none;
  z-index: 99;
  float: right;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
}
.jGrowl-closer {
  background-color: #000000;
  opacity: 0.9;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  zoom: 1;
  width: 250px;
  padding: 10px;
  margin: 10px;
  text-align: left;
  display: none;
  border-radius: 5px;
  word-break: break-all;
  padding-top: 4px;
  padding-bottom: 4px;
  cursor: pointer;
  font-size: .9em;
  font-weight: bold;
  text-align: center;
}
.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
  border: 1px solid #000;
  background: #000;
  color: #fff;
}

/** Hide jGrowl when printing **/
@media print {
	.jGrowl {
		display: none;
	}
}

/** jGrowl End **/

/** Modal Start **/

.modal {
	display: none;
	width: 400px;
	text-align: left;
	background: #fff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
	display: none;
	width: 64px;
	height: 64px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-right: -32px;
	margin-top: -32px;
	background: url(images/spinner_big.gif) no-repeat center center;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

/** Modal End **/

/** Impromptu Start **/

/*! jQuery-Impromptu - v6.2.1 - 2015-05-10
* http://trentrichardson.com/Impromptu
* Copyright (c) 2015 Trent Richardson; Licensed MIT */

.jqifade{
	position: absolute; 
	background-color: #777777; 
}
iframe.jqifade{
	display:block;
	z-index:-1;
}
div.jqi{ 
	width: 400px; 
	max-width:90%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
	position: absolute; 
	background-color: #ffffff; 
	font-size: 11px; 
	text-align: left; 
	border: solid 1px #eeeeee;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	padding: 7px;
}
div.jqi .jqicontainer{ 
}
div.jqi .jqiclose{ 
	position: absolute;
	top: 4px; right: -2px; 
	width: 18px; 
	cursor: default; 
	color: #bbbbbb; 
	font-weight: bold; 
}
div.jqi .jqistate{
	background-color: #fff;
}
div.jqi .jqititle{
	padding: 5px 10px;
	font-size: 16px; 
	line-height: 20px; 
	border-bottom: solid 1px #eeeeee;
}
div.jqi .jqimessage{ 
	padding: 10px; 
	line-height: 20px; 
	color: #444444; 
	overflow: auto;
}
div.jqi .jqibuttonshide{
	display: none;
} 
div.jqi .jqibuttons{ 
	text-align: right; 
	margin: 0 -7px -7px -7px;
	border-top: solid 1px #e4e4e4; 
	background-color: #f4f4f4;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
}
div.jqi .jqibuttons button{ 
	margin: 0;
	padding: 15px 20px;
	background-color: transparent;
	font-weight: normal; 
	border: none;
	border-left: solid 1px #e4e4e4; 
	color: #777; 
	font-weight: bold; 
	font-size: 12px; 
}
div.jqi .jqibuttons button.jqidefaultbutton{
	color: #489afe;
}
div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus{
	color: #287ade;
	outline: none;
}
div.jqi .jqibuttons button[disabled]{
	color: #aaa;
}
.jqiwarning .jqi .jqibuttons{ 
	background-color: #b95656;
}

/* sub states */
div.jqi .jqiparentstate::after{ 
	background-color: #777;
	opacity: 0.6;
	filter: alpha(opacity=60);
	content: '';
	position: absolute;
	top:0;left:0;bottom:0;right:0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
div.jqi .jqisubstate{
	position: absolute;
	top:0;
	left: 20%;
	width: 60%;
	padding: 7px;
	border: solid 1px #eeeeee;
	border-top: none;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
}
div.jqi .jqisubstate .jqibuttons button{
	padding: 10px 18px;
}

/* arrows for tooltips/tours */
.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}

.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }

.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }

.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }

.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }

/** Impromptu End */

Kristo

2017-01-21, 11:32 PM
I've got the exact same question. I only know that one of the plugins I'm using uses jGrowl, but do any of the MyBB internal features?

NickGHQ

2017-01-22, 08:20 AM
Some error/confirmation messages are handled with jGrowl, although not many I wouldn't remove it.
See https://github.com/mybb/mybb/search?utf8...3&q=jGrowl

There's also CSS for modals and jqi included in what you posted, both of which are important.


To reduce the mess, you can format the selectors differently if you want, here's how I personally format all of mine:
.jGrowl-notification .jGrowl-close {background-color:transparent;color:inherit;border:none;z-index:99;float:right;font-weight:bold;font-size:1em;cursor:pointer;}

Nicole-Studios

2017-01-25, 05:15 PM
Thank you for the answer!

I'll just do as you suggest and push them closer together. Smile
MyBB Community Forums > 1.8 Support > General Support > CSS (removing of jGrowl)