I have written all my CSS styles into a .css file; now I want to include that CSS file into a PHP file. I have tried this:
<link href="login.css" rel="stylesheet" type="text/css"></link>
but it is not working.
Here is how to include external javascript and css files in your php code
<?php
//include CSS Style Sheet
echo "<link rel='stylesheet' type='text/css' href='path-to-css-file' />";
//include a javascript file
echo "<script type='text/javascript' src='path-to-javascript-file'></script>";
?>
If you want to include the javascript and css source code inside the php file itself then you can do it like this
<?php
//include CSS Style Sheet
echo "<style type='text/css'>
table{
border: 1px solid;
color: blue;
}
/*heading class*/
.heading1 {
font size: 10px;
}
</style>";
//include a javascript file
echo "<script type='text/javascript'>
/* All your javascript code goes here*/
</script>";
?>
Don't use a closing tag for link elements, e.g.:
<link href="login.css" rel="stylesheet" type="text/css"></link>
It should use a self closing tag, like so:
<link href="login.css" rel="stylesheet" type="text/css" />
Remove the closing </link>, as this is not required.
Also, make sure that your page and login.css are in the same directory, or in other words, the path for CSS file should be correct.
To include it into PHP page, you'll need to print this to browser using echo:
echo '<link href="login.css" rel="stylesheet" type="text/css" />';
Related
I'm using the polylang plugin. Additional css is required for the arabic language. How can I run css according to the subfolder in the functions?
example:
//This is your own css file
<link rel="stylesheet" href="/yellow.css" type="text/css" media="screen,projection" />
//this is the code that will also work according to subfolders
<?php if( url(www.example.com/ar) ) ?>
<link rel="stylesheet" href="/blue.css" type="text/css" media="screen" />
<?php endif;?>
If your trying to fetch styles for a page in php.
Try this
<!--Styles included -->
<style>
<?php include '/blue.css'?>
</style>
wp_enqueue_style('theme', PLUGIN_URL . '/assets/css/test.css');
Another
function load_admin_script() {
wp_enqueue_style('theme', DSSLIDER_PATH . 'assets/css/test.css');
}
add_action( 'admin_enqueue_scripts', 'load_admin_script' );
If you're using
wp_enqueue_style('handle-name', $loc);
you get something like
<link rel='stylesheet' id='handle-name' href='http://example.com/style.css' type='text/css' media='all' />
Is there any easy way to get the content of the style.css inside a <style> tag?
<style>
html,body {
...
}
...
</style>
Is there a built in solution or have I do it manually. For performance I'll use a caching around
You can use an include like this:
<style>
<? include('style.css'); ?>
</style>
I need to force CSS changes to go live immediately and I found that add a version to CSS would help to do that as bellow.
<link rel="stylesheet" href="css/style.css?version=123456" media="all"/>
I need to automate this as it is difficult to change the main file always when need to do small change to css file.
So I found following line of code(sample) in PHP doing the same job.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
I have tried to convert this line to Smarty, but it is giving error.
code :
<link rel="stylesheet" href="css/style.css?version={#filemtime:css/style.css} />
error:
syntax error: unrecognized tag: #filemtime:...........
Anybody has an idea how to do this ?
Thanks in advance
You can add this modifier to smarty plugin folder,
function smarty_modifier_filemtime($path){
$path = str_replace(array('/', '\\'), DIRECTORY_SEPARATOR, $path);
return filemtime( YOUR_HOME_DIR.$path );
}
then call it like bellow,
<link rel="stylesheet" href="/css/style.css?v={'/css/style.css'|#filemtime}" type="text/css">
I need to change the css of the home page only, I have googled and a lot of the suggestions were to add the page id as part of the css selector. But when I try it, it doesn't seem to work? I want to change the class ".contentclass" and the pages id is "599" so here's what I've tried:
.post-id-599 .contentclass {}
.page-id-599 .contentclass {}
.body-id-599 .contentclass {}
none of them seems to be working...
Link to the webpage I'm working on: Link
Try using the right click "inspect element" or equivalent for your browser.
When I look at your site I see something like this
<body class="page page-id-624 woocommerce-cart woocommerce-page boxed varukorg" style="">
So for example for this page:
http://witdesign.se/wp/varukorg
you would use
body.post-id-624 .contentclass {}
Any styles within the braces will be applicable to the pages with a body class of post-id-668
To be sure, you will need to check what renders in your browser using an inspector.
If your theme uses body_class() in the body tag, you will have a specific css class for the front page (.home), which you could use in the stylesheet;
Example (might be different for your theme):
.home #content .entry { color: #123edf; }
to overwerite the genral stylesheet style.css, you could use a conditional statement in header.php to link a specific stylesheet for the front page:
Example:
<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } ?>
the code needs to be after the link to the general stylesheet.
(instead of is_home() you might need to use is_front_page() )
Check: Conditional_Tags and get_stylesheet_directory_uri
--
alternative, to load a different stylesheet instead of the general stylesheet, use the conditional statement with an else:
(this code would replace the link of the general stylesheet)
Example:
<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php } ?>
base_url() doesn't work at CSS file...
here's my php :
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
<body>
</body>
here's my css/style.css :
body {
background:#356aa0 url(<?=base_url()?>img/background.png) repeat-x;
color:#fff;
}
the text color change to white, but the image doesn't show up...
if i use url(../img/background.png), it show up...
but when i open url localhost/project/index.php/control/function/var1/var2, it doesn't show up...
It's Solved, Thanks every one... :]
i make php file at view folder like this :
<?php header("content-type: text/css"); ?>
body {
background:url(<?=base_url()?>img/background.png);
}
and i load the php file i just make with function at controller, and then i link it :
<link type="text/css" rel="stylesheet" href="<?=base_url()?>control/style.php"/>
It's work, Thanks guys...
You should do it like this
Structure of your files
myapp/
application/
system/
css/
img/
And in css write this
body {
background:#356aa0 url(../img/background.png) repeat-x;
color:#fff;
}
And now call it
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
That is the standard way of doing it. Also your css is not dynamic so you dont have to worry about php code using in it. The structure i presented in the answer will surely use the styles correctly and load the images.
CSS file does not get parse as PHP file. If you really want to do something like that, rename your file as styles.php
OPEN the page and add
header("content-type: text/css");
This tells the page to be treated as a text based CSS file. Then you can simple echo your remaining CSS like
echo "
body {
....
....
";
To fix the base_url() not being accessible from styles.php set a session variable to keep that. You can keep this on your index.php of codeignitor.
$_SESSION['base_url'] = base_url();
Now, use this inside styles.php.
background: url("<?php echo $_SESSION['base_url']; ?>"/../../some.jpg");
Get your base_url() out of the CSS file. That would fix the problem. You can't put PHP code in a CSS file.
You don't need to make php file as css. Simply put your images file out of "application" folder, e.g on assets/img. Then edit your css file
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../img/error.png');
background-size: 20px 20px;
}
call the css file using
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/style.css" media="all">
It will absolutely works dude!.
if your folder structure is:
YourAppFolder/
application/
public/
css/
img/
system/
Then use this in your view:
<link rel="stylesheet" type="text/css" href="<?=base_url()?>public/css/style.css"/>
and in css use this for image:
background:#356aa0 url(../img/background.png) repeat-x;
Try this..
Replace this:
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
<body>
</body>
With this:
<link rel="stylesheet" type="text/css" href="<?php base_url(CSS/style.css)?>"/>
<body>
</body>
Also replace the following in css/style.css :
body {
background:#356aa0 url(<?=base_url()?>img/background.png) repeat-x;
color:#fff;
}
With this:
body {
background:#356aa0 url(../img/background.png) repeat-x;
color:#fff;
}
NB: if it doesn't work, try use one dot(.) -> ./img/background.png
Assuming your file structure is like this:
-ci
--application
--CSS
---file.css
--img
---background.png
--system
.
.
.
and your base_url() : " http://localhost/sitename/ "
or you can write ...
<link rel="stylesheet" type="text/css" href="<? echo base_url('your css file from base url') ?>/>
this is your external css file
body {
background:url(<? echo base_url('your image path from base url')?>) repeat-x;
color:#fff;
}