MyBB Community Forums

Full Version: Issue With AdminCP Themes
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
This is a continuation of the thread starting HERE.

In all of the 4 themes that I have installed for my AdminCP, none of them can open the 'Set Custom Permissions' link.

Here's what I mean... as shown in the Cerise AdminCP theme. (1st screenshot)

The default MyBB AdminCP theme, it's the same issue. (2nd screenshot)

Does anyone have any idea what might be causing this weird issue?

[Image: 28e5ff1b394675ebbd24be43e16eccff.png]

[Image: 6f29311db6ef0e145546ccc245ea8d89.png]
(2018-11-11, 01:24 PM)Serpius Wrote: [ -> ]This is a continuation of the thread starting HERE.

In all of the 4 themes that I have installed for my AdminCP, none of them can open the 'Set Custom Permissions' link.

Here's what I mean... as shown in the Cerise AdminCP theme. (1st screenshot)

The default MyBB AdminCP theme, it's the same issue. (2nd screenshot)

Does anyone have any idea what might be causing this weird issue?

[Image: 28e5ff1b394675ebbd24be43e16eccff.png]

[Image: 6f29311db6ef0e145546ccc245ea8d89.png]

Perhaps your modal css is not updated even on the default theme? I only say this because I cannot recreate the problrm in the default or any of the acp styles mentioned since the modal update last night.

For default:

Make sure your modal.css is this:

.blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 9999;
	padding: 20px;
	box-sizing: border-box;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.75);
	text-align: center;
}

.blocker:before{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em;
}

.blocker.behind {
	background-color: transparent;
}

.modal {
	width: 400px;
	text-align: left;
	background: #fff;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-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;
}

In main.css:

Make sure jgrowl is this:

/** 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: 				#fff;
	font-size: 			12px;
	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 **/
.center .jGrowl-notification, .center .jGrowl-closer {
	margin-left: 		auto;
	margin-right: 		auto;
}

.jGrowl .jGrowl-notification, .jGrowl .jGrowl-closer {
	background-color: 		transparent;
	opacity: 				.85;
	-ms-filter: 			"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; 
	filter: 				progid:DXImageTransform.Microsoft.Alpha(Opacity=85); 
	zoom: 					1;
	width: 					235px;
	padding: 				10px;
	margin-top: 			5px;
	margin-bottom: 			5px;
	font-family: 			Tahoma, Arial, Helvetica, sans-serif;
	font-size: 				1em;
	text-align: 			left;
	display: 				none;
	-moz-border-radius:     5px;
	-webkit-border-radius:  5px;
	border-radius:          5px;
}

.jGrowl .jGrowl-notification {
	min-height: 			40px;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
	margin: 				10px;
}

.jGrowl .jGrowl-notification .jGrowl-header {
	font-weight: 			bold;
	font-size:				.85em;
}

.jGrowl .jGrowl-notification .jGrowl-close {
	z-index:				99;
	float: 					right;
	font-weight: 			bold;
	font-size: 				1em;
	cursor:					pointer;
}

.jGrowl .jGrowl-closer {
	padding-top: 			4px;
	padding-bottom: 		4px;
	cursor: 				pointer;
	font-size:				.9em;
	font-weight: 			bold;
	text-align: 			center;
}

.jGrowl .jGrowl-notification.jgrowl_success {
    background: lightgreen;
    border: 1px solid lightgreen;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_error {
    background: red;
    border: 1px solid red;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_process, .jGrowl .jGrowl-closer {
    background: yellow;
    border: 1px solid yellow;
    color: #333;
}

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

/** jGrowl End **/

The cerise, cerulean, dim, olive, indigo, sanfelix, tawny, teal acp styles have all been updated for this after your report for advanced sidebox last night though their modal styling is slighlty different to reflect dark style..., but you should not need to edit them just overwrite with the updated package.
(2018-11-11, 08:54 PM)vintagedaddyo Wrote: [ -> ]
(2018-11-11, 01:24 PM)Serpius Wrote: [ -> ]This is a continuation of the thread starting HERE.

In all of the 4 themes that I have installed for my AdminCP, none of them can open the 'Set Custom Permissions' link.

Here's what I mean... as shown in the Cerise AdminCP theme. (1st screenshot)

The default MyBB AdminCP theme, it's the same issue. (2nd screenshot)

Does anyone have any idea what might be causing this weird issue?

[Image: 28e5ff1b394675ebbd24be43e16eccff.png]

[Image: 6f29311db6ef0e145546ccc245ea8d89.png]

Perhaps your modal css is not updated even on the default theme? I only say this because I cannot recreate the problrm in the default or any of the acp styles mentioned since the modal update last night.

For default:

Make sure your modal.css is this:

.blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 9999;
	padding: 20px;
	box-sizing: border-box;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.75);
	text-align: center;
}

.blocker:before{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em;
}

.blocker.behind {
	background-color: transparent;
}

.modal {
	width: 400px;
	text-align: left;
	background: #fff;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-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;
}

In main.css:

Make sure jgrowl is this:

/** 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: 				#fff;
	font-size: 			12px;
	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 **/
.center .jGrowl-notification, .center .jGrowl-closer {
	margin-left: 		auto;
	margin-right: 		auto;
}

.jGrowl .jGrowl-notification, .jGrowl .jGrowl-closer {
	background-color: 		transparent;
	opacity: 				.85;
	-ms-filter: 			"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; 
	filter: 				progid:DXImageTransform.Microsoft.Alpha(Opacity=85); 
	zoom: 					1;
	width: 					235px;
	padding: 				10px;
	margin-top: 			5px;
	margin-bottom: 			5px;
	font-family: 			Tahoma, Arial, Helvetica, sans-serif;
	font-size: 				1em;
	text-align: 			left;
	display: 				none;
	-moz-border-radius:     5px;
	-webkit-border-radius:  5px;
	border-radius:          5px;
}

.jGrowl .jGrowl-notification {
	min-height: 			40px;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
	margin: 				10px;
}

.jGrowl .jGrowl-notification .jGrowl-header {
	font-weight: 			bold;
	font-size:				.85em;
}

.jGrowl .jGrowl-notification .jGrowl-close {
	z-index:				99;
	float: 					right;
	font-weight: 			bold;
	font-size: 				1em;
	cursor:					pointer;
}

.jGrowl .jGrowl-closer {
	padding-top: 			4px;
	padding-bottom: 		4px;
	cursor: 				pointer;
	font-size:				.9em;
	font-weight: 			bold;
	text-align: 			center;
}

.jGrowl .jGrowl-notification.jgrowl_success {
    background: lightgreen;
    border: 1px solid lightgreen;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_error {
    background: red;
    border: 1px solid red;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_process, .jGrowl .jGrowl-closer {
    background: yellow;
    border: 1px solid yellow;
    color: #333;
}

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

/** jGrowl End **/

The cerise, cerulean, dim, olive, indigo, sanfelix, tawny, teal acp styles have all been updated for this after your report for advanced sidebox last night though their modal styling is slighlty different to reflect dark style..., but you should not need to edit them just overwrite with the updated package.

I did make the changes for the Default AdminCP theme, nothing changed. 

However, I thought of something while I was trying to do the 'Set Custom Permissions'...

Could it be that because I renamed the original 'admin' folder to another folder name (for example XYZ123), could this be causing an issue with the 'Set Custom Permissions' box not showing up except for forcing the browser to show it in either Tab or Window?

In other words, could it be that the AdminCP is hardcoded to look for the 'admin' folder?


(to anyone who is reading this and is wondering why renamed the 'admin' folder to something else is for security reasons. Read more HERE)