I need my administrator to be able to change/update the banner of my site.
This is the banner code
<div class="containertop">This depends on the background of the div</div>
and this is the CSS for that
.containertop
{
width:1000px;
height:300px;
**background:url(../images/1.png) no-repeat center;**
margin: 0 auto;
margin-top: 40px;
}
What I would like to happen is the same as a Facebook cover photo.
When a new banner is uploaded, the CSS will be updated(something like that).
But of course, the new banner must be fetched from the database.
So I am thinking that the CSS would become like this:
Fetch the saved banner source and then:
background:url(<?php echo $row['image']; ?>);
but can I do the PHP connection to database (include 'dbname.php') inside a CSS txt?
There's nothing preventing you to serve a css generated by PHP. That's even easy.
Simply start your php file like this :
<?php
header("Content-Type: text/css");
I agree with Ben. If you make a little embedded css section in your page, you could put the .containerTop css code there. Then, put your code in the page.
So, in your actual web page, put this:
<style type="text/css">
.containertop{
width:1000px;
height:300px;
background:url(<?php echo $row['image']; ?>);
margin: 0 auto;
margin-top: 40px;
}
</style>
Of course, your background url will not update until it is reloaded. If you decide to do it this way, don't forget to take the .containerTop definition out of your existing css.
Having said all that, I really like dystroy's answer. Very nice. I never thought of doing that.
You can set containertop background while loading php file.
<?php
echo "<style>.containertop{ background:url(../images/".$row['image'].") no-repeat center;}</style>"
?>
This will set the background fetched from db.
Well, You can use jQuery to change/overwrite the CSS file.
Example -
$('.containertop').css('backgroud','url(images/change.jpg) repeat');
or
$('.containertop').css('backgroud','url(<?php echo $images_url ?>) repeat');
Related
I am trying to pass the percentage in HTML/CSS but I can not succeed.
I am trying:
<?php
$myPercentage = 100;
?>
I am trying to pass the variable in HTML/CSS. I want my progress bar to increase/decrease according to the PHP value.
<style>
.bar-4 {width:70%; height: 18px; background-color: red}
/* Here is the problem, the above progress bar 4 is working and its width increases to 70% but below code is not working. */
.bar-5 {width: <?php echo $myPercentage;?>%; height: 18px; background-color: #4CAF50;}
</style>
Your idea or suggestions would be welcome.
Thank You.
You question lacks some important data, but here are the general guidelines that will make it work:
To have a dynamic variable in the CSS block, you need to be echo the relevant part, or include it in the PHP file (and not on a separate CSS file)
The value given to the variable must come before the CSS block.
So for example, your PHP file should have something like:
<?php
$myPercentage = 100;
?>
<style>
.bar-5 {width: <?php echo $myPercentage;?>%;}
</style>
For cleaner code, the rest of .bar-5 CSS is better to stay in your CSS file, and only the dynamic values should be printed as inline CSS.
my problem is that the css which is located in a different file does not work for a button.
My button:
echo "<p><i><input type='button' id='register' value='register'/></i></p>";
My css:
#register {
background: red;
}
#register:hover{
background: black;
}
For some reason the :hover works perfectly but the #register not at all
Thank you all.
Here is a JSFiddle : http://jsfiddle.net/Bm9E4/
please make sure that your link href is correctly put in your header.
If you are using a relative path, please make sure it links correctly.
Alternatively you can use an absolute path for linking to your css
Check here the differences
Most probably your #register is overwritten by another one . Please give more code ( or the order in which the css is loading ) or search through other or the same css
CSS works on specificity. The more specific you are, the higher priority that style takes.
For example:
HTML
<div id="myDiv"></div>
CSS
#myDiv {
height: 200px;
}
div#myDiv {
height: 0;
}
In this example the height will be set to 0 because div#myDiv is more specific. You can run in to this problem a lot if you're not careful.
I am working on app in which i need to get value of the color attribute from database(Hex value) to make it custom.
I searched on internet i found a solution that i can use css file as php file including this line in css file
<?php
header("Content-type: text/css;");
$bannerColor="#b229b6";
?>
when i select banner color in above code then i show it in css selector like this
#banner {
background-color:<?php echo $bannerColor; ?>;
width: 100%;
height: 436px;
}
it works fine. But when i try to write query in php code(at the top of this php file), the css gets out of order on the main page where i have used this file. When i remove query code it works fine as earlier.
My question is that
1. Can i use $banner= Color::model()->findAll(); in this file? If Yes then what i am doing wrong here?
2. If it can not be used then how to accomplish this task? thanks for your help.
Yourcss.php don't have YII context within, you can:
In your main (layout) file, get your value from database and put into a cookie:
$banner= Color::model()->findAll();
$_COOKIE['bgColor'] = get your value from $banner
In yourcss.php file you should get this value from cookie as:
<style>
#banner {
background-color: <?php echo $_COOKIE['bgColor']; ?>;
width: 100%;
height: 436px;
}
</style>
I kindly ask you for your ideas: I would like to generate a div depending on the size of the window height.
I have created the following script to extract the height via a javascript. I then transform the value to a PHP variable, which I try to insert into the corresponding CSS sheet. When I enter a fixed number (e.g. 800px) the div displays correctly. When I try to use the PHP variable, I don't see anything.
Would you please help me?
Thank you.
<script type="text/javascript">
<!--var w = screen.width;-->
var w = window,
x = w.innerWidth,
y = w.innerHeight;
<?php $screen_height = "<script>document.write(y)</script>";?>
</script>
<style type="text/css">
#map { width: auto; height: 800px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
My solution was:
#map { width: auto; height: <?php echo $screen_height;?>px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
Thank you for your help.
Best regards.
Try to use:
<?php echo $screen_height; ?>
instead of:
<?php $screen_height = "<script>document.write(y)</script>";?>
you cannot use JS in CSS!
Your javascript is executed in the browser, while the PHP is executed on the server. The page is already rendered in the browser by the time the javascript figures out what size the screen is. If you need to change the size of a div based on display screen size, just modify the size of the div with your javascript function.
javascript executes on the client, whereas php code is executed on the server side. store the required width and height in a javascript variable
<script type="text/javascript">
function myfun()
{
var w=100;
var h=200;
document.body.innerHTML = '<div style="position:absolute;width:'+w+'px;height:'+h+'px;opacity:0.3;z-index:100;background:#000;"></div>';
}
</script>
<body>
<div id="d1">hello this is div 1</div>
<button id="b1" onclick="myfun();">click</button>
</body>
you can use the javascript itself to load the div and assign the css properties.
create a file like style.css.php
Start the file with
and then treat it like a normal CSS file, but you will be able to use php values in it.
You will not be able to use javascript in it however, but you will be able to pass values to it by request so you can request style.css.php?windowSize=800.
Ideally though it would be better to simply use javascript to alter a class, or use media queries.
what exactly you want to do? if you just need the div size to be related to the window size you could simply use a percentage (example css, height:90%). if you want to change the div size after the DOM has loaded you'll need some javascript.
I am looking for a solution to deliver a "wallpaper" banner with the adserver "openx". A wallpaper consists of a leaderboard banner (728x90 px) and a vertical skyscraper. I cant find any option in OpenX itself, so I guess there must be some kind of dirty methods to get it done.
Anyone here having experiences with it? I'm thinking of delivering just an leaderboard banner and then attaching a html snipped to the banner - which contains the markup to my skyscraper-banner... :-/
greg0ire > You can see an example of a "wallpaper" banner on this site (you might experience an overlay banner before, make sure you disable ad blocking extensions): http://www.allocine.fr/ Some days it is in flash, other days it is just a background-image css property set on the body element. I'd like to achieve the second option.
Thanks!
I got wallpapers ads to work through openx using this method.
First I created a div below the content wrapper of my site (using wordpress, header.php file).
<div id="adbg" style=" margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor:pointer; ">
Then I created a div block with the wallpaper image in the CSS and added it to OpenX as a TEXT BANNER
<div OnClick="location.href='#';" style="background: url('image.jpg') no-repeat scroll center top #026eb4; height: 100%; width: 100%; margin: 0pt auto; cursor:pointer; "></div>
Finally, I took the openx embed code and place it within the ADBG div I pasted above.
This technique worked well for me on all browsers.
You can of course take the CSS in the adbg div and store it in your CSS file.
For the moment, I ended up doing this, but I'd like to see better solutions:
<div class="openx_<?php echo $_block->getBlockParameter('css_class');?> openx_background hidden">
<?php echo str_replace('INSERT_RANDOM_NUMBER_HERE', rand(0, 9000), $_block->getBlockParameter('html', ESC_RAW));?>
<?php echo javascript_tag()?>
var checkImg = window.setInterval(function(){
if (jQuery('.openx_background img').length)
{
jQuery("body").css('background', 'url("' + jQuery('.openx_background img').attr('src') + '") no-repeat');
window.clearInterval(checkImg);
}
}, 1000);
//give up 3 s later
setTimeout(function(){
if (jQuery('.openx_background img').length == 0)
{
clearInterval(checkImg);
}
}, 3001);
<?php echo end_javascript_tag()?>
</div>
$_block->getBlockParameter('html', ESC_RAW) contains the openx javascript invocation code.
Not sure if this is still of interest, but there's a setting in openX for that called "Companion positioning". Have a look at the OpenX reference guide under point 4.6:
http://opensourceusers.com/sites/default/files/openx_reference_guide.pdf
It's a method to make sure that a skyscraper is delivered every time a certain leaderboard is delivered. You can then use the prepend/append functionality to color the background to turn this "hockey stick" into a full blown wallpaper.