SMF CSS Help

Smythe · April 30, 2013, 09:52:06 PM

I am using the PremiumMGC template for my SMF Forum, with TinyPortal add-on, and I have a general question regarding ONE change...lol been searching the internet like crazy and figured that this might be the best place to ask.

I want to change the background of the theme monthly using css/php whichever is easier. I have looked on the net and found a way to make the background image change each time the page is refreshed (rotator.php) however I would like it to select a SPECIFIC image based on the current month...server side or user side whichever is easier. I have tried many options however I can't get it to work. I am no coding guru, everything I have learned is self taught.

I would greatly appreciate any assistance that could be offered with this query.

Smythe

TheListener · April 30, 2013, 10:10:54 PM

Have you asked the themes author?

Smythe · April 30, 2013, 10:12:40 PM

Sent a message there, the forums they offer, however it doesnt seem they are ins use... last post was like 1-2 yrs ago... lol

TheListener · April 30, 2013, 10:13:57 PM

Quote from: Smythe on April 30, 2013, 10:12:40 PM
Sent a message there, the forums they offer, however it doesnt seem they are ins use... last post was like 1-2 yrs ago... lol

and the author was?

Smythe · April 30, 2013, 10:19:13 PM

Ricky @ ifandbut.com ??

TheListener · April 30, 2013, 10:23:04 PM

I snoticed there was no theme copyright on your forum.

May I suggest you contact Ricky and ask for help after you replace this.

This topic will be shortly be locked until the theme copyright is replaced.

TheListener · April 30, 2013, 10:38:57 PM

OK I have spoken to a couple teamies.

Which link is your forum? You gave me two.

Smythe · May 01, 2013, 07:22:20 AM

Testls.sytes.net is my site, don't think I ever gave it to you...

But all copyright info is intact

MrPhil · May 01, 2013, 11:07:10 AM

The background image is normally set (fixed) in one of the CSS files. To set it per month would best be done on the server side, in PHP, rather than on the client side in JavaScript (where you might have to send over 12 large images!). That would mean removing the background-image property from CSS* and adding PHP code to put a style="background-image: xxxxx.jpg" in the <body> tag. Then you need a bit of code around there to get the current month number and select the background image to use based on the month (put the name into the style= attribute). I'm not familiar with this rotator mod, but if it works exclusively on the server (PHP) side, it might be something you could cannibalize as a start for your code.

* If you leave the CSS background-image in, that might not do any harm, as the style= attribute should override it.

Note that this will set the background image based on your server's (default/guest) timezone, so it could be the wrong month for some users for up to 24 hours at the beginning or end of the month. An alternative, which would have the same problem but not involve any code changes, would be to use a "cron job" to copy the desired image into the fixed image name. Your forum is always using "background.jpg", but that file changes its content once a month. Note that due to browser caching, it could be a few days before the member sees the changed image.

TheListener · May 01, 2013, 06:03:33 PM

@Smythe

I retract what I said I got confused with the links you gave me.

Thanks MrPhil for stepping in.

Smythe · May 01, 2013, 09:34:55 PM

yeah I gues swhat I am looking for is a little help with the coding...

I have a pretty good working knowledge of some of the code but not the exact php code bit to get the current month and then output the image...

Code Select

body
{
	background: url(../images/theme/backdrop/rotator.php);
	background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center; 
	font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
	margin: 0 auto 0em auto;
}

rotater.php currently does the leg work of the random background.... just need the .php bits to get the monthly thing working....

any thoughts??

MrPhil · May 01, 2013, 11:04:02 PM

Code Select


$mon = getdate()['mon'];  // 1-12
$month_files = array('janname.jpg', 'febname.jpg',... );
$bg_filename = $month_files[$mon-1];
... however the filename is used to return the image itself ...

should get you started. rotator.php is reading and returning the image itself, so you should just have to replace the random selection of a file name with code similar to the above.

Smythe · May 02, 2013, 07:46:19 PM

The code below is the rotator.php work.... I am not sure what I am looking for.... I guess I need to figure out where to replace.... I just thought it might be easier to come up with a new file all together

Code Select

$img = null;

if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}

if (isset($_GET['img'])) {
	$imageInfo = pathinfo($_GET['img']);
	if (
	    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
		$img = $folder.$imageInfo['basename'];
	}
} else {
	$fileList = array();
	$handle = opendir($folder);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (
		    isset( $extList[ strtolower( $file_info['extension'] ) ] )
		) {
			$fileList[] = $file;
		}
	}
	closedir($handle);

	if (count($fileList) > 0) {
		$imageNumber = time() % count($fileList);
		$img = $folder.$fileList[$imageNumber];
	}
}

if ($img!=null) {
	$imageInfo = pathinfo($img);
	$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
	header ($contentType);
	readfile($img);
} else {
	if ( function_exists('imagecreate') ) {
		header ("Content-type: image/png");
		$im = @imagecreate (100, 100)
		    or die ("Cannot initialize new GD image stream");
		$background_color = imagecolorallocate ($im, 255, 255, 255);
		$text_color = imagecolorallocate ($im, 0,0,0);
		imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
		imagepng ($im);
		imagedestroy($im);
	}
}

Smythe · May 02, 2013, 08:38:47 PM

I have tried the following code....

Code Select

<?php


 // Image File Ext.
 
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';

//today and Image to use per today

$month = date('m');
printf('$month');

if ($month == 01) {
    $image = "01.jpg";
}
elseif ($month == 02) {
    $image = "02.jpg";
}
elseif ($month == 03) {
    $image = "03.jpg";
}
elseif ($month == 04) {
    $image = "04.jpg";
}
elseif ($month == 05) {
    $image = "05.jpg";
}
elseif ($month == 06) {
    $image = "06.jpg";
}
elseif ($month == 07) {
    $image = "07.jpg";
}
elseif ($month == 08) {
    $image = "08.jpg";
}
elseif ($month == 09) {
    $image = "09.jpg";
}
elseif ($month == 10) {
    $image = "10.jpg";
}
elseif ($month == 11) {
    $image = "11.jpg";
}
elseif($month == 12) {
    $image = "12.jpg";
}

?>

Any suggestions?

MrPhil · May 03, 2013, 09:19:11 AM

Code Select

$image = sprintf("%02d.jpg", $month);
will eliminate that long if-elseif chain.

You need to decide if your background image is going to be tiled or a single image, and set its size accordingly. There are supposedly methods for rescaling a single background image to fit, but I haven't tried them.

The current code makes a list of all the image files in the specified directory, splitting up the names into path/basename/extension. It "randomly" selects the image with a modulo (%) operation on the current time. At that point you could get the month number and use that as the $imageNumber index (after subtracting 1). It simply reads in the chosen file and outputs it to the page.

If this is beyond your PHP skills, I would suggest merely overwriting a fixed name background image file with new content once a month. Your page would always pick up the same image name from your server, but each month the picture would be different in the file.

News:

SMF CSS Help

Smythe

TheListener

Smythe

TheListener

Smythe

TheListener

TheListener

Smythe

MrPhil

TheListener

Smythe

MrPhil

Smythe

Smythe

MrPhil