How to change css based on url

 

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?

Lets say you have three themes:

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

    • Create a class and theme for each one in CSS. Eg 

    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 ?> >

    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
}
?>

    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']

    链接地址: http://www.djcxy.com/p/30538.html

    上一篇: PHP脚本包含不同目录中的HTML

    下一篇: 如何改变基于网址的CSS