MyBB Community Forums

Solved

. It seems that the standard image used in the theme CSS at body had to be removed to let the script work Smile

I'm trying to make a simple plugin for a friend using a MyBB site. It's supposed to be a background changer. Aside from having the option to change the theme, he'd like to see simply change the image he's using in the background to be changed by user-choice.

At the moment it's all in its early try-out and it's limited to 3 different images. It's done by using a cookie, retrieving the value from the cookie and then set it to change the background. Of course...all works but the last part in MyBB itself.

So how does one go to override the background image defined in the 'body' of the CSS?
(I don't want to change the #container one, which is yet one behind it)
I've tried these and many variations >.<:
document.body.background
document.body.style.background
document.body.backgroundImage
document.body.style.backgroundImage

I've never worked with MyBB before and I'm not an ace at coding, so I'm hoping it's something I have overlooked Big Grin

. (probably worse Sleepy

)

Would someone be so kind to point me in the right direction, or stop me if there's an alternative or if it's probably best to end it at all Toungue

?

The cookie is changed on a special page, this is just the php used for the plugin.

<?php
if(!defined("IN_MYBB"))
{
	die("Direct initialization of this file is not allowed.<br /><br />Please make sure IN_MYBB is defined.");
}

$plugins->add_hook("global_end","cbwswc");

function changeBackgroundwSWCookie_info()
{
	return array(
		"name"			=> "Change Background with Cookie",
		"description"	=> "Change Background with Cookie",
		"website"		=> "",
		"author"		=> "",
		"authorsite"	=> "",
		"version"		=> "0.1",
		"compatibility" => "16*",
		"guid"			=> ""
	);
}

function changeBackgroundwSWCookie_activate()
{
}

function changeBackgroundwSWCookie_deactivate()
{
}

function cbwswc()
{
	global $headerinclude;
	$headerinclude .= "<script type=\"text/javascript\">
function get_cookie ( cookie_name )
{
	var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

	if ( results )
    	return ( unescape ( results[2] ) );
	else
		return null;
}
var myimages=new Array()

	myimages[1]='img1.gif';
	myimages[2]='img2.gif';
	myimages[3]='img3.gif';

var whichimage = get_cookie ( 'sw_background' );

if (whichimage!=null && whichimage!=''){
	document.body.background = myimages[whichimage];
	document.write('cookievalue' + whichimage); //test purposes
}

</script>";
}
?>

The background-image I want to replace from the theme:

body {
	background: url(../../../images/static/bg_body_2.jpg) no-repeat fixed 50% 0 #000000;
	color: #A0A0A0;
	text-align: center;
	line-height: 1.4;
	margin: 0;
	
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

and to spam some more information. This is the source I'm basing off outside mybb.

<html>
<head>
<script src="sw_bgcookie.js"></script>
</head>
<body onload="sw_cookieloader()">
<input type="button" onclick="javascript:random_imglink(1)" value="Zebra!">
<input type="button" onclick="javascript:random_imglink(2)" value="Shark!">
<input type="button" onclick="javascript:random_imglink(3)" value="Turtle!">
</body>
</html>

<!--
//**executes immediately/onload.**\\
//retrieving correct cookie.
function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}
//initial variables.
 var whichimage = get_cookie ( "sw_background" );
 var today = new Date(); 
 expires = 31536000000; //a year in miliseconds.
 var expires_date = new Date(today.getTime() + expires); //pres-sets correct expiration vs today.
//---------------
 var myimages=new Array()
  myimages[1]="img1.gif";
  myimages[2]="img2.gif";
  myimages[3]="img3.gif";
//---------------
//The factual background changer upon (re)load which corresponds with the bodyload in the html.
function sw_cookieloader(){
  if (whichimage!=null && whichimage!=""){
  document.body.background = myimages[whichimage];
  }
}

//**executes on request/after load**\\
//changes the background image upon user-click.
function random_imglink(whichimage){
  document.body.background = myimages[whichimage];
  document.cookie="sw_background" + "=" + whichimage + '; expires=' + expires_date.toGMTString();
}

//-->

Pronam