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.
Related
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 web site. Here in my home page there is a content "My dummy text ". which is placed in ul li a tag. ie
<ul><li><a>My dummy text</a></li></ul>
i want to make this text should highlighted in blue when someone first lands on the home page. other wise it's must be in white. Does any one know how to do this ?
mine is a php web site
Thanks in advance
Just to add a little onto the cookie method I suggest adding a class to the <body> tag so that if in the future you want to do more you could do it without having to modify the PHP.
For example:
<?php
function dejavu() {
$class = '';
if($_COOKIE['beenHereBefore']) {
$class .= 'beenHereBefore';
}
else {
$class .= 'firstTimeHere';
setcookie("beenHereBefore", true);
}
return $class;
}
?>
<body class="<?php echo dejavu(); ?>">
One thing that you want to take into account though is that if a user clears their cookies then it will act as though they are visiting the site for the first time; so I suggest, if possible store it in their user profile if one exists.
So then in your CSS you can do the following:
ul li a {color: white;}
.firstTimeHere ul li a {color: blue;}
I dont see any code so..here is my theoritical explaination as well...
1 Use Cookies.
2 HTML5 Cache..You can use localstorage to do that as well
you can use cookie
set default 0
if someone loaded the page than change cookie to 1 otherwise 0
.
<ul>
<li>
<a <?php if($_COOKIE["status"] == 0){style="color:blue;"} ?>>My dummy text</a>
</li>
</ul>
Use:
$(window).ready(function(){
// do your CSS stuff here ...
});
Or use :
$(document).ready(function(){
// do your CSS stuff here ...
});
Check this link : http://api.jquery.com/ready/
I advise you to do it using jquery to check if you are in the home page
Assume your home page is called : index.php
Like this :
if(window.location.href.indexOf("index.php") > -1)
{
$('#ulid li').css('color', 'red');
}
else $('#ulid li').css('color', 'black');
Give your ul an ID and assume you want to highlight using red and your original text color was black
No need to use Cookies you can do this trick using jquery very easily .
I have an array of strings.
$x=array('blabla1', 'blabla2', ...);
I want to fill a div block with strings from $x until my div is full. The height of my div is fixed to $h.
For instance, I want to put in my div something like that
<div>
<ul>
<li> 'blabla1' </li>
<li> 'blabla2' </li>
<li> 'blabla3' </li>
...
</ul>
</div>
until it is full.
Any guess how to do so ?
Javascript or php ?
Thank you :)
Why I want to do this : I have a side div on my webpage with suggested links. I want to put as many suggested links as possible in this side div.
Colas
PS : Feel free to edit my post (eg, add tags).
Its going to be problematic to do this by just using php.
My suggestion is to do it using overflow hidden css property in combination with a jquery plugin like:
dotdotdot
You must determine the height of your div in any fixed measurable unit such as px. Then adjust the height of each list item. By dividing the height of div/ the height of list item, you will know the number of list items required say n so inside your div do the following:
<div class="define-height">
<ul>
<?php
for ($i = 0; $i < $n; $i++){
?>
<li><?php echo $x[$i];?></li>
<?php } ?>
<ul>
</div>
Because you already know the fixed height value of your div. You can also add a fixed height value to the li elements and then from php do the following:
I am assuming that you already set the fixed height values for the div and ul in your css.
$div_height = 500px;
$li_height = 21px;
echo '<div id="mydiv"><ul id="myul">';
for($i=0;$i<=$div_height;$i+=$li_height){
echo "<li>"."your content here"."</li>";
}
echo '</ul></div>';
Using jQuery client side:
while( $("#divId").height() > $("#ulId").height() ) {
$("#ulId").append("<li>blabla1</li>");
}
From the comments :
any reason you can't just use overflow: hidden? – Marc B
Then you have to doit through javascript. From javascript is the only way you can have the height of a dom element after created. Maybe this div has to be dynamically populated through an ajax call to php that returns only one li element. And after that in javascript calculate if there is enough space to anoter li element in that case do the next call until there is no more available space. You can also set overflow:hidden in your div but this will only hide the content that is out of the div. – slash28cu
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.
I am wondering if it's possible to create a grid-like layout using div's that are dynamically created using PHP.
I am creating a product page that will display all products in a PHP database. I want each product to be housed in a div, and 3 divs to display in a row with as many rows as needed to get through all the products.
Something like this:
div div div
$row['product1'] $row['product2'] $row['product3']
div div div
$row['product4'] $row['product5'] $row['product6']
I would prefer not to use a table. I know how to line divs up using the float and clear properties, but not if they are all being created in a while statement, which makes me think it might not be possible.
So I guess, is this possible without using tables, or should I just stick with that?
This can be done the way you ask, though it isn't the best way. It's entirely possible to identify the <div> positions within columns in a while loop:
// Looping over your results simplified...
$i = 1;
while ($results) {
if ($i % 3 == 1) {
$div_class = 'left';
}
else if ($i % 3 == 2) {
$div_class = 'middle';
}
else {
$div_class = 'right';
}
$i++;
// output, simplified
echo "<div class='$div_class'>$row_contents</div>";
}
Then use your CSS to float and clear as necessary for the left, middle, right classes.
.left, .middle, .right {
float: left;
}
.left { clear: left; }
.right { clear: right; }
However,
Given all of this, I still probably wouldn't bother with <div>s. Semantically if this is a list of products, you should be listing them in <li> tags. Then just style the <li> to float: left; and make each one 33% the width of the container so you get 3 per line.