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>
Related
I wanted to change background image on phpMyAdmin login page (index.php), but I have no idea how I'm supposed to do it. I tried to add <style> elements by echoing them in /phpmyadmin/libraries/plugins/auth/AuthenticationCookie.php file, but it adds items after <body> tag.
Thanks to Phil I've managed to modify /phpmyadmin/themes/pmahomme/css/common.css.php file, and I've found where I can change the CSS code to properly add a background picture to the login form. In my file it was placed on lines 871-875:
body#loginform {
margin-top: 1em;
text-align: center;
background-image: url("<file>");
}
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.
Im currently making a poll website. And i were trying to change the font (to a custom font(font-face)) of the h1 tag but it doesn't work. But changing the color and everything else works. I have also tried changing the tag to p and giving it an id. The custom font works on all other pages but the poll php one.
#font-face {
font-family: Ubuntu-BI;
src: url('fonts/Ubuntu-BI.ttf');
}
h1{
color: #e9e9e9;
font-family: Ubuntu-BI;
font-size: 40px;
}
<style>
<?php include 'css/pollStyle.css'; ?>
</style>
<?php <!-- HERE'S THE REST OF THE CODE
echo "<h1>$title</h1>"; //< Title of the pole
I would really appreciate some help! :)
The PHP include construct does not output anything to the page. It includes the contents of a file into the current code base. What you want to do is put this into the HTML document head:
<link rel="stylesheet" href="css/pollStyle.css"/>
There is nothing wrong with the CSS itself, the problem must lay in the way it is included. As per miken32 answer you should use a link tag to attach the stylesheet. In theory the way you have specified would work as long as this code was within the <head></head> tags.
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 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');