I'm really confused what my Wordpress does with css... I have a plugin that is loading a css using this script:
wp_enqueue_style('shutter', NGGALLERY_URLPATH .'shutter/shutter-reloaded.css', false, '1.3.2', 'screen');
I recently changed the css and now it seem's to be loaded twice. First the older css, then the changed css. On FTP I just see one file.
Why is it behaving like that und how can I fix it?
It's definitly not a Browsercache problem, I tested it in several browser and cleared the cache several times...
Yes, this css cache issue is always make me mad before. But I find the solution.
I don't know how to put it on your function, but here is the idea:
Give command to your html to call new css everytime you modified the css file, call the css with something like "style.css?1202122354" instead of only "style.css". "1202122354" is last modified datetime on style.css
In my header themes, I ussually use this to call my CSS file:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
check out the php functionfilemtime( get_stylesheet_directory() . '/style.css') is outputting last modified time for style.css
Hope you catch the idea, sorry don't know how to put it on your function :D
Related
I have tried refreshing and clearing the cache but it still shows the same old file with no changes. Meanwhile every other browser will show the change made in the css file. I changed the name of the css file and upload it and Safari notices the change and applies it. I don't want to have to change a name file every time. Does anyone know a better solution?
You can add to the end of the file
style.css?v=1 or style.css?v=1.1
works for me
or <link rel="stylesheet" type="text/css" href="<?php echo $filename;?>?v=<?php echo $fileModified ; ?>">
I am solving this issue by appending Last Modified Date of the CSS file as a query parameter, like this:
<link rel="stylesheet" href="/wp-content/themes/wannacat/style.css?ver=1631280487" />
With PHP, you can get it like this:
$version = filemtime(get_stylesheet_directory() . '/style.css');
When the file is updated, Safari (as well as all other browsers) will recognize that they need to fetch the latest version of the file.
In my .htaccess file, I redirect all request to my public/index.php file.
From there I do routing, based on params given in URL.
Problem is with my css file being included in view, which says href="css/app.css". All works good when specifying request like http://hostname/public/something, but If I go one directory deeper, like say for example:
http://hostname/public/something/else, my css breaks.
How should I fix this?
That's because you're using relative paths instead of absolute paths for all your html links (images, javascript, css, href links).
Actually, your rule can create virtual directories.
Let's say you have css links that way
<link rel="stylesheet" type="text/css" href="css/style.css">
For some examples, here is the path resolution
/public/something -> /public/css/style.css (GOOD)
/public/something/else -> /public/something/css/style.css (WRONG)
To avoid that behaviour, use absolute path
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
Or, if you don't want to change all your html links, you can add this line after <head> html tag
<base href="/public/">
Use absolute links like href="/public/css/app.css".
If the /public part is variable, e.g. between your development machine and the production server, then use a variable or constant:
<?php echo ROOT_URL . '/css/app.css'; ?>
The most useful thing to do is typically to create a small helper function for that:
<?php echo css('app.css'); ?>
Depending on what kind of templating system you may be using, this could look as nice as this:
{{ css 'app.css' }}
Try adding a global variable or constant or some functions to you PHP application named: $site_root, that is a path to your root directory. For example CodeIgniter does this with url_helper, See This: https://ellislab.com/codeigniter/user-guide/helpers/url_helper.html
Then add $siteRoot before your css file
... href="<?php echo site_url() ?>/link/to/your/file.css" ...
So I am developing a pretty hefty WordPress website where I am using the 320press Twitter Bootstrap theme and I am utilizing LESS CSS.
Some general info to know:
WordPress 3.5
Bootstrap 2.0
LESS 1.3.3
Everything has been working alright on the WordPress side, the Bootstrap side, etc. But...I had a heck of a time getting LESS to work correctly. I downloaded the less-1.3.3-min.js file from lesscss.org and dropped it in the appropriate folder. I then referenced it in the header.php file. I know all of things are correctly linked up because if you View Source on the page and click the less-1.3.3.js reference it loads perfectly.
Here's what the section of code looks like in my header.php file
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/css/fonts.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/css/custom.css">
<link rel="stylesheet/less" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/less/responsive.less">
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/less-1.3.3-min.js"></script>
So as instructed on the LESS website I loaded the script after I loaded CSS files. Things should start happening correct? No. So I played around a lot and couldn't figure it out.
<-- Readers text when LESS isn't working
I then found the regular "less-1.3.3.js" file on GIT and downloaded it. BOOM everything worked.
<-- this is how it should look (the word "Readers")
Woohoo, victory dance.
Not so fast....
When I shrink my browser down to 979px or under there is a massive gap under the nav.
This gap should be more like this:
Ok, maybe I messed up some CSS...after about 4 hours of investigating I noticed that the Bootstrap.css file that gets compiled is showing twice. Once as a linked stylesheet:
and then again as an embedded stylesheet.
Using the Web Developer Extension in firefox I delete all of the embedded styles and everything looks great. But I can't figure out what's dumping that into the site head other than something that the javascript. Does this happen to everybody?
Any ideas? Of course it's an internal-network only development environment so I can't share a URL with you but I have thrown in a few screenshots to show what I'm talking about.
Help me please! My brain is fried trying to find this issue.
Thanks.
Thanks to Scott Simpson for the direction here. I was looking everywhere but the functions.php file which is my first issue.
I commented out the responsive.css in the funcitons.php file and that fixed it. I knew it was going to be something dumb.
Thank you again.
I have this head
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="<?php echo FO_CSS_PATH . 'all.css'; ?>" />
<script type="text/javascript" src="<?php echo FO_JS_PATH . 'jquery-1.8.0.min.js'; ?>"></script>
</head>
FO_CSS_PATH and FO_JS_PATH is correct and fully working on all other browsers.
First of all when I click on a link and open new page, the css is fully loaded (I can see it in developer tools from ie). I don`t think I have any error in my css because if I press F5 (refresh), the page is fully loaded.
So, when I open a page, the css is loading but not working. If I press F5 it is fully working.
PS. I found the same problem on this website: http://forums.asp.net/t/1180199.aspx/1/10, but i'm not working with ASP and there I didn't find a good solution.
First, try with the actual path of the CSS file (no PHP at all) to see if the problem persists. If so, double-check if the problem occurs on another PC with the same version of IE. If the problem is still there, you will have to try another new CSS file that you just created with some random properties just to test.
If it still not work only on some specific versions of IE, I would check for the charset used to create your file (with a great text editor like notepad++). Be sure that the charset used to save the file is the same as the one declared in your php header() or html meta.
It really looks like IE isn't detecting properly the charset of your CSS file or your PHP/html page. When it refreshes, it now detects properly.
I've crawled forums far and wide for a solution for this, but to no avail.
I'm running an app on a localhost and I want to link to my CSS styles in my html page.
The general consensus is that I should use base_url() . "css/main.css" to create a link.
The PROBLEM lies in the fact that I want other people on my network to be able to use my app. But when they link to my page from their computer, they see
link rel="stylesheet" type="text/css" href="http://localhost/codeigniter/css/main.css
which of course does not load the CSS to the page, as the css files are on my localhost, not theirs.
Please tell me there's an elegant solution to this problem. Codeigniter is driving me kind of nuts.
modify the $config["base_url"] value to the IP address assigned to your computer. Like:
$config["base_url"] = "http://192.168.1.5/codeigniter/";
What you need here is to setup base url as per ENVIRONMENT
switch(ENVIRONMENT) {
case 'localhost':
$config['base_url'] = 'http://localhost/codeigniter/whatever/';
break;
case 'anothercomputer':
$config['base_url'] = 'http://anotherdomain.com/';
break;
default: //live
$config['base_url'] = 'http://yourdomain.com/';
}
obviously you'll need to setup ENVIRONMENT const to all these values by checking e.g. $_SERVER['SERVER_NAME'] etc in the index.php
There is 3 Ways of adding css style to your document most common way is external,
use this code to get style from external file.css:
<link rel="stylesheet" type="text/css" href="your_css_file_location.css" />
the css file should be at .css format,
another way is by using internal, the style tag goes between the tags ,
<style type="text/css"> your style here </style>
and last the inline,
<body style="background-color: #FF0000;">
hope you got this, have a nice day.