How to change css based on url

Question

I have a site that I want the user to be able to change the background image and some other css elements. The way I have attempted to do it is be having multiple html pages that the user can change via a dropdown and reload the page.

example:

href 1 = index.html

href 2 = red.html

href 3 = blue.html

Each page is identical and all point to the same stylesheet (style.php), but I want the linked stylesheet elements to change based on the url selected by the user.

So style.php starts like this

<?php
    header("Content-type: text/css; charset: UTF-8");
    include 'blue.php';
?>

body {
    background: url(../images/backgrounds/<?php echo $background; ?>.jpg) no-repeat;
    background-attachment: fixed;
}

Each html page has a matching .php page that defines each variable for the background.

So what I need is a way of selecting include 'blue.php' if the user is on blue.html. I could just use different style sheets but that would get cumbersome when altering the css.

Is there a way of doing this with php case based on url?

Why not have a base css file that contains all defaults, and then have blue.css and red.css with overrides, then use PHP (if actually necessary) to dynamically add the relevant override sheet? Don't see that as cumbersome. — Jonnix
– Jonnix, Commented Jun 4, 2015 at 23:20
If you're wanting to do it based on the URL, you could use $_SERVER['REQUEST_URI'] to figure out which page they're on. — John Shipp
– John Shipp, Commented Jun 4, 2015 at 23:32

Jon P · Accepted Answer · 2015-06-05 03:41:25Z

1

Lets say you have three themes:

Hot (red)
Cold (blue)
Neutral (default)

Create a class and theme for each one in CSS. E.g

body.hot
{
    /*Set Base Theme details here, including background*/
}

body.hot p 
{
   /*Styles for hot paragraphs*/
}

/*etc*/


body.cold
{
    /*Set Base Theme details here, including background*/
}

body.cold p 
{
   /*Styles for cold paragraphs*/
}

/*etc*/

Now use a session variable to hold the users choice and then add a class as required to the body tag:

$bodyClass = "";
switch($_SESSION['bodyClass']) {
case "hot":

break;
case "cold":
   $bodyClass= "class='cold'";
break;
default:
  $bodyClass = "";
}

Now insert that into the body tag

<body <?=$bodyClass ?> >

answered Jun 5, 2015 at 3:41

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kittykittybangbang · Accepted Answer · 2015-06-04 23:29:31Z

0

Why not use a $_SESSION variable for the user's background choice instead of having multiple HTML pages? That way, you could avoid duplicating code.

If you wanted to try this route, you could include switch.php in your stylesheet instead of include blue.php, where switch.php checks which background to apply:

<?php
// switch.php
switch($_SESSION['background']) {
case "red":
  // apply red background
break;
case "yellow":
  // apply yellow background
break;
default:
  // apply blue background
}
?>

answered Jun 4, 2015 at 23:29

kittykittybangbang

2,4184 gold badges18 silver badges27 bronze badges

Comments

Clyff · Accepted Answer · 2015-06-05 03:25:20Z

I have a site where the user can edit the color/ font-size and font type and i'm saving the values in my db.

Only the editable elements in my site are in a php called file "style.php" like this (no header or anything):

    .main-header{ background: none repeat scroll 0% 0% <?php echo $edge_background ?> }

    .sub-menu .arrow{ border-bottom: 9px solid <?php echo $edge_background ?> }

In my header i have a sql that check if the user have any value in my db and, if it does, include that file like this.

<head>
<!-- your stuff -->
<?php
    //after sql check with results
    $edge_background = "my value";
    $color2 = "my value";
?>
<style type="text/css">
    <?php include('styles.php') ?>
</style>
</head>

I dont know if that is the best way, but works fine and dont need to create alot of files.

In your case the value will change with the url. You can just check the url and then give a value to your styles with $_SERVER['SERVER_NAME'] and $_SERVER['REQUEST_URI']

Collectives™ on Stack Overflow

How to change css based on url

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related