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" ...
Related
my point is to load css file via URL like this:
www.somepage.com/?loadcss=cutomfile.css
Its for testing purposes, vhere I need to test multiple css files and dont want to change source code everytime.
Cant find any solution (i wish it works without javascript, but is that possible?).
Thanks for some ideas.
If you happen to be using PHP which I doubt, then here's an easy solution.
get the style sheet from the URL with $CSSfile = $_GET["loadcss"]
then just do echo '<link rel="stylesheet" type="text/css" href="'.$CSSfile.'">';
This will take the parameter set in your URL (1) and then add it in the href of a link tag that will pull the desired file in.
I've looked at other answers involving this question, but still can't get it to work. I'm trying to link my CSS file relatively. I've tried the base_url() concat and it still doesn't work. Maybe I just have a misconception about CI URLs. Anyway, my CSS file is under views->templates->Item_CSS.css
I have tried everything and still get no results. If anyone can help I'd be grateful. Thanks!
You won't be able to reach that path easily, since codeigniter uses it's index.php (situated in the root) to handle everything. The views folder isn't the base path
What I do is to add a css and js folder in the root of CI (where index.php,.htaccess lies), after that your css routes will be www.example.com/css/mycss.css or base_url().css/mycss.css.
In case you get a forbidden error you might need to modify the .htaccess to allow accessing those folders
Assuming that you config your base url as:
$config['base_url'] = 'http://www.abc.com/';
and you put the application folder where the system and index.php file is. Then use the following code:
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>application/views/templates/Item_CSS.css" />
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.
Good Day, I'm learning CodeIgniter with Smarty. My CSS file is stored in
/App01/application/views/css/main.css
To link my CSS I use:
<link rel="stylesheet" type="text/css" href="http://localhost:88/APP1/application/views/css/layout.css" media="screen" />
But CSS is not applied on my page. When I open CSS URL, I get a message:
Forbidden
You don't have permission to access /APP1/application/views/css/layout.css on this server.
Please, what am I doing wrong? I'd like to keep my CSS together with the view because in future I'd like to learn how to create multiple themes and I thing the CSS should be kept within the theme folder.
Can I replace URL path to CSS file with some Smarty variable so that when I move my application I do not need to change CSS URL path in templates manually?
Thank you in advance! Vojtech
Anything in the /application folder of CodeIgniter should be considered out-of-bounds. For the best security, you should actually consider keeping /application above your www or public_html folder in a structure such as this:
– application
– controllers
– models
– views
– ...
– system
– core
– libraries
– ...
– public_html
– index.php
This makes your application code safer.
I’d advise creating your client-side scripts and CSS in a public folder. For example public_html/css and public_html/js. Or, if you wanted to go down the theme route, possibly name each CSS file as the name of the theme, so you’d have css/theme1.css and css/theme2.css.
If your site will always work from the root of a domain, then you can just use:
<link rel="stylesheet" type="text/css" href="/css/layout.css" media="screen" />
But if you feel that you’re going to be moving all sorts of things around, then consider preparing the file location in your controller before sending it to Smarty.
$this->load->helper('url');
$this->smarty->assign('css_file', base_url("css/theme1.css"));
That will return:
http://localhost/app1/css/theme.css
Or whatever your CodeIgniter URL is.
This will help to link css to codeigniter.
The link_tag is used to link resources and you can use helper function.
For example html helper, url helper, email helper, etc.
In your controller you have to create a function something like
<?php
class Home extends CI_Controller{
public function helper(){
$this->load->helper('html');
$this->load->view('index');
}
}
?>
And your index.php in view folder use link_tag keyword.
<html>
<head>
<title></title>
<?php echo link_tag('App01/application/views/css/main.css');?>
</head>
<body>
<?php
.......
?>
</body>
</html>
Try adding a symlink to your servers document root folder. (www/public_html/htdocs)
cd (document root folder)
ln -s (/App01/application/views/css) .
This way you can access your css folder and keep the current structure.
i'm using MAMP on my MacBook Pro as a local server. PHP and MySql are running fine. However, i have a strange issue with CakePHP - CSS only works on homepage of my site and only by the two following paths:
'localhost' and 'localhost/index.php'
Using 'localhost/index.php/' however returns just the bare unstyled markup as does all other pages in the site. How can a slash a the end break the CSS?
A few searches have suggested this could possibly be a mod rewrite issue in apache, but i'm out of my depth to be honest - i don't know how to test if changes i make turn mod rewrite on.
As CSS works only for 2 specific paths, could it perhaps be a problems with my routes? I only have 2 defined - '/' and '/index.php/' - and they are both the same.
Any help will be greatly appreciated,
James
It looks like your MAMP configuration (or Apache within MAMP has mod_rewrite disabled. It looks like you have to follow http://documentation.mamp.info/en/mamp-pro/advanced-functions/edit-configuration-files instructions, edit template for apache's httpd.conf, search for mod_rewrite and uncomment this line in config template.
The problem is most likely as tbwcf says that you're trying to load the CSS files using relative file paths, but you should always use CakePHP's helpers to add resource files to the layout:
<?php echo $this->Html->css('style'); ?>
The above will output
<link rel="stylesheet" type="text/css" href="/css/style.css" />
The benefit is that if you install the app to some other directory the path changes automatically:
<link rel="stylesheet" type="text/css" href="/other/directory/css/style.css" />
Do not use relative file paths like ../css. It will break the layout again in all but the simplest cases.
The slash at the end of the markup is most likely breaking the file path to your stylesheet. For example if your css is referenced as
<link rel="stylesheet" href="css/stylesheet.css" />
then adding the slash to the page URL would mean you'd need to jump back a step to get to the same stylesheet as it would no longer be in the same folder as the page you're on.
So you could add
../ before the reference like <link rel="stylesheet" href="../css/stylesheet.css" />
Or possibly an easier solution in this case would be to reference your stylesheet absolutely like:
<link rel="stylesheet" href="http://localhost:8888/project/css/stylesheet.css" />