I need to change the CSS on a webpage based on a query string in the URL... but I'm new to PHP and havn't been able to find sufficient examples on how to do it.
Basically when a user clicks on a menu link, and is then sent to an "aboutUs.php" page, I need the CSS on the aboutUs.php page to change based on the string query.
If I understand what you want correctly:
if (isset($_GET['query'])){
$query = $_GET['query'];
}else{
$query = NULL;
}
Then something like this:
if ($query == 'x'){
echo "
<style>
Whatever style you need...
</style>
";
}elseif ($query == 'y'){
echo "
<style>
Whatever other style you need...
</style>
";
}else{
echo "
<style>
Whatever default style you need...
</style>
";
}
Of course you can echo stylesheet link instead of style tags, but the logic is the same.
You can change your style.css to style.php which you can load in the page as a style sheet.
You need to include a header type in your php file:
<?php
header("Content-type: text/css");
?>
and then generate the content dynamically.
In hope I didn't missunderstand the question. This can help you change the content of the css file.
If you have multiple css files and you want to import one of them depending on the parameters to aboutus.php, that's a different story.
In the head of your program (where you would include the css stylesheets) do a simple if else:
if (isset($REQUEST['query_string'])) {?>
stylesheet link
<?php } else { ?>
stylesheet link 2
<?php } ?>
You can save the selected CSS into a cookie:
if (isset($_GET['setstyle'])) {
setcookie('style', $_GET['setstyle'], time()+60*60*24*30, '/');
}
The Style can then be read like this: $_COOKIE['style'].
http://example.com/?setstyle=black -> Style is set to „black“
not very pretty solution but for example something like this would work
<? php
if($str=="main"){
echo '<link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />'
}
else if($str=="other"){
echo '<link rel="stylesheet" type="text/css" media="all" href="/css/other.css" />'
}
?>
be careful with doing something like:
<link rel="stylesheet" type="text/css" media="all" href="/css/$str.css" />
it is not very secure way, unless you do for example an array with possible values, something like
$possibleCss = array("main", "other");
if(in_array($str, $possibleCss){
<link rel="stylesheet" type="text/css" media="all" href="/css/$str.css" />
}
$style = $_GET["style"];
header("Content-type: text/css");
if($style=="blue")
echo ".class{background-color:blue;}";
else
echo ".class{background-color:white;}";
<link rel="stylesheet" type="text/css" href="style_file.php?style=blue" />
Knowing the purpose of your question, from here, I would put all of your common css in on stylesheet, and simply call out specific display properties for the elements you care about. Make all of your elements display: none in your main stylesheet.
<link type="text/css" rel="stylesheet" href="mainStyleSheet.css" />
<style type="text/css">
<?php
if (isset($_GET['section'])){
// Sanitize
$section = preg_replace('/[^a-zA-Z]/', $_GET['section']);
echo '#' . $section . ' { display: block; }';
}
?>
</style>
In this case, section is a parameter, set to ourMisson, ourHistory, etc., called like this:
http://beta.***.com/aboutUs.php?section=ourMission
