Forum Moderators: coopster

Message Too Old, No Replies

PHP to set variable CSS for background image

         

d00d

5:54 am on Mar 24, 2008 (gmt 0)

10+ Year Member



Hello. I'm trying to set a background according to which page you're on. Not sure if it's possible. Here's what I have:

added: AddType application/x-httpd-php .css to my .htaccess

in my css file I have:

<?php
header('content-type:text/css');
/* caches css file */
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT");
$self=$_SERVER['PHP_SELF'];
/* Colour schemes */
if (preg_match('index.php',$self))
{
$bg='background: #000 url(bg1.jpg) top left no-repeat;';
}

else if (preg_match('photos.php',$self))
{
$bg='background: #000 url(bg2.jpg) top left no-repeat;';
}
?>

body {
margin: 0;
padding: 0;
color: #fff;
font: 11px tahoma;
<?php echo $bg;?>
}

Is it possible?

[edited by: SuzyUK at 10:01 am (utc) on Mar. 24, 2008]
[edit reason] thread split and move [/edit]

d00d

7:08 am on Mar 24, 2008 (gmt 0)

10+ Year Member



This is tough without knowing much php.

a better method might be to put this in the header:

<?php
// gets current page name
function curPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);

And under that, I would need "if current page is equal to index.php, then echo this stylesheet, else echo stylesheet2.

?>

Any advice?

carsten888

2:15 pm on Mar 24, 2008 (gmt 0)

10+ Year Member



yes, is possible, did it loads of times.

somewhere on the page:
<style type="css/text">
body{
background: url(../images/background<?php if($_GET['page_id']==27){echo '1'}else{echo '2'} ?>.jpg) top left no-repeat;
}
</style>

d00d

2:54 pm on Mar 24, 2008 (gmt 0)

10+ Year Member



I almost understand that... But how do you get page_id and where did the number 27 come from? Also, I get a syntax error: "unexpected '}', expecting ',' or ';'"

I need to echo a stylesheet. Would something like this work?

<?php if($_GET['page_id']==index.php){echo '<link rel="stylesheet" type="text/css" href="default.css" />'}else{echo '<link rel="stylesheet" type="text/css" href="otherstyle.css" />'} ?>

d00d

4:32 pm on Mar 24, 2008 (gmt 0)

10+ Year Member



Got it to work like this. Forgive me if there's a cleaner solution:

<?php
$page_id=27;
if ($page_id==27){ echo '<link rel="alternate stylesheet" type="text/css" media="screen" title="sunset" href="style1.css" />'; }else{echo '<link rel="alternate stylesheet" type="text/css" media="screen" title="sunset" href="style2.css" />'; }; ?>

penders

5:58 pm on Mar 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You can do this with an external CSS file in much the same way as your first example. Personally, however, I would name your CSS file with a .php extension for it to get parsed by PHP (rather than adding a line to your .htaccess file to parse all CSS files for PHP, but anyway...).

HTML:

<link rel="stylesheet" type="text/css" href="mycss.php">

mycss.php

<?php 
header('Content-Type: text/css');
?>
/* The rest of your CSS... */

That should be all that's required in order to get PHP in your CSS file.

IMHO however, I would have thought this was best done in CSS alone - no PHP required. Simply add a unique page ID to the body element and CSS accordingly. You can then allow the CSS to cache, reducing bandwidth and improving speed.

HTML:

<body id="homepage">

CSS:

body#homepage { 
background-image: url(bg1.jpg);
}
body#contactpage {
background-image: url(bg2.jpg);
}

Having an ID on the body element allows you to provide a lot more page specific styling as well.

d00d

7:07 pm on Mar 24, 2008 (gmt 0)

10+ Year Member



Thank you! Can't believe the solution was so simple and obvious. You're a genius.

g1smd

7:13 pm on Mar 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Multiple ways to do it.

I wouldn't have multiple sytylesheets. That's too much work.

I would have one stylesheet and set the classname on the body tag on HTML page to match with the styles available in the stylesheet.