Using LESS css in Codeigniter - php

Is there a way to implement a LESS stylesheet in a codeigniter project without having to rely on sparks and Carabiner?
In the of my view in CI, I place the link to the LESS file, and the LESS.js file directly underneath, however when I view the site, CI doesn't recognize the .LESS file. I've tried using relative paths as well as hardcoding the the file directories directly, however nothing changes. Is there something I should try adding to my config file to load the LESS files properly?
My file structure for the CI project is as follows
application
controllers
views
system
js
less-1.2.2.min.js
plugins.js
css
style.css
style.less
As for my header, its based off of the html5 boilerplate, to save space I'll only include the relevant info.
application -> views -> layout.php
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet/less" type="text/css" media="screen" href="css/style.less">
<script src="js/less-1.2.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<!-- end CSS-->

Are you using mod_rewrite in httpd.conf? If so, you need to make sure that .less files are exempted.
RewriteCond %{REQUEST_URI} !(^alocalfarmCI/index\.php|\.png$|\.gif$|\.less$|\.js$|\.css$|/robots
One way to easily tell if this is your problem, type in a non-existent url within your site that ends in .less. If you see CI's error page, that means /index.php/ was inserted in the url.

If you're running with client-side (javascript) LESS, Codeigniter won't be involved in how LESS operates. Be sure that you've set the rel attribute appropriately when you're linking your LESS file in your views and that the less.js file is being loaded correctly.
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Related

Why all my scripts are being loaded together and they return not found after a few days?

I have php scripts in my website and at the top of the page css and js are being loaded like below
<link href="css/pageLayout.css?version=4" rel="stylesheet" type="text/css" media="screen,print">
<link href="css/style.css?version=4" rel="stylesheet" type="text/css" media="screen,print">
<script src="validation.js?version=4" type="text/javascript"></script>
<script src="numcheck.js?version=4" type="text/javascript"></script>
But when I view source of my page the links are like below
<link href="css/pageLayout.css,qv==4+style.css,qv==4.pagespeed.cc.E_3tcdStoh.css" rel="stylesheet" type="text/css" media="screen,print">
<script src="Script/validation.js,qv==4+numcheck.js,qv==4.pagespeed.jc.-0oIAICDu_.js"></script>
It seems someone/something is putting all my files together, must be some component in either the server or the browser, but I can't seem to find it.
At first, it works without any problem, so I didn't notice. But after a few days these put together files are not found anymore and returns 401 not found, and none of the css and js works anymore.
It works again if I change the link of the file by changing the version number version, but returns after a few days. Any idea what might be the reason?

PHP - Including HTML from different folder

I am currently working on a admin backend and now want to move some pages into different folders (so I do not have all scripts in one folder).
Structure looks like this:
/
/theme/assets/...
/templates/head.php
/templates/foot.php
/top/index.php
/index.php
In head.php there are some stylesheets added like this
<link href="theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
This works fine for files in the root folder (e.g. index.php), but when I use the same head.php in /top/index.php it does not work because the path is wrong.
Is it somehow possible to properly include the stylesheets etc. while having the scripts in different folders?
Greetz,
Just specify the root identifier (/) at the beginning of the href attribute:
<link href="/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Try this,
<link href="../theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
In /top/index.php
OR
<link href="<?php echo $_SERVER['DOCUMENT_ROOT'] ?>/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
This code can be used in any page. The $_SERVER['DOCUMENT_ROOT'] points to the root.
Use '../' to reference the folder above and work your way back.
e.g
<link href="../theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Setting up the favicon

I have following code for my header.php file, in the includes folder.
<html>
<head>
<title>Health Mate</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link href="stylesheets/public.css" media="all" rel="stylesheet"/>
</head>
<!-- Some more code-->
</html>
I have pasted favicon.ico in the includes folder itself.Problem is the favicon is not setting up.Also If i redirect user to some site on submit button like yahoo.com . My site is taking favicon of yahoo. Please suggest some solution. Also tell me if favicon needs to be .ico file or it can be .png as well?
You should have necessary path needed to locate your favicon.ico image.
Eg: If your folder is structured this way:
/mysite
/includes
favicon.ico
index.php
If you're going to use it in index.php you should include the necessary path needed like this:
<link rel="icon" href="includes/favicon.ico" type="image/x-icon" />
Note: for checking if your like get the path towards your icon image..
you could check your web page source code using ctrl + u. Then click the href path linked if it displays the image it means your path is correct.
You have to put favicon.ico in to root directory of your website such that anyone can access it by yourdomain.com/favicon.ico. yourdomain.com/includes/favicon.ico will not work without a link tag.
If you can't put the favicon on the root folder for your domain then you have to use this code and change the href attribute to match the path to the favicon relative to the root of your site. i.e. /includes/favicon.ico
<link rel="Shortcut Icon" type="image/ico" href="/includes/favicon.ico">
I would recommend converting the file to an actual .ico using http://www.icoconverter.com/ or some equivalent tool.

WAMP + PHP CSS Include wont update with new styles

I am stumped. I am using includes to import a style sheet. If I add a new style to the style sheet, generated pages will not display ANY of the new css. If I change an old css rule it WILL display the change. I thought it might be a cached file of some kind, but I have cleared the cache in all testing browsers and the problem persists.
At first I thought it was a WAMP issue, but the problem happens when I move it all live as well so now I am thinking I am doing something wrong with the includes....
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<!-- Included Custom Overides -->
<link rel="stylesheet" type="text/css" href="css/Custon_Foundation_Overides.css">
<!-- Supersizer CSS -->
And this is simply my include...
<?php require("Includes/HEADER.php"); ?>
Again, all the old CSS works fine, just any new additions to any of the style sheets will not display.
Thanks
<link rel="stylesheet" type="text/css" href="css/Custon_Foundation_Overides.css">
Maybe "Custon_Foundation_Overides.css" is a typo and you meant "Custom_Foundation_Overrides.css" or maybe you have to upload the file with correct letters capitalization.
Sounds like a browser cache issue. A simple way to fix this while maintaining good caching practices would be to pass the file make time as a query var to the file.
<link rel="stylesheet" type="text/css" href="css/foundation.css?ver=<?php echo filemtime('css/foundation.css');?>">
This will generate a string like:
<link rel="stylesheet" type="text/css" href="css/foundation.css?ver=1382564850">
This way when you update the file your browser will think its a new file and cache that, but as long as the file remains unchanged it will have the same name and maintain the browser cache.

Facebook coding techniques

In an attempt to learn a little bit about Facebook and their coding techniques, I've viewed their source code. Here is one thing that I found:
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yN/r/JUrfX0ucXVq.css" />
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y2/r/gpxPzqCou0g.css" />
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yD/r/OWwnO_yMqhK.css" />
My question is about how Facebook composes their directory structure & filenames. Obviously the css files weren't named for readability. Is there a reason behind these random filenames? Could someone provide any information about this? Thanks in advance.
The CSS files are given random filenames to prevent browsers from caching them.
When a browser caches a resource, it will download the file and keep it on the user's computer to prevent the same file from being downloaded multiple times. The problem is that if you change your CSS file and keep the filename the same, a browser will keep using the cached version of the file and won't download the updated version. By giving the CSS files unique names, browsers are forced to download them.
It's similar to doing this with your CSS files:
<link rel="stylesheet" href="style-v1.css" />
<link rel="stylesheet" href="style-v2.css" />
<link rel="stylesheet" href="style-v3.css" />
...

Categories