PHP + CSS

Hiikaru · Nov 1, 2009

Okay, I'm building some stylesheets for my Eevee game now that my files are back. (ETA: I'm using CSS stylesheets, PHP includes, and a PHP styleswitcher, by the way)

In this game, you take care of an Eevee. There's a navigation bar somewhere on the page (location depends on which style), which has icons to feed it, give it a drink, brush it, etc. Usually, the navigation bar uses the same icons: an apple, a brush, a cup, a bar of soap, a flower, and a bottle of medicine.

But in some of the styles (black and blue, currently), they're replaced. In the blue style, all of the icons are, you know, blue (and buttonized), and in the black style, they're all Halloween themed.

The reason I'm using stylesheets, obviously, is so I don't have to have the icons and headers and things on the regular pages, so keeping my navigation there is kind of a step backwards.

What's the best way to have specific icons for each style? Can I tell the style.css files to include a .PHP file, or use some kind of "If the user is on style x..." code, or what?

I think the codes would be similar to how people change the header/banner image for each style (for example, tCOD uses an Articuno header on one style, and a Scyther on another), so if anyone just does that I think I can work from those codes.

I googled it, but everyone's answer to this is more or less "I dunno, dude."

ETA: Nevermind about the banner comparison...

#banner {
margin:auto;
width:500px;
height:250px;
background-image:url('articuno-banner.png');
text-indent:-1000em;
}

I thought you weren't supposed to be able to add "content like images" in CSS? =P

Butterfree · Nov 1, 2009

I thought you weren't supposed to be able to add "content like images" in CSS? =P

That is not content like images. That's a background image. The page does not treat it as an image the way it would be if you used an actual img tag.

Anyway, there are two ways to go about this. One, use the same principle as I did there, but with a link - give each link an ID and then style them with display:block; and set their height and width to that of their respective images, which are then set as background images.

The second way would be to use your PHP style variable directly in the HTML - use img tags and give the images different filenames that include the corresponding value of the style variable, then use PHP to include the style variable name in the appropriate place in the filename of the image.

1. Luftballon · Nov 1, 2009

I haven't tested this, but you might be able to do this:

Code:

<link href='style.[b]php[/b]' type='text/css' rel='stylesheet'>

and in style.php:

Code:

... css ...
<?php   ... ?>
... css ...

It should get the browser to request the style.php file and use it as a css file, even though the server thinks it's php and sends a text/html header.

Or it might not work.

Butterfree · Nov 1, 2009

Why would they want to do that, though? I can't see any way that might solve the issue. o.O

1. Luftballon · Nov 1, 2009

Butterfree said:
Why would they want to do that, though? I can't see any way that might solve the issue. o.O

Hiikaru said:
What's the best way to have specific icons for each style? Can I tell the style.css files to include a .PHP file, or use some kind of "If the user is on style x..." code, or what?

That php code could contain an include. Or it could have <?php if (blahblahblah) { blahblahblah } ?>. Well, I suppose it wouldn't help much.

Peter Shadeslayer · Nov 3, 2009

If you just want different images for the banners, just say

#banner{
background-image: url('backgroundimageurl.gif');
}

in each style? O.o

Otherwise, there's a styleswitcher at Eevee's HQ [click me] that may be just what you're looking for. :)

Hiikaru · Nov 4, 2009

Thanks guys.

Peter Shadeslayer said:
If you just want different images for the banners, just say

#banner{
background-image: url('backgroundimageurl.gif');
}

in each style? O.o

No, it's a whole sidebar. There's a total of five images on the sidebar at all times, and all of them are links. The apple is a link to feed Eevee, brush to brush it, cup to give it a drink, soap to wash it, and a flower for the closet. And when Eevee gets sick then a bottle of medicine appears instead of the flower, which will heal it.

I tried making it in Flash instead, but to do that I have to make all new animations, and animating is really tedious.

Otherwise, there's a styleswitcher at Eevee's HQ [click me] that may be just what you're looking for. :)

That looks like it might work. I'll try the codes later.

If I can't figure it out, my backup plan is to put all the navigation bars in my include files and just tell the styles to make the ones they don't want transparent.

Creasy · Nov 4, 2009

Why can't you use the "background-image" property for all five links? Including different HTML based on style defeats the purpose of CSS.

Hiikaru · Nov 4, 2009

Creasy said:
Why can't you use the "background-image" property for all five links? Including different HTML based on style defeats the purpose of CSS.

Like...

#this_wants_to_be_a_link
{
display: block;
height: 100px;
width: 200px;
background-image: url(hi_im_an_image.jpg);
}

and also:

<a id="this_wants_to_be_a_link" href="wheredoIgo,whoknows.com/?link"></a>

That?

But then my PHP file still has all of those wannabe buttons in it.

CSS looks like:

#button1 { definition; }
#button2 { definition; }
#button3 { definition; }
#button4 { definition; }
#button5 { definition; }

+x styleswitcher icon definitons
+Eevee definition

And PHP/HTML looks like:

<a id=button1>
<a id=button2>
<a id=button3>
<a id=button4>
<a id=button5>

<a id=bluebutton1>
<a id=bluebutton2>
<a id=bluebutton3>
<a id=bluebutton4>
<a id=bluebutton5>

<a id=darkbutton1>
<a id=darkbutton2>
<a id=darkbutton3>
<a id=darkbutton4>
<a id=darkbutton5>

+x styleswitcher icons

And then the buttons that aren't defined in the style just float off into a mess in the left corner. So I'd still have to make them transparent. The only difference is the link/image codes would be in the php file and in the CSS file, so I'd edit both of them if I wanted to change the nav bar.

Anyway, isn't the "purpose of CSS" to tell your images what to be and also to make up your own codes? I don't think it's actually made for talking about images and links.

--------------------------------------------

The second way would be to use your PHP style variable directly in the HTML - use img tags and give the images different filenames that include the corresponding value of the style variable, then use PHP to include the style variable name in the appropriate place in the filename of the image.

This is the code I'm trying to use right now (from Eevee's HQ).

$path_to_styles = "/styles/";

$styles_buttonname1 = array();
$styles_buttonname2 = array();
$styles_buttonname3 = array();
$styles_buttonname4 = array();
$styles_buttonname5 = array();

// name of the style in a secret message here in case you forget, I guess
$styles_buttonname1[1] = 'imagename1kthnx.png';
$styles_buttonname2[1] = 'imagename2kthnx.png';
$styles_buttonname3[1] = 'imagename3kthnx.png';
$styles_buttonname4[1] = 'imagename4kthnx.png';
$styles_buttonname5[1] = 'imagename5kthnx.png';

One, I'm not sure if you can really make up the names, because the original code just had "header" and "footer".

Also, how can I give my style an ID?

$styles_buttonname1[ID here, what do I do with it] = 'imagename1kthnx.png';

Butterfree · Nov 4, 2009

But then my PHP file still has all of those wannabe buttons in it.

Um, no. o_O The whole point is that in each stylesheet, you define a different background image for the same button. So in your HTML, you have...

HTML:

<a href="something" id="button1"></a> <a href="something else" id="button2"></a>

Then in each stylesheet, you have...

Code:

#button1 {
display:block;
background-image:url('image for button 1 for this particular style, different from what is in the other stylesheets');
height:height of that image;
width:width of that image;
}

#button2 {
display:block;
background-image:url('image for button 2 for this particular style, different from what is in the other stylesheets');
height:height of that image;
width:width of that image;
}

Hiikaru · Nov 6, 2009

ETA: ...Actually I think I misread your post and after going over it a few more times I think I get what you mean. Sorry.

So PHP just says "here are button one and button two" without defining anything but a link, and CSS blue says that button one is blue, even though CSS black says that it's black.

Sounds good, sorry I missed that. You can ignore the rest of the post.

I'm sorry, but what's the difference between that and the codes I posted, besides that you actually wrote out the code as opposed to simplifying it?

I still don't see how that helps anything - I still have all the buttons in the PHP, which if not defined in the style, will just float off to the top left corner. Either I define all of them in the style, or give them all a code that makes them transparent on the layout they're on, but either way, they're still on the page and all specially defined in the PHP. I can do this, and it will work, but it's not what I'm looking for here.

Here, I'll be a little more specific about what I would be doing with the transparencies, although it will make the post really long (and I'm still not going to write out the entire code, because there's no reason to).

defaultstyle.css

(background is default background)
(anything with the div value black is transparent)
(anything with the div value blue is transparent)
(specify default value here, although it doesn't do anything on default style)

#defaultcure { definition; }

#defaultbutton1 { definition; }
#defaultbutton2 { definition; }
#defaultbutton3 { definition; }
#defaultbutton4 { definition; }
#defaultbutton5 { definition; }

#styleicon1 { definition; }
#styleicon2 { definition; }
#styleicon3 { definition; }
#styleicon4 { definition; }
#styleicon5 { definition; }

+Eevee definition

bluestyle.css

(background is blue background)
(anything with the div value black is transparent)
(anything with the div value default is transparent)
(specify blue value here, although it doesn't do anything on blue style)

#bluecure { definition; }

#bluebutton1 { definition; }
#bluebutton2 { definition; }
#bluebutton3 { definition; }
#bluebutton4 { definition; }
#bluebutton5 { definition; }

#bluestyleicon1 { definition; }
#bluestyleicon2 { definition; }
#bluestyleicon3 { definition; }
#bluestyleicon4 { definition; }
#bluestyleicon5 { definition; }

+Eevee definition

darkstyle.css

(background is dark background)
(anything with the div value blue is transparent)
(anything with the div value default is transparent)
(specify dark value here, although it doesn't do anything on dark style)

#darkcure { definition; }

#darkbutton1 { definition; }
#darkbutton2 { definition; }
#darkbutton3 { definition; }
#darkbutton4 { definition; }
#darkbutton5 { definition; }

#darkstyleicon1 { definition; }
#darkstyleicon2 { definition; }
#darkstyleicon3 { definition; }
#darkstyleicon4 { definition; }
#darkstyleicon5 { definition; }

+Eevee definition

mainstuff.php

(include blue.php, include dark.php)

<a id=defaultbutton1 value=default>
<a id=defaultbutton2 value=default>
<a id=defaultbutton3 value=default>
<a id=defaultbutton4 value=default>
<a id=defaultbutton5 value=default>

<a id=defaultstyleicon1 value=default>
<a id=defaultstyleicon2 value=default>
<a id=defaultstyleicon3 value=default>
<a id=defaultstyleicon4 value=default>
<a id=defaultstyleicon5 value=default>

blue.php

<a id=bluebutton1 value=blue>
<a id=bluebutton2 value=blue>
<a id=bluebutton3 value=blue>
<a id=bluebutton4 value=blue>
<a id=bluebutton5 value=blue>

<a id=bluestyleicon1 value=blue>
<a id=bluestyleicon2 value=blue>
<a id=bluestyleicon3 value=blue>
<a id=bluestyleicon4 value=blue>
<a id=bluestyleicon5 value=blue>

dark.php

<a id=darkbutton1 value=dark>
<a id=darkbutton2 value=dark>
<a id=darkbutton3 value=dark>
<a id=darkbutton4 value=dark>
<a id=darkbutton5 value=dark>

<a id=darkstyleicon1 value=dark>
<a id=darkstyleicon2 value=dark>
<a id=darkstyleicon3 value=dark>
<a id=darkstyleicon4 value=dark>
<a id=darkstyleicon5 value=dark>

index.php (all other play with eevee pages look like this except sick)

(include mainstuff.php)

<div id=eevee value=eevee>
<img src=indexeevee.gif>
</div>

sick.php

(include mainstuff.php and/or include sickstuff.php)

<div id=cure value=default>
<a href=curemyeeveeplz.php><img src=defaultcure.png></a>
</div>

<div id=cure value=blue>
<a href=curemyeeveeplz.php><img src=defaultblue.png></a>
</div>

<div id=cure value=default>
<a href=curemyeeveeplz.php><img src=defaultdark.png></a>
</div>

<div id=eevee value=eevee>
<img src=brusheevee.gif>
</div>

As you can see, this makes the PHP files really long (and they're longer than they look here, because I still didn't detail the codes), and added manually, which seems like it should be avoidable.

Ideally, the code would be more like this.

<a href=link1><img src=use cookied style name+button1></a>
<a href=link2><img src=use cookied style name+button2></a>
<a href=link3><img src=use cookied style name+button3></a>
<a href=link4><img src=use cookied style name+button4></a>
<a href=link5><img src=use cookied style name+button5></a>

(style icons are in here too, and by the way, style icons are what you click on to switch styles. I guess I could do a drop down menu but I like the icons)

In the Eevee's HQ example styleswitcher codes, the header and footer are defined in a file that looks like this, which would also be fine if it would work.

(I think include switcher.php)

(specify header, things called header do this)
(specify footer, things called footer do this)

//if using default, it will do this
header [default id] "image name"
footer [default id] "image name 2"

//if using blue, it will do this
header [blue id] "blue image name"
footer [blue id] "blue image name 2"

//if using dark, it will do this
header [dark id] "blue image name"
footer [dark id] "blue image name 2"

Problem is, as stated before, that I don't know how to give styles an ID.

Butterfree · Nov 6, 2009

So PHP just says "here are button one and button two" without defining anything but a link, and CSS blue says that button one is blue, even though CSS black says that it's black.

Yes, that's it.

PHP + CSS

Hiikaru

Run.

Butterfree

Still loves Joltik, though!

1. Luftballon

Banned

Butterfree

Still loves Joltik, though!

1. Luftballon

Banned

Peter Shadeslayer

New member

Hiikaru

Run.

Creasy

Hiikaru

Run.

Butterfree

Still loves Joltik, though!

Hiikaru

Run.

Butterfree

Still loves Joltik, though!

PHP + CSS

Run.

Still loves Joltik, though!

Banned

Still loves Joltik, though!

Banned

New member

Run.

&#8203;

Run.

Still loves Joltik, though!

Run.

Still loves Joltik, though!