how to skin, only extremely simply?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
eyeronik
Forum Newbie
Posts: 4
Joined: Sat Jan 18, 2003 12:11 pm

how to skin, only extremely simply?

Post by eyeronik »

Hi, basically i dont know php only html and i wanted to have different themes on a very simply layout, basically all i want to change is:

- one image at the top of the site, like a banner
- font hover colour
- font link colour

+ drop down menu to select them, although i can make that in html im not sure how to intergrate it into the php.

So Thats it. Ive tried following http://domesticat.net/skins/howto.php and no offence to the person who wrote that its just not what i can follow and not really what i need, although its hard to follow since the code writing is all blurred for some reason and it mentions the code being bold but its not as its all blurred, so anyway does anyone have anything more?
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

and here's a simple answer ;)

Code: Select all

<?php
$styleAnchor = 'color: red';
$styleAnchorHover = 'color: green';
$imgSrc = 'imgs/picA.png';
?>
[...]
<html>
<head>
	<style type="text/css">
		a { <?php echo $styleAnchor; ?> }
		a:hover { <?php echo $styleAnchorHover; ?> }
	</style>
<head>
<body>
	<img src="<?php echo $imgSrc; ?>" />
</body>
</html>
not sofisticated, but hey, you wanted it simple ;)
How $styleAnchor/etc is set doesn't matter as long as it is set before it is used.
Who should be able to skin the page how?
eyeronik
Forum Newbie
Posts: 4
Joined: Sat Jan 18, 2003 12:11 pm

Post by eyeronik »

oh thanks ill try that in a moment, any vistors to the site should be able to choose a skin via a drop down menu, each theme would then have its own banner image and font colour and the themes would be listed in the menu you see, like say id have i dunno, a matrix theme, the image would be of the matrix then the font links green, so in the drop menu id have "matrix" then you could chose that, dont think id want a go button though

*ok i tried that and it gives html errors, i tried it in dreamweaver, i just pasted the code in and it highlights <html> <head> and <head> <body> and the image doesnt show up and it shows [...] on the page, maybe im doing it wrong i dont know :roll:

hmm i removed "[...]" and theres no html errors, but the image wont show up, ive no idea either of the set up, like do i make the themes in one page or what, maybe its too complicated to explain to me cos im not fam with php,


*ok i went online instead, uploaded the stuff and now the image appears but it has [...] next to it? the link hover also works, so thats great, its just getting rid of the [...] part and how to choose a skin and where do i add more etc?
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

oops, forgot a /
must be (of course)

Code: Select all

&lt;/head&gt;&lt;body&gt;
the [...]should be a placeholder for fancy other code here if needed.
I take this as hey, slow down, I'm a beginner ;)

To let the user choose the values of $styleAnchor, $styleAnchorHover & $imgSrc you have to show them the possibilities and your script must react on the choice. Somewhere you have to store that information as long as this user stays on your site.

I will keep this very simple. Let's say the possible skins are stored within an array. Starting with only one skin and how to access the values

Code: Select all

<?php $skin = array(); // <- supresses a warning
$skin['anchor'] = 'color: red'
$skin['hover'] = 'color: green';
$skin['image'] = 'imgs/picA.png';

echo '<pre>'; print_r($skin); echo '</pre>'; //  take a closer look at the output of this

echo 'anchor is: ', $skin['anchor'], '<br />';
echo 'hover is: ', $skin['hover'], '<br />';
echo 'image is: ', $skin['image'], '<br />';
?>
the array is the same if you create it this way

Code: Select all

<?php
$skin = array(
		'anchor' => 'color: red',
		'hover' => 'color: green',
		'image' => 'imgs/picA.png'
	);
	
echo '<pre>'; print_r($skin);	echo '</pre>'; // compare both print_r outputs
?>
but storing only one skin is not that useful. Let's store more of them in another array.
Setting elements of an array is not limited to strings. You can assign a whole array to another array, creating a multi-dimensional array.

Code: Select all

<?php
$allSkins = array();

$allSkins['red theme'] = array(
			'anchor' => 'color: red; text-decoration: none;', // styles changed a bit for later use
			'hover' => 'color: red; text-decoration: underline;',
			'image' => 'imgs/picA.png'
	);

$allSkins['green theme'] = array(
			'anchor' => 'color: green; text-decoration: none;',
			'hover' => 'color: green; text-decoration: underline;',
			'image' => 'imgs/picB.png'
	);

$allSkins['blue theme'] = array(
			'anchor' => 'color: blue; text-decoration: none;',
			'hover' => 'color: blue; text-decoration: underline;',
			'image' => 'imgs/picC.png'
	);      

// this time take a very close look at the output of ...
echo '<pre>'; print_r($allSkins); echo '</pre>';



// and now only as example accessing a specific element of each skin
echo $allSkins['red theme']['anchor'], '<br />';
echo $allSkins['green theme']['anchor'], '<br />';
echo $allSkins['blue theme']['anchor'], '<br />';

echo '<hr />';

/* read http://www.php.net/manual/en/control-st ... oreach.php 
   to learn more about the next construct
*/
foreach($allSkins as $skin)
	echo $skin['anchor'], '<br />';

echo '<hr />';

// and now with names
foreach($allSkins as $name=>$skin)
	echo $name, ' sets anchor style to ', $skin['anchor'], '<br />';
?>
if you did not try the examples and examine the output (at least of print_r) now would be a good time to start ;)
so much on arrays right now. See also: http://www.php.net/manual/en/language.types.array.php
...to be continued...
eyeronik
Forum Newbie
Posts: 4
Joined: Sat Jan 18, 2003 12:11 pm

Post by eyeronik »

woah! 2 words: too hard!

:P i hate to of wasted your time there, sorry, but its all too complicated for little old me, thanks for trying, tata
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

ok, there is a simpler way to accomplish that ;)
First the styles.
say you have three files at your webspace red.css, green.css and blue.css containing the different styles, e.g. red.css

Code: Select all

a &#123;color: red; text-decoration: none; &#125;
a:hover &#123; color: red; text-decoration: underline; &#125;
now save this code

Code: Select all

<html>
<head>
	<style type="text/css">
		@import "<?php echo isset($_GET['style']) ? $_GET['style'] : 'blue.css'; ?>";
	</style>
</head>
<body>
	<a href="javascript:void(0)">test</a>
</body>
</html>
in test.php (in the same directory as three css-files) and request that page in your browser.
It will show you the blue-style.
now request the same page and append ?style=red , e.g. http://localhost/test.php?style=red

That does not provide all the functionality you want/need but it's a beginning and you have something to play with ;)

continue? Yes/no/why
Post Reply