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.
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.
Hey I am working on a Client's website that is built using Social engine , there is one weired issue I am facing.
Let me explain :
The website was working fine at original url let say www.abc.com , but as soon as I changed the url and tried to access the website from IP address associated with it, it was still working but just the home page and all other pages aren't loading some CSS/JS files .
I tried to move everything to my local server , but that couldnt help either and same issue was there at local server.
please see the image http://prntscr.com/860xmq
I am trying to fix it from last week but no luck please advice me how I can fix this issue.
Thanks
What is the problem
From the Screenshot it is clear that few of the .css and .js are not found i.e., it is not pointing to exact path.
How to fix it
Make sure that you are pointing it to correct location.
Note :
Make sure that you have used the correct path i.e.,
For CSS :
<link rel="stylesheet" type="text/css" href="css/yourcssfile.css">
and not something like
<link rel="stylesheet" type="text/css" href="localhost/yourprojectfolder/css/yourcssfile.css">
if you use PHP, then you can add this :
<?php
$base_url = "http://".$_SERVER['HTTP_HOST'].preg_replace('#/+$#','',dirname($_SERVER['SCRIPT_NAME'])=="\\"?"":dirname($_SERVER['SCRIPT_NAME']))."/";
?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url; ?>css/yourcssfile.css">
so when you change your server name/domain it will adjust automatically.
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
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 have tried everything and this makes absolutely no sense! I previously had Less.js working just fine on my site, then I decided to use WP_Less because of some of its added features but then ran into issues when implementing BuddyPress. VERY long story (and day) short I am trying to get back to the basics and I can't seem to get Less.js to just work. I've turned off all plugins and removed all the code except what is in the header so there should be no outside conflicts
the header.php has this code:
<link rel="stylesheet" type="text/css" media="all" href="<?php get_bloginfo( 'stylesheet_directory' );?>/style.css" /> <!-- WP Theme Style -->
<link rel="stylesheet" type="text/css" media="all" href="<?php get_bloginfo( 'stylesheet_directory' );?>/style.css" /> <!-- Theme Less Styles -->
<link rel="stylesheet/less" type="text/css" href="<?php get_bloginfo( 'stylesheet_directory' );?>/css/less/style.less" /> <!-- Style.JS -->
This results in only the the less.js and the default style.css loading no style.less:
If I modify the style.less call to this:
<link rel="stylesheet" type="text/less" href="<?php get_bloginfo( 'stylesheet_directory' );?>/css/less/style.less" />
then they all load but the style.less does not get parsed:
Nothing I have tried down to its simplest form based on their documentation has worked and I simply don't understand why, I've set this up on other sites with no issues before.
If anyone can help you thank you SO MUCH, this is time sensitive and very urgent right now.
In my case, LESS was silently failing due to parsing errors.
In order to debug less.js, open javascript console in your browser (i.e. F12) and type:
less.env = "development";
less.refresh();
I've filed a report to less.js project, so they could fix this.