I have several sites on the same hosting package. They’re all in different directories. ( i.e. “htdocs/site1”). I want to be able to have them all share one CSS file.
I was wondering if there is a way to change the color of certain elements based on which directory the site is in.
Ideally I would like to be able to define what directory the page is in and what color to use for each directory. Then in my CSS do something like:
.button { color: <?php echo $color ?> ;}
to each element that gets a color change.
Is this possible and if so, how do I go about setting this up?
thank you
You could add different classes to your body tag depending on the directory:
<body class="<?php echo $dir; ?>">
where the $dir variable is given a different value (let's say $dir = 'site1',...) for each directory...
... And then have something like:
.site1 #button { /*styles*/ }
.site2 #button { /*styles*/ }
.site3 #button { /*styles*/ }
in your CSS file.
You could add a CSS class to the body tag of the HTML document to determine the site. In PHP you would have to find a way to write the correct site into to the document. Do you use some kind of global template?
Just to give you an idea:
PHP:
<?php
// some code
// some logic to determine which site you are on - let's say ...
$site = 'SITE1';
?><body class="<?php echo $site; ?>"><?php
// more code
?>
CSS:
body.SITE1 #button { color: #ff0000; }
body.SITE2 #button { color: #0000ff; }
body.SITE2 #button { color: #123456; }
You could dynamically generate the css file using php, where you'd have
<?php
switch ($_SERVER['SERVER_NAME']) {
case 'www.site1.com':
$color = '#ff0000';
break;
case 'www.site2.com':
$color = '...';
break;
...
default:
$color = '...';
?>
.someclass { color : <?php echo $color ?>; }
This is somewhat inefficient, however. You'd be building a css file just to change a single color each time. Better way is to simply embed the color change in the page's header as an in-line style. That way you don't have to mess with making your server parse CSS files as if they were PHP scripts, and you can put the site-specific css overrides into that inline style in the site's header.
Honestly, I would suggest you add a class to your html tag:
<html class="site1">
And within your CSS, define your css:
.site1 * .button1{ background:#f00;}
.site2 * .button1{ background:#f0f;}
.site3 * .button1{ background:#ff0;}
You can find some more information on this subject here for a PHP approach.
Related
I have created a skin switcher and it is working great, but the code is messy.
I save a cookie and then for some defined css classes, I append '-userDelectedColourFromTheCookie' to the end of the css class to apply it on the page.
So far, I am adding a short php line to the end of every instance of these classes in the html code and as I have said, it is working.
I would prefer to run the php code just once across the whole page and update all occurrences of an array containing the required classes to append the class as above.
I have this at the top of my page:
<?php
$classList = array("theme-1","theme-2","theme-3","theme-4","theme-5","theme-6","theme-7","theme-8","theme-9","theme-10","theme-hover","theme-heading","theme-drop-content","theme-container","theme-banner-text");
if ((isset($_COOKIE["Theme"])) && in_array($_COOKIE["Theme"], array("Blue","Red","Grey","Ochre","Mauve"))) echo $classList."-".strtolower($_COOKIE["Theme"]);
?>
<!DOCTYPE html>
... etc
I am defining an array of css classes, then reading the user colour from the cookie and appending it to the css class.
As and example, the default class might be 'theme-3' but of the user selects the blue skin, then this class becomes 'theme-3-blue' and so on.
But it's not working.
Any help would be appreciated.
Don't mess with the element class lists. Use CSS files to apply the colours you want.
Start with a basic CSS design file:
p {
margin-left:10px
font-size: 12pt;
}
h1 {
font-size: 24pt;
}
div {
margin: 10px;
padding 20px;
}
Then create CSS colour files with different colour selections:
blue.css
p {
color:blue;
}
h1 {
color: darkblue;
background-color: lightblue;
}
red.css
p {
color:red;
}
h1 {
color: maroon;
background-color: pink;
}
default.css
p {
color:black;
}
h1 {
color:white;
background-color:black;
}
Then load the colour theme you want
<?php
if (isset($_COOKIE['theme'] && in_array($_COOKIE['theme'], ['red','blue'])) {
$themeCSS = '<link rel="stylesheet" href="'.$_COOKIE['theme'].'.css">';
} else {
$themeCSS = '<link rel="stylesheet" href="default.css">';
}
Then echo $themeCSS in your <head> just like any other <head> element
** I've used standard HTML elements here to illustrate, but any CSS selectors should work.
I believe you want to change the class names inside the $classList variable by appending the selected color theme from the cookies.
You may use the array_map function to modify all elements of your $classList array.
$classList = array("theme-1","theme-2","theme-3","theme-4","theme-5","theme-6","theme-7","theme-8","theme-9","theme-10","theme-hover","theme-heading","theme-drop-content","theme-container","theme-banner-text");
$themeColor = $_COOKIE["Theme"]; // blue
$classList = array_map(function($val) use ($themeColor) { return $val.'-'.$themeColor; }, $classList);
Once you use the array_map function, all elements of the $classList array will be appended with the "-blue".
You can execute and see the output here
http://sandbox.onlinephpfunctions.com/code/6051282e00be1eb7bb7e6a086de20bbcfe9bcc9f
Several good ways to do it. It's a little more complicated with the array of classes but you should be able to adjust this if you need it (not sure why the syntax highlighting is wonky).
Use output buffering and replace at the end:
<?php
ob_start();
?>
<html>
<head></head>
<body>
<div class="theme-1"></div>
</body>
</html>
<?php
$themes = array("Blue","Red","Grey","Ochre","Mauve");
if ((isset($_COOKIE["Theme"])) && in_array($_COOKIE["Theme"], $themes)) {
echo preg_replace('/class="(theme-[^"]+)"/', 'class="$1-' . $_COOKIE['Theme'] . '"', ob_get_clean());
}
With the array of classes, just do it the same way with output buffering but replace like so:
$replace = array_map(function($v) { return "{$v}-{$_COOKIE['Theme']}"; }, $classList);
echo str_replace($classList, $replace, ob_get_clean());
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. 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 ?> >
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']
I have a variable with a score and I'm having php change the color of a div element based on this variable. This if statement is always resolving to True. Anyone see the flaw?
<style>
.poster{
background-color:<?php
if($voteRating > 80.0){
echo "#2ecc71;";
}
else{
echo "#f1c42c;";
}
?>
}
.year{
color:;
}
</style>
Personally, I would create two CSS classes and echo an appropriate class name on the element instead.
if($voteRating < 80)
{
echo "<div class='one-class'>";
}
else
{
echo "<div class='another-class'>";
}
Or, considering this is more of front-end thing, maybe use ajax to determine the $voteRating and then change the style with javascript. Just some alternatives.
Nothing wrong with code. Try echoing $voteRanking to see if it gives more then 80.0
try something like this:-
<style>
.poster{
background-color:<?php echo ($voteRating > ceil(80.0)) ? "#2ecc71;" : "#f1c42c;"; ?>
}
.year{
color:;
}
</style>
You should create different classes for each color and then use javascript or php conditions to set the class upon page rendering or any other event triggering. This way its easy to debug issues with your code.
for example
<style>
.posterhigh{
background: #2ecc71;
}
.posterlow {
background: #f1c42c;
}
</style>
I have a file that holds an array of navigation links, so that if I want to add a new link to the nav menu I can do it in one file rather than have to change multiple manually. However, each menu link (category) requires a different a:hover colour, but my current coding doesn't work.
Here's the file where the menu items are stored, along with the colour that should be the a:hover colour in a multi-indexed array (some are left blank):
<?php
$CATEGORIES = array(
array("culture", "#f9993c"),
array("nature", "#59AF56"),
array("science", "COLOUR"),
array("society", "COLOUR"),
array("technology", "COLOUR")
);
?>
Here's the file that prints the menu items:
<?php
$count_categories = count($CATEGORIES);
$incr_categories = 0;
while($incr_categories != $count_categories) {
// Change main_right_sub a:hover
echo "<style>#main_right_sub a:hover { color: ".$CATEGORIES[$incr_categories][1]."; } </style>";
// Print Nav Items
echo "<a href='category.php?cat?=".$CATEGORIES[$incr_categories][0]."'>".strtoupper($CATEGORIES[$incr_categories][0])."</a>";
// Increment Count
$incr_categories++;
if ($incr_categories != $count_categories) {
echo " | ";
}
}
?>
I'm guessing you can't interchange a style like that, because all the links are coming out as "#59AF56" on mouseover, which is odd as that is the second colour in the multi-index array. Any help would be appreciated!
You can set the categories as CSS classes on your links so that the resulting link looks like this, for example:
CULTURE
And then define CSS styles for each link class with the necessary colors (either by generating them in your PHP code or by defining them in a static CSS file. For example, for the culture link as in the above example:
#main_right_sub a.culture:hover
{
color: #f9993c;
}
First of all css doesn't load after each element as you might think, the browser will use whatever rule that has the highest priority on all of your elements, what you could do is make use of inline css styling, but unfortunately :hover isn't supporter so your last resort is basically javascript
<a
href="link.php"
onMouseOver="this.style.color='#FFF'"
onMouseOut="this.style.color='#000'"
>Text</a>
but the optimal way would be without any doubt be the use of classes, give every colortheme a class and add those classes to desired elements as needed.
I have a standard html page so:
<html>
<head>..
.
..
and so on
and i have a php script linked to that html page with:
if blablabla {
change background color;
}
does anyone know how to change the background color of my page if the conditions in the if statement are met?
I hope i made this clear, if not, please say which bit is unclear.
Thanks for any help in advance
put your <body> tag inside the if else
if blablabla {
echo '<body style="background-color:white">';
}
else {
echo '<body style="background-color:orange">';
}
It's not necessarily great practice, but it should get the job done:
if ( your_conditional ) {
$styleBlock = sprintf('
<style type="text/css">
body {
background-color:%s
}
</style>
', $yourColor);
echo $styleBlock;
}
One good (?) thing about this is that with this technique, you can put your if statement anywhere - it'll act on the body tag regardless of where you put it.
One caution: if you have additional style rules for the body tag's background color farther down your page, those will take precedence over the one from your if statement.
here is code that i whant to change background of body
<body bgcolor="<?php echo $name2; ?>">