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.
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.
I just set up WordPress and tried to install a theme. All is good, but for one simple issue. I know how to make an image dynamic a image in the beginning to set up my index.php, like this:
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="" />
but how to make an image dynamic which is called by css
.portfolio {
background-attachment: fixed;
background-image: url("../img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}
I've tried so many times but fail. Please suggest some ideas.
You should note that Wordpress has an standard way to add <script>s and <style>s to the <head> section of your web document, which is using wp_enqueue_scripts action, but regarding your question, I will try to provide the desired way:
You may put that particular CSS in <style> tags in your documents <head> section and use:
.portfolio {
background-attachment: fixed;
background-image: url("<?php echo get_template_directory_uri(); ?>/img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}
UPDATE
Although, this seems to work and let you have the desired output, I strongly recommend you do not use it, because you may use:
.portfolio {
background-attachment: fixed;
background-image: url("img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}
in your style.css file and still get the same result.
I really do not know what kind of dynamic CSS, are you after, but If you really want it to be dynamic and you are sure about what you are doing, you have two methods:
The above method (adding styles to <style> tag in <head> section of document)
making your stylesheet file dynamic, using PHP (which you may get a tutorial on this link, or google for dynamic stylesheet php)
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');
I'm working with Embarcadero's RADPHP XE2 and a page I want to build has some text at the top (multiple lines) as a label, and below that a PageControl component - despite the page being set to be more than tall enough, when debugging and viewing in Internet Explorer there are no scrollbars and it chops the bottom of the page off.
Has anyone found a work around on this?
I could not get scroll bars in my browser although the page is larger than the window.
Now fixed by adding this
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
to my css file.
To load my css file into the Page I put my tags into a text file including
<link rel="stylesheet" href="/css/mainstyle.css" type="text/css">
then load the text file into the page my putting
$head = file_get_contents('defaulthead.txt');
echo $head;
into the OnShowHead event of the page.
The solution by Les Kaye did not work for me.
For some reason, the script /rpcl-bin/qooxdoo/framework/script/qx.js does overwrite my stylesheet by inserting following CSS at runtime:
html,body {
width:100%;
height:100%;
overflow:hidden;
}
So what I simply did is using the !important rule. It is not clean, but the behavior of qx.js is not clean either. There should really be a Form property where the user can define if the page scrolls or not.
/* Overwrite the values which are enforced in /rpcl-bin/qooxdoo/framework/script/qx.js */
html {overflow-x:scroll !important ; }
html {overflow-y:scroll !important ; }
html {overflow:scroll !important ; }