[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

changing themes from page to page

Posted on 2005-05-13
14
Medium Priority
?
424 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:dk4210
  • 6
  • 4
  • 4
14 Comments
 
LVL 1

Expert Comment

by:test75
ID: 13998230
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
 
LVL 1

Expert Comment

by:test75
ID: 13998262
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
 

Author Comment

by:dk4210
ID: 13998278
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 27

Expert Comment

by:Diablo84
ID: 13998298
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
 
LVL 27

Expert Comment

by:Diablo84
ID: 13998309
test75,

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

Diablo84
0
 
LVL 1

Expert Comment

by:test75
ID: 13998333
Sorry,
<?=$background_color?>"> and <?=$id?>
not
<?$background_color?>"> and <?$id?>
0
 

Author Comment

by:dk4210
ID: 13998337
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
 
LVL 1

Expert Comment

by:test75
ID: 13998353
"whatever" what can be?  
0
 
LVL 27

Expert Comment

by:Diablo84
ID: 13998359
Add multiple parameters using &, eg:

http://www.domain.com/index.php?content=whatever&style=yourstyle
0
 
LVL 27

Expert Comment

by:Diablo84
ID: 13998381
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
 

Author Comment

by:dk4210
ID: 13998490
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
 
LVL 27

Expert Comment

by:Diablo84
ID: 13998575
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
 

Author Comment

by:dk4210
ID: 13999124
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
 
LVL 27

Accepted Solution

by:
Diablo84 earned 2000 total points
ID: 13999202
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The title says it all. Writing any type of PHP Application or API code that provides high throughput, while under a heavy load, seems to be an arcane art form (Black Magic). This article aims to provide some general guidelines for producing this typ…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month18 days, 17 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question