Partial transparancy, background color change.

[malboroman]

I don't know if this should be in this forum, but here goes:

I'm making a website where you can change the overall look by just changing the color... but here's the catch. If I want all the elements to change color too, I need to make a different image for every color 'cause they have an opacity of about 50%. I can't save them as a gif because gif's only support total transparancy...

Is there any other format that I can use that supports partial opacity and that everyone can see no matter what browser they use? Or might there be another way to do this?

Greetz,

Malb

[Man1c M0g]

Hmmmm. Well, if you want partial transparency, the only way to do it is through the use of .PNG, which is supported by nearly all the newer browsers, but which still poses problems with older ones, and has a tendency to give HUWGE filesizes. I've never tried the 'colour-tinting' technique you have described, though, so I wouldn't know if it would work or not.

Another solution is to opt for a CSS-based system with multiple definitions per class, and then switch between the 'skins' with the use of a selector and cookie. Think Spoono...

[malboroman]

I have allready been looking around, but no luck... I also tried to do it with png's, but as you said, that gives huge filesizes.

I'm now looking into the 'skin' method, and I think I will have to stick with that. If anybody here knows how this is done, PLEASE TELL ME!! If not, I will go and ask over at spoono. I actually got the idea from looking at their site...

This is going to be a long and difficult project...

[Order]

Skinning sites, real simple, all it involves is a cookie! Here is the php code to handle it, you will have to figure out how to make use though..

PHP Code:

<?php

  if(!$_POST['skin'])
  {
    die("No Form Input");
  }
  else
  }
   if(file_exists("templates/" . $_POST['skin'] . "/header.php"))
   {
    setcookie("skin", $_POST['skin']);
   }
    else
   {
     die("Template Does Not Exist");
   }
  }

?>

That can be added to, basically it looks in a folder called templates, and if there is a folder with the skins name, which will hold your header and footer files (header.php and footer.php).

And just add this bit of code into your pages:

PHP Code:

<?php

  if(!$_COOKIE['skin'])
  {
    include("templates/default/header.php");
  }
  else
  {
    include("templates/" . $_COOKIE['skin'] . "/header.php");
  }

?>

Normal page info here...

<?php

  if(!$_COOKIE['skin'])
  {
    include("templates/default/footer.php");
  }
  else
  {
    include("templates/" . $_COOKIE['skin'] . "/footer.php");
  }

?>

And you have a decent Skinning System. If m0g wants to convert this into a tutorial, he can.. lmao

[malboroman]

This may indeed be a good tutorial...

The problem is not the php part of it... but the actual skin. If I do it with css, I will have to specify each table and which image goes into it. And I have no idea how I should do that.

Maybe one of you knows a good site where they explain this kind of 'skinning'? And don't even bother saying w3schools... allready looked there and couldn't find anything.

Malb

[malboroman]

this may be just a weird idea of a php-n00b...

All of the images I use for the different colors are called:

'blue_01.gif, red_1.gif, green_01.gif'

Isn't it a possibility that I can make the color a variable and set that variable by using cookies? Like this:

($color)_01.gif

Please tell me if this is possible...

Malb

[Order]

It would be possible yes.. something like this.

PHP Code:

<?php

   if(!$_GET['color'])
   {
     $color = "blue";
   }
   else
   {
     $color = $_GET['color'];
   }

?>

<img src="http://www.www.www/images/<? echo $color; ?>_01.gif">

It would work, but would be a little limited unless you expanded it quite a bit. Also, you could even set a cookie to remember it for when people come back. I would personally use the one I stated above, as it would be more versitile (It would allow completely different interfaces totally), however, this would work also.

[malboroman]

Shouldn't the last bit be

PHP Code:

<img 
src="http://www.[url]www.www/images/[/url]<?php echo $color;?>_01.gif">

But it doesn't work what you posten here... If I change the <? to <?php, I do get some weird images in dreamweaver, but as soon as I test it. It displays nuttin'.

[Order]

Do you add the color to the page, you will have to test it live.. i.e on a server..

http://www.www.com/page.php?color=color

I used GET vars..

Also, you can use both <? or <?php as starting tags, the standard is to use <?php but I just use <?

[malboroman]

I indeed had to test it live on my server.. it is working now...
The only prob I'm having now is defining that variable by just clickin a link... I've got an image I want to use as link, but I don't know what code I should use..

As you can see I'm a total n00b

Malb

[Order]

Well, to change colors, you would just click on a link like

http://www.www.www/page.php?color=green

And it would turn green..

[malboroman]

IT IS WORKING!!!

But now you can notice a tiny little detail... the background color isn't changing... I thought I had solved this by putting some extra php in, but it didn't work... can you see what I did wrong with this script? It probably has something to do with the "if" statements.

PHP Code:

</head>
<body bgcolor="<?php echo $bg;?>" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<?php 

   if(!$_GET['color']) 
   { 
     $color = "green"; 
   } 
   else 
   { 
     $color = $_GET['color']; 
   } 
if
($color = "red")$bg = "#860e0e";
if
($color = "green")$bg = "#215712";
if
($color = "blue")$bg = "#1a1759";

?>

This is the first bit of code of my page and I know that the problem is in there somewhere...

Malb

[Order]

Place your php before your body tag.. php starts at the top, $bg will remain null (0) until you add something to it..

[malboroman]

I must have done something wrong with all the 'if'-statements... I f I put more than one if statement, he just picks the bottom one, so every link I click.. I still get the same color... Is there something wrong with the syntax?

[Order]

Handle it like this, instead of just if'ing everything, make into a switch statement, it is processed faster then if's:

PHP Code:

switch($color) {

  case "red":
     $bg = "color code";
     break;

  case "green":
     $bg = "color code";
     break;

  case "blue":
     $bg = "color code";

  default:
     $bg = "default color";
     break;
} 


This is highly adaptable since you can add more a lot easier then if statements, and it is the preferred way to handle conditionals..