Stylesheets

[Hiikaru]

Edit: I can do includes now! Hooray!
Edit 2: Also style switchers (link removed!)

I have a basic understanding of CSS and can make workable and attractive page styles with it.

But I can only style the pages. I can't add things to them retroactively. If an image is in a div, I can tell all of the pages to show it as transparent, or move it somewhere else, or whatever, but I can't add a new image.

I'm pretty sure big sites don't go through and change every single page if they want to add something new, so there's got to be a way to do this, right? (for example, if Butterfree writes a new section, she probably doesn't add the link to every page)

I've googled everything I can think of, and read through the page source of several sites, but I can't figure out to to find this information.

Basically what I'm looking for is a way to use a stylesheet (or something similar) to add an image or text to every page that references the stylesheet. If someone can just tell me what kind of code you use to do that or what to search for, that would be great.

(I'd use links to my pages to explain better what I want to do, but I just switched web hosts and they haven't given me my files yet...)

 

[Negrek]

If I understand what you want to do right, you wouldn't use stylesheets for it. Stylesheets only affect the style properties of a page; they can't add content like images. If you want to be able to update a single file with images/text/other content and have those changes show up on every page on your web site that references that file, what you want to do is use some kind of include file. There are numerous ways to do this--using server-side includes is probably the simplest. You can also do it in PHP or any other web-suitable language (so far as I know); it's just down to what your web hosting allows you to use/you feel comfortable with. For whatever language you choose, looking for information about includes in the documentation should get you pointed in the right direction.

 

[Hiikaru]

Thank you! In looking at pages about includes so far, that looks like exactly what I want to use.

 

[Creasy]

Stylesheets only affect the style properties of a page; they can't add content like images.

http://www.w3.org/TR/CSS21/generate.html#content

 

[Negrek]

Interesting, never seen that before.

Edit: Ah, yeah, not supported by Internet Explorer; that explains it.

 

[Peter Shadeslayer]

Yes, either SSI or PHP includes will be what you want to use. Depending on your web host, you may or may not have to change your file extensions to .shtml. On Webs, for example, you can leave it as .htm or .html. :) Don't use PHP includes unless you're planning on using PHP elsewhere. ;)

Thanks a great deal for being extremely specific in your question.

 

[Hiikaru]

Oh, Internet Explorer, so behind the times...

Yes, either SSI or PHP includes will be what you want to use. Depending on your web host, you may or may not have to change your file extensions to .shtml. On Webs, for example, you can leave it as .htm or .html. :) Don't use PHP includes unless you're planning on using PHP elsewhere. ;)

I'm using Yahoo! Web Hosting. I just switched hosts, so I'm not sure of everything it lets you do, but it seems just fine with the PHP includes.

In my test files I did one page (main.php) that says to include a header and footer, and then header.php and footer.php have a little bit of text that gets included on pages that reference it (which main.php does).

I have a little game that I made for my youngest sister (five) that I wanted includes for so that I could edit the whole game at once when I wanted to add a new style or option.

The PHP includes seem fine on my test pages, so I'll have to wait for my files to finish transferring from Geocities so I can test includes there.

Next code to tackle: style switchers.

Thanks a great deal for being extremely specific in your question.

No problem. ;)

 

[Peter Shadeslayer]

Styleswitchers -- if you're site's in PHP, use a PHP styleswitcher. =D

Do you know where to start or do you need help?

 

[Hiikaru]

Styleswitchers -- if you're site's in PHP, use a PHP styleswitcher. =D

Do you know where to start or do you need help?

I wouldn't use a JavaScript one, anyway. It sounds like they have more problems, and JavaScript seems like a more difficult coding language.

I haven't tried to implement a styleswitcher yet, but unlike includes, I've always known what they were called, so I should be able to look up tutorials pretty easily.

As I've said before, my files are currently missing, so I don't have all my codes and styles available to work with right now. Hopefully Yahoo will put them back soon. =/

But if you know of any good walkthroughs offhand, I'll bookmark them for when everything's back.

 

[Peter Shadeslayer]

Really, a lot of PHP styleswitcher tutorials are complex. A simpler way is to just code it yourself without using a tutorial lol. I'll provide an example.

To make this code more simple, I find it helpful to store my CSS files with names like style1.css, style2.css, et cetera. This code depends on that.

This is switcher.php:

<?php
$styles = array('', '1', '2', '3')
//this says that we have three styles.

if(isset($_GET['style']) && array_search($_GET['style'], $styles))
{
setcookie('style', $_GET['style'], time() + 60*60*24*365);
}

else
{
echo "You've either left the style number blank or the style does not exist.";
}
?>

Then the following code should go in the head section of all concerned pages:

<head>
<title>Title</title>
<?php
$default_style = 1;
if($_COOKIE['style'] != "")
{
?>
<link rel="stylesheet" type="text/css" href="style<?php echo $_COOKIE['style']; ?>.css" />
<?php
}

else
{
?>
<link rel="stylesheet" type="text/css" href="style<?php echo $default_style; ?>.css" />
<?php
}
?>
</head>

That should work. If someone sees an error let me know ;) I've not coded one for quite a while.

 

[Creasy]

$styles = array('', '1', '2', '3')

$styles = array(1, 2, 3);

array_search($_GET['style'], $styles)

in_array($_GET['style'], $styles)

time()

Slow, use $_SERVER['REQUEST_TIME'].

<?php
$default_style = 1;
if($_COOKIE['style'] != "")
{
?>
<link rel="stylesheet" type="text/css" href="style<?php echo $_COOKIE['style']; ?>.css" />
<?php
}

else
{
?>
<link rel="stylesheet" type="text/css" href="style<?php echo $default_style; ?>.css" />
<?php
}
?>

$style_num = 1;
if( ! empty($_COOKIE['style']))
{
	$style_num = (int) $_COOKIE['style'];
}
echo '<link rel="stylesheet" type="text/css" href="/style' . $style_num . '.css" />'

BTW, you should use the alternative if syntax when switching in and out of PHP.

 

[surskitty]

JavaScript seems like a more difficult coding language.

It isn't. It's easy to use and also terrible, so.

 

[Hiikaru]

Okay, okay, I don't have any files to use it for, but here is a messy style switcher (link removed!).

How come in those codes, you tell the site how many style switchers it has? Don't you have to go back and edit it every time you add a new one?

Thank you for some style switcher codes, I ended up splicing them with a different set I found.

Really, a lot of PHP styleswitcher tutorials are complex. A simpler way is to just code it yourself without using a tutorial lol. I'll provide an example.

You can search for something like "easy php style switcher". And writing it yourself only works if you've been using PHP for more than a couple of days.

To make this code more simple, I find it helpful to store my CSS files with names like style1.css, style2.css, et cetera. This code depends on that.

I did a different code that doesn't worry about their names. It might be useful for keeping track of how many you have and making it so you can easily add them to your site, but I prefer names that reflect the colour scheme (it's easier to remember).

BTW, you should use the alternative if syntax when switching in and out of PHP.

I'll look into it, thanks.

It isn't. It's easy to use and also terrible, so.

It looks like a mess, though.

<FORM action="http://www.example.com" method="post">
<INPUT type="text" size="25" value="Enter Your Default Text Here" onFocus="if(this.value == 'Enter Your Default Text Here') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Enter Your Default Text Here';}" />
<INPUT type=submit value=Submit>
</FORM>

ETA: Oh, Creasy's example Javascript looks way better than what I found.

 

[Creasy]

also terrible

Uh, no. JavaScript is fine (and the only game in town, so it's a moot point).

The OP's styleswitcher would ideally use JavaScript that degrades gracefully:

<form action="" method="post">
	<select name="style">
		<option value="1">Default</option>
	</select>

	<input type="submit" name="change_style" onclick="return changeStyle();" />
</form>

 

[1. Luftballon]

Uh, no. JavaScript is fine

You do realize that we're about to discount all opinions you have without well-researched facts backing them, yes?

Javascript can be turned off client-side, some browsers don't support it by design (yes, I know, but I occasionally use elinks, so). But anyway, the point is that it depends on the client, which doesn't actually matter much in this case, but is occasionally an annoyance.

(and the only game in town, so it's a moot point).

Code generation. It uses Javascript anyway, as a sort of glorified portable assembler, and is likely to produce slow code, but it's possible.

And in any case, that doesn't stop it from being horrible - automatic terminator insertion comes to mind. Whoever thought that was a feature was horribly wrong. Oh well.

Also - string concatenation is not commutative, but + is overloaded anyway. But then, lots of other languages do it too, so eh.

 

[Creasy]

Javascript can be turned off client-side, some browsers don't support it by design

That's why good JavaScript degrades gracefully.

I know, but I occasionally use elinks

Image use considered harmful.

it depends on the client

Everything depends on the client. Why aren't you criticizing CSS?

string concatenation is not commutative

Hahaha, oh wow. How could you possibly care about something so trivial and inconsequential?

 

[Hiikaru]

Everything depends on the client. Why aren't you criticizing CSS?

The CSS I use works in an ancient incarnation of IE, which is generally considered one of the worst browsers even with the latest version of it, whereas Javascript can be slow and also turned off. Apparently less of a problem with this graceful Javascript of yours, but I think that you have to do more work to make Javascript look and work better (and I'm basing this off of that my CSS is messy but still works perfectly, and that all the Javascript tutorials and books I've looked at look awful and unlike the kind you're talking about).

ETA: By "look awful" I don't mean I have anything against the language itself, but that the code is written in an illegible fashion. Although this usually has more to do with the programmer; for example ActionScript is a very tidy language, but people still manage to mangle it.

and the only game in town, so it's a moot point

I think that's basically true. Other coding languages may have better support, but they just can't do all the little tricks Javascript is capable of.

Javascript can be turned off client-side

That's why good JavaScript degrades gracefully.

I'm not attacking you here, just curious - what about degrading gracefully makes it so that you can't turn it off? Does disabling the user's ability to turn it off pose any kind of security or lag issues?

 

[Butterfree]

...degrading gracefully does not mean that you can't turn it off. It means that when it has been turned off, it still works or provides an alternative even though the Javascript functionality is gone, instead of everything just breaking and becoming unusable.

And um. Sometimes you want client-side scripting. It's not as if being client-side is some sort of an annoying design flaw of Javascript. You can't do everything server-side.

 

[Hiikaru]

...degrading gracefully does not mean that you can't turn it off. It means that when it has been turned off, it still works or provides an alternative even though the Javascript functionality is gone, instead of everything just breaking and becoming unusable.

Oh, got it.

Maybe JavaScript is worth looking into, but... probably not in the coding book we have. It doesn't seem to talk about degrading gracefully, and that sounds pretty important (unless it's way later in the book... why would you learn that feature later?).