changing themes from page to page

Hello,
How would I change the header and the left nav td background dynamically on my site.. I know it has to do with CSS. What I want is when someone on my site clicks certain links that it will change the page header image and certain color variables... Thanks in advance!

Dan
dk4210Asked:
Who is Participating?
 
Diablo84Connect With a Mentor Commented:
This part...

<?php echo $_SERVER['PHP_SELF']; ?>

is just a dynamic way of outputting the current page filename, used for linking back to the current page basically (it will output something similar to: /index.php). If you are only using the code on one page, you can just hard code it with index.php.

This part...

<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>

appends the content to the style link, you may not need it depending on how your code works.

For example, if they access the page via index.php?content=something, &content=something will be appended to your style links... this allows you to maintain the content if they click a link.

Without it, you would have:

[accesses page] index.php?content=something
[clicks style link] index.php?style=thestyle

With it, you would have:

[accesses page] index.php?content=something
[clicks style link] index.php?style=thestyle&content=something

The rest is just a link with the different styles added to the query string, index.php?style=thestlye.

The added PHP code is indended to simplify the process although, as i said, you may not need it... its optional. What you currently have (index.php?content=include&style=style1) will work fine.

Diablo84
0
 
test75Commented:
Hi,
for example if you want different colors for different ids you submit via get method and id value (mypage.php?id=id1)  
in following example the same color in <body> and in <td>

<?
$id = $_GET['id'];

$array_background_color = array(
  "id1" = "#f1f1f1",
  "id2" = "#aaf1f1",
  "id3" = "#f1bbf1",
  "id4" = "#ccf1f1",
  "id5" = "#f1f1ee",
);

$background_color = $array_background_color[$id];

?>

....
<body bgcolor="<?$background_color?>" background="images/background_<?$id?>.jpg">
...
  <td bgcolor="<?$background_color?>">
....
0
 
test75Commented:
I forgot that for different images, you can call images with name like background_id1.jpg , background_id2.jpg, ... so that with different $id you have different images.

0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
dk4210Author Commented:
what if my framework is like this?
http://www.experts-exchange.com/Web/Web_Languages/PHP/PHP_Databases/Q_21319609.html

I posted this a while ago, but it is my design style
0
 
Diablo84Commented:
It usually easiest to use a switch statement here, for example if you passed the value of 'style' in the query string (ie. page.php?style=astyle) you could use:

$style = (array_key_exists('style',$_GET)) ? $_GET['style'] : '';

switch ($style) {
 case 'style1':
  $background = '#EEEEEE';
  $anothervar = 'some value';
  break;
 case 'style2':
  $background = '#FFFFFF';
  $anothervar = 'some other value';
  break;
 case 'etc':
  $background = '#DDDDDD';
  $anothervar = 'etc';
  break;
 default:
  //values to assigned if $style does not match any of the other cases
  $background = 'a default color';
  $anothervar = 'a default value';
  break;
}

You can then reference $background and $anothervar in your code, or add more variables to the switch statement as you see fit.

Diablo84
0
 
Diablo84Commented:
test75,

FYI <?$background_color?> does nothing. You need to output using echo or print.

Diablo84
0
 
test75Commented:
Sorry,
<?=$background_color?>"> and <?=$id?>
not
<?$background_color?>"> and <?$id?>
0
 
dk4210Author Commented:
I see what your saying but all my links are like this ---> http://www.domain.com/index.php?content=whatever

how can I combine it?
0
 
test75Commented:
"whatever" what can be?  
0
 
Diablo84Commented:
Add multiple parameters using &, eg:

http://www.domain.com/index.php?content=whatever&style=yourstyle
0
 
Diablo84Commented:
You might use, in your links...

Change style:<br>
<a href="page.php?style=style1<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>">Style1</a><br>
<a href="page.php?style=style2<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>">Style2</a><br>

etc
0
 
dk4210Author Commented:
Ok I put one of you guy's code in and this is my code.. What do I do now?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome To DannyKelly.com | A Certified Developer</title>

<style type="text/css">
<!--
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      background-color: #E4E4E4;
}
-->
</style>
<link href="dan.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {color: #999999}
-->
</style>
<style type="text/css">

#showimage{
position:absolute;
visibility:hidden;
border: 1px solid gray;
}

#dragbar{
cursor: hand;
cursor: pointer;
background-color: #EFEFEF;
min-width: 100px; /*NS6 style to overcome bug*/
}

#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
}
</style>

<script type="text/javascript">

/***********************************************
* Image Thumbnail viewer- © Dynamic Drive (www.dynamicdrive.com)
* Last updated Sept 26th, 03'. This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var ie=document.all
var ns6=document.getElementById&&!document.all

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}

function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script>
<script src="arc.js" type="text/javascript"></script>
<link href="arc_checkbox.css" rel="stylesheet" type="text/css">
<link href="arc_radio.css" rel="stylesheet" type="text/css">
</script>
      
      <style type="text/css">
      
      /* page formatting -- these are unrelated from the ARC method */
      
      #makeMeAPrettyForm, #form2 {
            border: 2px solid #069;
            background-color: #fff;
            width: 400px;
      }
      #makeMeAPrettyForm h2, #form2 h2 {
            font-family: "Lucida Sans Unicode", Verdana, Arial, Sans-Serif;
            font-weight: normal;
            font-size: 1em;
            color: #fff;
            background-color: #069;
            padding: 10px 15px;
            margin: 0px;
      }
      #makeMeAPrettyForm p , #form2 p{
            margin: 10px 20px;
      }
      h1 {
            font-family: "Georgia", Serif;
            font-weight: normal;
            font-size: 1.3em;
            color: #ccc;
      }
      h1 strong {
            font-size: 1.5em;
            font-weight: normal;
            color: #333;
      }
      
      hr {
            border: 0px;
            border-top: 1px solid #999;
      }
      small {
            background-color:#FFFFCC;
            padding: 5px;
                  line-height: 20px;
      }
      </style>

</head>
<?
$style = (array_key_exists('style',$_GET)) ? $_GET['style'] : '';

switch ($style) {
 case 'style1':
  $background = '#EEEEEE';
  $anothervar = 'some value';
  break;
 case 'style2':
  $background = '#FFFFFF';
  $anothervar = 'some other value';
  break;
 case 'etc':
  $background = '#DDDDDD';
  $anothervar = 'etc';
  break;
 default:
  //values to assigned if $style does not match any of the other cases
  $background = 'a default color';
  $anothervar = 'a default value';
  break;
}
?>
$background_color = $array_background_color[$id];

<body><div id="showimage"></div>
<table width="102%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="102"><img src="images/headerimg6.jpg" width="800" height="100"></td>
  </tr>
</table>
<table width="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="9%" bgcolor="#000000"></td>
    <td width="13%" bgcolor="#000000"></td>
    <td width="14%" bgcolor="#000000"></td>
    <td width="17%" bgcolor="#000000"></td>
    <td width="19%" bgcolor="#000000"></td>
    <td width="16%" bgcolor="#000000"></td>
    <td width="12%" height="1" bgcolor="#000000"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC"><div align="center" class="menuitems"><a href="index.php" class="menuitems">Home</a></div></td>
    <td bgcolor="#CCCCCC"><div align="center" class="menuitems"><a href="index.php?content=aboutme" class="menuitems">About me </a></div></td>
    <td bgcolor="#CCCCCC"><div align="center" class="menuitems"><a href="index.php?content=portfolio" class="menuitems">Portfolio</a></div></td>
    <td bgcolor="#CCCCCC"><div align="center" class="menuitems"><a href="index.php?content=cstudies" class="menuitems">Case Studies</a> </div></td>
    <td bgcolor="#CCCCCC"><div align="center"><span class="menuitems"><a href="index.php?content=refer" class="menuitems">Testimonials</a></span></div></td>
    <td bgcolor="#CCCCCC"><div align="center" class="menuitems"><a href="index.php?content=contact" class="menuitems">Contact Me</a> </div></td>
    <td bgcolor="#CCCCCC"><div align="center"><img src="images/php-power-micro2.jpg" width="80" height="15"></div></td>
  </tr>
  <tr>
    <td bgcolor="#000000"></td>
    <td bgcolor="#000000"></td>
    <td bgcolor="#000000"></td>
    <td bgcolor="#000000"></td>
    <td bgcolor="#000000"></td>
    <td bgcolor="#000000"></td>
    <td height="1" bgcolor="#000000"></td>
  </tr>
</table>
<table width="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="23%" height="325" bgcolor="#308AB9"><table width="99%"  border="0" align="center" cellpadding="0" cellspacing="0" class="leftmenu">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#106299"><div align="center" class="leftmenu">
          <div align="left"><img src="images/arrowdblue.jpg" width="14" height="12"> Php
            Articles</div>
        </div></td>
      </tr>
      <tr>
        <td height="72"><table width="100%" border="0" cellspacing="0" cellpadding="1">
          <tr>
            <td width="6%"><div align="center"><img src="images/arrow1.gif" width="10" height="12"></div></td>
            <td width="94%" class="leftmenusm"><a href="index.php?content=include" class="leftmenusm">The Include Statement</a></td>
          </tr>
          <tr>
            <td><div align="center"><img src="images/arrow1.gif" width="10" height="12"></div></td>
            <td class="leftmenusm">Variables</td>
          </tr>
          <tr>
            <td><div align="center"><img src="images/arrow1.gif" width="10" height="12"></div></td>
            <td class="leftmenusm">Strings</td>
          </tr>
          <tr>
            <td><img src="images/arrow1.gif" width="10" height="12"></td>
            <td class="leftmenusm">Sessions</td>
          </tr>
          <tr>
            <td><img src="images/arrow1.gif" width="10" height="12"></td>
            <td class="leftmenusm">Loops</td>
          </tr>
          <tr>
            <td><img src="images/arrow1.gif" width="10" height="12"></td>
            <td class="leftmenusm">date/time</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>        </td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td bgcolor="#106299"><div align="left"><img src="images/arrowdblue.jpg" width="14" height="12"> Helpful Scripts</div></td>
      </tr>
      <tr>
        <td><p>&nbsp;</p>
          <p>&nbsp;</p></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#106299"><div align="left"><img src="images/arrowdblue.jpg" width="14" height="12"> A Design Framework</div></td>
      </tr>
      <tr>
        <td><p>&nbsp;</p>
          <p>&nbsp;</p></td>
      </tr>
      <tr>
        <td bgcolor="#106299"><img src="images/arrowdblue.jpg" width="14" height="12"> Downloads</td>
      </tr>
    </table>      
      <p align="center"><img src="images/designerciw.jpg" width="81" height="65"></p>
    </td>
    <td width="77%"><table width="100%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="2%" heigh="2"></td>
        <td width="96%" heigh="2"></td>
        <td width="2%" bgcolor="#E4E4E4">&nbsp;</td>
      </tr>
      <tr>
        <td height="321">&nbsp;</td>
        <td bgcolor="#FFFFFF"><div align="center">
          <table width="100%"  border="0">
            <tr>
              <td height="297"><div align="center">
                <?php
$file = (empty($_GET['content']) ? 'main' : $_GET['content']);

// Change the path information
if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/main/' . $file . '.php'))
{
   include($file . '.php');
  // print "ok";
}
else
{
   print "Page not available";
}


?>
              </div></td>
            </tr>
          </table>
        </div></td>
        <td bgcolor="#E4E4E4">&nbsp;</td>
      </tr>
      <tr>
        <td height="20">&nbsp;</td>
        <td>&nbsp;</td>
        <td bgcolor="#E4E4E4">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="100%"  border="0">
  <tr>
    <td bgcolor="#E4E4E4">&nbsp;</td>
  </tr>
</table>
</body>
</html>
0
 
Diablo84Commented:
You should just need to add the links, in the fashion i showed in my post just before yours.

If you move the switch statement block to before your CSS at the top of your page, you could then do something like this:

<?php
$style = (array_key_exists('style',$_GET)) ? $_GET['style'] : '';

switch ($style) {
 case 'style1':
  $bodybg = '#FFFFFF';
  break;
 case 'style2':
  $bodybg = '#EEEEEE';
  break;
 case 'style3':
  $bodybg = '#DDDDDD';
  break;
 default:
  $bodybg = '#FFFFFF'; //default background color
  break;
}
?>

Then in your css, where you now have:

body {
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     background-color: #E4E4E4;
}

you can use:

body {
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     background-color: <?php echo $bodybg; ?>;
}

You can add more variables to the switch statament to change to different colors in your CSS.

To maintain the settings you could use cookies.

Note, that you can also simplify the process by using external style sheets (one for each style) and switch the sheet depending on the value of $_GET['style'].

Rememebr at some point in your page you need to add you change style links, eg:

Change style:<br>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?style=style1<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>">Style1</a><br>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?style=style2<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>">Style2</a><br>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?style=anotherstyle<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>">Another Style</a><br>
0
 
dk4210Author Commented:
It's working!
Here is what I did.

First I posted the block of code above the css.. Then I added the variable $navclr in the style 1 ,2 and the default.  I then echo'd the variable $navclr in the td background. Now depending on the style in the link/url the proper td background will be called.. I should be able to do the same with the header.. I am just changing the header image and the left nav td background color...

I didn't understand the need for all the code here..
----------------------------------------------------------------------------------------------------------
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?style=style1<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>">Style1</a><br>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?style=style2<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>">Style2</a><br>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?style=anotherstyle<?php if (isset($_GET['content'])) echo '&content='.$_GET['content']; ?>">Another Style</a><br>
--------------------------------------------------------------------------------------------------------
I just did made my links like this...
 index.php?content=include&style=style1

This should work fine right.. After your response, I will award you the points for the excellent help!


0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.