What is the easiest way to set background color in PHP ?
just insert the following line and use any color you like
echo "<body style='background-color:pink'>";
<?php
header('Content-Type: text/css');
?>
some selector {
background-color: <?php echo $my_colour_that_has_been_checked_to_be_a_safe_value; ?>;
}
You must use CSS. Can't be done with PHP.
CSS supports text input for colors (i.e. "black" = #000000 "white" = #ffffff)
So I think the helpful solution we are looking for here is how can one have PHP take the output from an HTML form text input box and have it tell CSS to use this line of text for background color.
So that when a a user types "blue" into the text field titled "what is your favorite color", they are returned a page with a blue background, or whatever color they happen to type in so long as it is recognized by CSS.
I believe Dan is on the right track, but may need to elaborate for use PHP newbies, when I try this I am returned a green screen no matter what is typed in (I even set this up as an elseif to display a white background if no data is entered in the text field, still green?
You can use php in the style sheet. Just remember to set header("Content-type: text/css") in the style.php (or whatever then name is) file
This really depends on what you need to do. If you want to set a background colour on a page then you need to use CSS as per Jay's and David Dorward's answers.
If you are building an image with PHP then you can use the GD library to allocate colours yourself. I don't recommend this without thoroughly reading up on how to create images with GD. http://www.php.net/manual/en/function.imagecolorallocate.php
Try this:
<style type="text/css">
<?php include("bg-color.php") ?>
</style>
And bg-color.php can be something like:
<?php
//Don't forget to sanitize the input
$colour = $_GET["colour"];
?>
body {
background-color: #<?php echo $colour ?>;
}
You better use CSS for that, after all, this is what CSS is for. If you don't want to do that, go with Dorwand's answer.
I would recommend to use css, but php to use to set some class or id for the element, in order to make it generated dynamically.
Related
In wordpress there is a plugin that assigns a header graphic for each page. You call that header graphic by placing this code in your header.php file:
<?php if(function_exists('show_media_header')){ show_media_header();} ?>
This basically calls the image assigned and places it as an IMG in HTML.
I would like to have it called as a background image with CSS but don't know how. For example:
.header-graphic{ background:url("show_media_header();"); }
I know that will obviously not work but that should explain what I'm trying to do.
Any help would be great.
Thanks!
Depending on the scope of show_media_header() and that it actually returns the path to an image you could write the following:
.header-graphic{ background:url("<?php echo show_media_header(); ?>"); }
However this is of course under the assumption that your css is in the php-file, which wouldn't be recommended. You should look at using SASS or LESS instead.
It's generally a bad idea to serve static files (like CSS) dynamically, since it can't be cached effectively. So inserting the result of show_media_header() directly into your CSS is a no-go.
However, there is an alternative: Insert just that style into the HTML like so:
<h3 style='background-image: url("<?= show_media_header(); ?>");'>
Foo
</h3>
Which can then be further modified by CSS that is in a statically-served and unchanging file - for example:
h3 {
background-position: left 3px top 3px;
}
This of course assumes the function returns just the image URL; I've not used Wordpress personally.
Based on another comment, apparently this function generates a complete <img> tag (ugh!) so you might instead have to do something like this:
<h3>
<?= show_media_header(); ?>
Foo
</h3>
And style it as appropriate like so:
h3 img {
margin: 3px 0 0 3px;
}
I'm gonna post it down here because no one is considering your statement:
"and places it as an IMG in HTML"
You may have to edit you plugin output. Since show_media_header(); echo a value, the function itself is creating a <img> element. Look for the plugin file, search for the function and, either create another one, duplicating the original, something like show_media_header_bg where you manipulate the element, or change the original.
How about if you use descendant CSS selectors as such:
#page #header {
background-image: url("image.jpg");
}
#another-page #header {
background-image: url("another-image.jpg");
}
and so assign each page to its background image.
Here, I'm assuming you can grab into each page by an id (here called "page" and "another-page", and that your header template has an id of header. It would help to see some HTML to see how best to exactly achieve this via CSS.
Got it to work!
Dug around in the plugin PHP file and found this:
function get_media_header_url() {
global $post;
$post_id = $post->ID;
So I did this:
.header-graphic-background{ background:url("images/<?php echo get_media_header_url() ?>"); }
Works great!
You guys absolutely pointed me in the right direction. THANKS!!!
Good Morning, I am working on my wordpress web-page, which is made of image-boxes and they are changed to one-color background boxes with text on hover. See example here: http://www.top-news.6f.sk/.
I want make this boxes to have random color background or random color from list of colors.
I found out that the color of these boxes isnt set in .css file but its probably generated by some php file or function. (If u inspect source code you cand find that there is generated some css style inside, so if i put this code in my stelysheet.css it still wont work because it is overrided.
Can you give me any clues where to find a code where can i change the color of these boxes? Then I would be able to rewrite it to random color.
Thanks
If you want to override inline styles, in your style.css, use !important.
Similar to :
background-color: #fff !important;
If you want to create a random background color
<?php $hex = dechex(rand(0,255)) . dechex(rand(0,255)) . dechex(rand(0,255)); ?>
and then you’d use the following in your body tag:
<body BGCOLOR=“#<?php echo($hex);?>”>
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I know there has to be a better way to do this.
Currently I have a php script which will generate a random image from a certain directory when called.
I have div's calling the background.php file in the stylesheet under the div's background setting
background:url(randomimagescript.php);
There are a lot of little div's on this page right now, all calling separate random image php scripts... is there a way I could use a variable when calling the file, so I can just use one script? I still need to have good styling control over the image, so i'm not sure if there is a better option than calling the script as a background image for a div.
If anyone has any ideas, let me know!
try this (it might not be optimal):
background:url("randomimagescript.php?folder=myfolder");
and in randomimagescript.php:
<?php
$folder = #_$REQUEST['folder'];
$url = "galleries/$folder/thumbs/image.jpg"; // ie, compose image
http_redirect($url); // go and find the image.
?>
It sounds a little crazy, but you could actually make your stylesheet be generated by PHP, and just fill in the blank, so to speak.
background:url(<? echo pickRandomImage(); ?>)
set the background for all divs once on the page using jquery
var image = <?echo randomimagescript.php?>
$("div").css('background', 'url('+ image+ ')');
we are looking to place a semi-transparent welcome image on a clients Wordpress main index page, exactly like this http://www.editionsof100.com/.
I suspect this has been created using Jquery, would be possible to create something similar by adding to the CSS or index.php on WP?
This is quite simple, but pointless IMHO:
Create a div wherever you want the image located:
<div id="hello"><img src="http://tonkapark.com/projects/hello.png"></div>
Then you just use .fadeOut() on the element. Standard & simple jQuery
References:
http://api.jquery.com/fadeOut/
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Have you tried using rgba values?
Example:
div { background: rgba(200, 54, 54, 0.5); }
If you need some animations, check out this cool css library which it is very easy to use.
enter link description here