Jump to content

PHP + CSS


cpugeek

Recommended Posts

I'm currently trying to make a style changer specifically for my background images. I currently have a working style changer but it requires a style sheet for each background, and I plan to add A LOT of background choices, which would be TOO MANY style sheets. So I'm trying to figure out how to make it more dynamic using a MySql db to store all of the image paths [cookies for the preferred bg path]. I'm not even sure how I would do this, which I know sounds nooby, but all of my approaches don't seem to work.Any and All help is appreciated. [:

Link to comment
Share on other sites

Would something like this work?

<?php	$bg = $_COOKIE["bg"];		if($bg == null)	{		$result = mysql_query("SELECT path FROM cssBackgrounds LIMIT 0, 1");		$arr = mysql_fetch_array($result);		$bg = $arr[0];				setcookie("bg", $bg, time()+999999999, "/"); 	}?><html><head></head><body style="background-image: url('<?php echo $bg; ?>');">   ...

You can use this to get a default background if no background cookie is present. Then if you have buttons to change the background then it would look something like this-HTML

<div class="style-button" backgroundid='1' path='images/somebg.jpg'></div><div class="style-button" backgroundid='2' path='images/somebg.jpg'></div><div class="style-button" backgroundid='3' path='images/somebg.jpg'></div>

JS

document.onload = function(){	divs = document.getELementsByTagName("div");	for(i = 0; i < divs.length; i++)	{		div = divs[i];		cl = 	div.getAttribute("class");		if(cl == "style-button")		{			div.onclick = function()			{				bgPath = this.getAttribute("path");				bgId = this.getAttribute("backgroundid");				document.body.style.background = "url('" + bgPath + "')";								//Use ajax here to send the bgId to a php file to set this cookie			}			}	}	}

PHP to change cookie

<?php	$id = $_REQUEST["backgroundid"];	$id = htmlspecialchars($id);	$id = stripslashes($id);		$result = mysql_query("SELECT path FROM cssBackgrounds WHERE id='$id'");	$arr = mysql_fetch_array($result);	$count = mysql_num_rows($result);		if($count < 1)	{		//In case the id is edited		$result = mysql_query("SELECT path FROM cssBackgrounds LIMIT 0, 1");		$arr = mysql_fetch_array($result);		}		$bg = $arr[0];	setcookie("bg", $bg, time()+9999999999, "/");?>

I always use JQuery to send ajax requests so I've forgotten how to do it without it. Is this what you were thinking?

Link to comment
Share on other sites

Instead of multiple stylesheet you can use a single php file for a css stylesheetbackgroundcss.php

<?phpheader("Content-type: text/css");	   $bg = $_COOKIE["bg"];if($bg == null)	{		$bg = "images/mybgimgdefault.jpg;				setcookie("bg", $bg, time()+999999999, "/");	}else	{echo 'body {background: url('.$bg.'); }';	}?>

There are several ways you can go about changing the background, randomly, or by button/link click, or dropdown?. With this simple solution, you just set a cookie using php only! at the top of page before <html> tag to the image you wish to use.

<?php setcookie("bg", "images/mybgimg01.jpg", time()+999999999, "/"); ?>

php/css stylesheet link

<link rel="stylesheet" href="backgroundcss.php" type="text/css"  />

Link to comment
Share on other sites

You think this would work with links? How would I do that? D:
???what exactly, do you want to happen with links?change background of linkschange background of current pagechange background of page linked tochange background of other elements in page....
Link to comment
Share on other sites

The best option would be to change the element background (presuming the body element) using onclick event on image<a href="java script:void(0);"><img src="images/image1.jpg" onclick="change_bg(this)" /></a>which will change background image of body and set cookie with value to image used.

function change_bg(current_img){	document.body.style.backgroundImage="url("+current_img.src+")";	set_cookie("bg", current_img.src, 7); //set cookie ref name, value, amount of days to keep cookie}

NOTE: if you only want to change this current pages background, link to the javascript code and php css file in this page only, else link to both files in all pages you want the currently selected background to appear.all js code for setting and retrieving background cookie

<script type="text/javascript">/*<![CDATA[*//*---->*/function set_cookie( name, value, days) {  var cookie_string = name + "=" + escape ( value );  if (days)  {	var expires = new Date ();	expires.setTime(expires.getTime()+(days*24*60*60*1000));	cookie_string += "; expires=" + expires.toGMTString();  }		 document.cookie = cookie_string;  }function get_cookie(cookie_name){  var results = document.cookie.match( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );  if ( results )	return ( unescape ( results[2] ) );  else	return null;}function get_bg_cookie()	{	var bg_cookie = get_cookie("bg"); 	if(bg_cookie != null)		{		document.body.style.backgroundImage="url("+bg_cookie+")";		}		else		{		set_cookie("bg", current_img.src, 7);		}		}function change_bg(current_img){	document.body.style.backgroundImage="url("+current_img.src+")";	set_cookie("bg", current_img.src, 7); //set cookie ref name, value, amount of days to keep cookie}window.onload=get_bg_cookie;/*--*//*]]>*/</script>

backgroundcss.php style sheet

<?phpheader("Content-type: text/css");   $bg = $_COOKIE["bg"];if($bg == null)	{		$bg = 'images/image1.jpg'; //set default bg image if no bg cookie set				setcookie("bg", $bg, time()+999999999, "/");	}else	{echo 'body {background: url('.$bg.'); }';	}?>

if you plan to change css style for font color for example, you could set up switch to change color of text depending on image used

<?phpheader("Content-type: text/css");   $bg = $_COOKIE["bg"];if($bg == null)	{		$bg = 'images/image.jpg'; //default bg image		$other_css_styles ="color: #fff; font-size:10px;";		setcookie("bg", $bg, time()+999999999, "/");	}else	{		switch ($bg)			 {			 case "images/image2.jpg":				 $other_css_styles ="color: #ccc; font-size:12px;";				 break;			 case "images/image3.jpg":				$other_css_styles ="color: #333; font-size:11px;";				 break; 				}echo 'body {background: url('.$bg.'); '.$other_css_styles.' }';	}?>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...